/* Fixed application shell: compact top navigation, collapsible sidebar, open workspace. */
:root {
  --app-topbar-height: 68px;
  --app-sidebar-width: 276px;
  --app-shell-gutter: 24px;
  --app-shell-transition: 220ms cubic-bezier(.2, .8, .2, 1);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

body:not(.quiz-mode) .wrap {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.quiz-mode) .layout {
  display: block !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.quiz-mode) .card {
  backdrop-filter: none !important;
}

body:not(.quiz-mode) .sidebar {
  position: fixed !important;
  z-index: 160 !important;
  top: var(--app-topbar-height) !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  width: var(--app-sidebar-width) !important;
  height: calc(100vh - var(--app-topbar-height)) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px 14px 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: var(--panel) !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translateX(0);
  transition: transform var(--app-shell-transition), visibility var(--app-shell-transition) !important;
}

.gold-entry-action-rail[hidden] {
  display: none !important;
}

body:not(.quiz-mode) .gold-entry-action-rail {
  position: fixed;
  z-index: 170;
  top: clamp(210px, 42vh, 380px);
  left: calc(var(--app-sidebar-width) + 10px);
  display: block;
  width: 168px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, #f59e0b 26%, var(--line) 74%);
  border-radius: 8px;
  background: var(--surface-elevated, #fff);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  animation: goldEntryActionRailIn 180ms ease both;
  transition: width 180ms ease, padding 180ms ease, box-shadow 180ms ease;
}

body:not(.quiz-mode) .gold-entry-action-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 8px;
  padding: 2px 3px;
  color: color-mix(in srgb, #f59e0b 68%, var(--text) 32%);
  font-size: 11px;
  font-weight: 800;
}

body:not(.quiz-mode) .gold-entry-action-head strong {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 14%, var(--surface-muted) 86%);
  color: color-mix(in srgb, #f59e0b 72%, var(--text) 28%);
  font-size: 11px;
}

body:not(.quiz-mode) .gold-entry-action-toggle {
  display: inline-grid;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, #f59e0b 24%, var(--line) 76%);
  border-radius: 7px;
  background: var(--surface-muted);
  color: color-mix(in srgb, #f59e0b 62%, var(--text) 38%);
  cursor: pointer;
}

body:not(.quiz-mode) .gold-entry-action-toggle:hover,
body:not(.quiz-mode) .gold-entry-action-toggle:focus-visible {
  border-color: color-mix(in srgb, #f59e0b 48%, var(--line) 52%);
  background: color-mix(in srgb, #f59e0b 10%, var(--surface-muted) 90%);
}

body:not(.quiz-mode) .gold-entry-action-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(180deg);
  transition: transform 180ms ease;
}

body:not(.quiz-mode) .gold-entry-action-body {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

body:not(.quiz-mode) .gold-entry-action-body > button {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 8px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  font-size: 11.5px;
  line-height: 1.25;
}

body:not(.quiz-mode) .gold-entry-action-rail.is-collapsed {
  width: 42px;
  padding: 5px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

body:not(.quiz-mode) .gold-entry-action-rail.is-collapsed .gold-entry-action-head {
  display: flex;
  justify-content: center;
  padding: 0;
}

body:not(.quiz-mode) .gold-entry-action-rail.is-collapsed .gold-entry-action-head > span,
body:not(.quiz-mode) .gold-entry-action-rail.is-collapsed .gold-entry-action-head > strong,
body:not(.quiz-mode) .gold-entry-action-rail.is-collapsed .gold-entry-action-body {
  display: none;
}

body:not(.quiz-mode) .gold-entry-action-rail.is-collapsed .gold-entry-action-toggle svg {
  transform: rotate(0deg);
}

body.sidebar-collapsed:not(.quiz-mode) .gold-entry-action-rail {
  display: none !important;
}

@keyframes goldEntryActionRailIn {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1199px) {
  body:not(.quiz-mode) .gold-entry-action-rail {
    top: auto;
    bottom: 12px;
    left: 10px;
    width: calc(var(--app-sidebar-width) - 20px);
    z-index: 220;
  }

  body:not(.quiz-mode) .gold-entry-action-rail.is-collapsed {
    width: 42px;
  }

  body.gold-entry-actions-active:not(.quiz-mode) .sidebar {
    padding-bottom: 230px !important;
  }

  body.gold-entry-actions-active.gold-entry-actions-collapsed:not(.quiz-mode) .sidebar {
    padding-bottom: 70px !important;
  }
}

body:not(.quiz-mode) .sidebar > .section,
body:not(.quiz-mode) .sidebar > .section:first-child {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.quiz-mode) .sidebar > .section:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

#emptyGuideOpenLibraryBtn {
  background: var(--secondary-bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

#emptyGuideOpenLibraryBtn:hover,
#emptyGuideOpenLibraryBtn:focus-visible {
  background: var(--button-secondary-hover) !important;
  border-color: var(--line) !important;
}

#addCustomBtn.is-create-ready:not(:disabled) {
  background: color-mix(in srgb, #22a34a 18%, var(--surface-elevated) 82%) !important;
  color: color-mix(in srgb, #147a35 82%, var(--text) 18%) !important;
  border-color: color-mix(in srgb, #22a34a 46%, var(--line) 54%) !important;
}

#addCustomBtn.is-create-ready:not(:disabled):hover,
#addCustomBtn.is-create-ready:not(:disabled):focus-visible {
  background: color-mix(in srgb, #22a34a 25%, var(--surface-elevated) 75%) !important;
  border-color: color-mix(in srgb, #22a34a 62%, var(--line) 38%) !important;
}

body:not(.quiz-mode) .main {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 0 0 var(--app-sidebar-width) !important;
  padding: calc(var(--app-topbar-height) + var(--app-shell-gutter)) var(--app-shell-gutter) 40px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: margin-left var(--app-shell-transition), padding var(--app-shell-transition) !important;
}

body:not(.quiz-mode) .tabs {
  position: fixed !important;
  z-index: 180 !important;
  inset: 0 0 auto 0 !important;
  display: grid !important;
  grid-template-columns: minmax(236px, var(--app-sidebar-width)) minmax(420px, 720px) minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  margin: 0 !important;
  padding: 0 20px 0 12px !important;
  overflow: visible !important;
  background: var(--panel) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.app-topbar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.app-sidebar-toggle {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transform: none !important;
}

.app-sidebar-toggle:hover,
.app-sidebar-toggle:focus-visible {
  background: var(--surface-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

.app-sidebar-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 64%, transparent) !important;
  outline-offset: 2px !important;
}

.app-sidebar-toggle svg {
  width: 22px;
  height: 22px;
}

.mobile-sidebar-nav {
  display: none;
}

.app-library-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  color: var(--text);
}

.app-library-identity-icon {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 9px;
  box-shadow: none;
  cursor: pointer;
}

.app-library-identity-icon svg {
  width: 21px;
  height: 21px;
}

.app-library-identity-icon:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset: 2px;
}

html[data-theme-accent="white"] .app-library-identity-icon {
  color: #475569;
  background: color-mix(in srgb, #e2e8f0 64%, var(--surface-elevated) 36%);
  border: 1px solid color-mix(in srgb, #64748b 22%, var(--line) 78%);
}

html[data-theme="dark"][data-theme-accent="white"] .app-library-identity-icon {
  color: #e2e8f0;
  background: color-mix(in srgb, #f8fafc 12%, var(--surface-elevated) 88%);
  border-color: color-mix(in srgb, #cbd5e1 24%, var(--line) 76%);
}

.app-library-identity-copy {
  display: grid;
  min-width: 0;
  line-height: 1.12;
}

.app-pack-name-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  max-width: 100%;
  min-width: 0;
  margin-top: 3px;
  padding: 0;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: inherit;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
}

.app-pack-name-button:hover,
.app-pack-name-button:focus-visible {
  outline: none;
  color: var(--accent-strong);
}

.app-library-kind-label {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.12;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
}

.app-library-kind-label:hover,
.app-library-kind-label:focus-visible {
  outline: none;
  color: var(--accent-strong);
}

.app-library-identity-copy strong,
.app-pack-rename-form input {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-pack-name-button:hover .app-library-name,
.app-pack-name-button:focus-visible .app-library-name {
  color: var(--accent-strong);
}

.app-pack-rename-form {
  display: grid;
  min-width: 0;
  margin-top: 3px;
}

.app-pack-rename-form[hidden] {
  display: none !important;
}

.app-pack-rename-form input {
  width: min(220px, 100%);
  min-width: 0;
  height: 24px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line) 55%);
  border-radius: 7px;
  background: var(--surface-elevated);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}

.app-library-identity-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 4px !important;
  background: var(--surface-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
}

body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  color: var(--text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap !important;
}

body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab:hover,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button:hover {
  background: var(--surface-raised) !important;
  border-color: color-mix(in srgb, var(--line) 82%, transparent) !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab.active,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab[aria-selected="true"],
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button.is-active,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button[aria-pressed="true"] {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-elevated) 87%) !important;
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line) 38%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

html[data-theme-accent="white"] .current-user-shared-actions .btn-primary.disabled,
html[data-theme-accent="white"] .current-user-shared-actions .btn-primary:disabled,
html[data-theme-accent="white"] .current-user-shared-actions .btn-secondary.disabled,
html[data-theme-accent="white"] .current-user-shared-actions .btn-secondary:disabled {
  border-color: color-mix(in srgb, var(--theme-control-border, #d9dde3) 70%, var(--text) 30%) !important;
  border-radius: 12px !important;
  opacity: .68 !important;
}

body:not(.quiz-mode) .app-chrome-actions {
  position: relative !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 218px !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body:not(.quiz-mode) .app-chrome-actions::after {
  display: none !important;
}

body:not(.quiz-mode) .gqb-logo-chrome-spacer {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  overflow: visible !important;
  order: 2 !important;
  align-self: center !important;
}

body:not(.quiz-mode) .gqb-logo-game-host.is-docked {
  width: 44px !important;
  height: 44px !important;
}

body:not(.quiz-mode) .gqb-logo-game-host.is-docked .gqb-game {
  transform: translate(-50%, -50%) scale(.44) !important;
  transform-origin: center !important;
}

body:not(.quiz-mode) .chrome-profile-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not(.quiz-mode) .account-menu-wrap {
  display: block !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  order: 3 !important;
  align-self: center !important;
}

.quick-create-wrap {
  display: none;
}

body:not(.quiz-mode) .quick-create-wrap {
  display: block !important;
  position: relative;
  flex: 0 0 108px !important;
  width: 108px !important;
  min-width: 108px !important;
  order: 1 !important;
  align-self: center !important;
  overflow: visible;
}

.quick-create-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 108px;
  height: 38px;
  padding: 0 14px 0 12px;
  border: 1px solid color-mix(in srgb, var(--line) 46%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 78%, var(--surface-elevated) 22%);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 30%, transparent);
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.quick-create-btn svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

.quick-create-label {
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
}

.quick-create-btn:hover,
.quick-create-btn:focus-visible,
.quick-create-wrap.open .quick-create-btn {
  outline: none;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-muted) 68%, var(--accent-soft) 32%);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.quick-create-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 980;
  width: min(300px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-elevated);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .18);
}

.quick-create-menu[hidden] {
  display: none !important;
}

.quick-create-menu-head {
  display: grid;
  gap: 3px;
  margin-bottom: 11px;
}

.quick-create-menu-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.quick-create-menu-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.quick-create-field {
  display: grid;
  gap: 5px;
  margin-bottom: 9px;
}

.quick-create-field span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.quick-create-field em {
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}

.quick-create-field input {
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg, var(--surface-elevated));
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease;
}

.quick-create-field input:focus {
  border-color: #4285f4 !important;
  box-shadow: none;
}

.quick-create-status {
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.quick-create-status.is-error {
  color: var(--danger, #dc2626);
}

.quick-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 9px;
}

.quick-create-cancel,
.quick-create-submit {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.quick-create-cancel {
  border: 1px solid var(--line);
  background: var(--secondary-bg);
  color: var(--text);
}

.quick-create-submit {
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  background: var(--accent);
  color: var(--accent-contrast, #fff);
}

.quick-create-submit:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.quick-create-cancel:hover,
.quick-create-cancel:focus-visible,
.quick-create-submit:not(:disabled):hover,
.quick-create-submit:not(:disabled):focus-visible {
  outline: none;
  transform: translateY(-1px);
}

body:not(.quiz-mode) .sidebar {
  scrollbar-gutter: stable;
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}

body:not(.quiz-mode) .sidebar:hover,
body:not(.quiz-mode) .sidebar:focus-within,
body:not(.quiz-mode) .sidebar:active {
  scrollbar-color: color-mix(in srgb, var(--accent) 42%, rgba(148, 163, 184, .42) 58%) transparent !important;
}

body:not(.quiz-mode) .sidebar::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

body:not(.quiz-mode) .sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

body:not(.quiz-mode) .sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: transparent !important;
  transition: background-color .18s ease !important;
}

body:not(.quiz-mode) .sidebar:hover::-webkit-scrollbar-thumb,
body:not(.quiz-mode) .sidebar:focus-within::-webkit-scrollbar-thumb,
body:not(.quiz-mode) .sidebar:active::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 42%, rgba(148, 163, 184, .42) 58%) !important;
}

body:not(.quiz-mode) .disease-list {
  scrollbar-gutter: stable;
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}

body:not(.quiz-mode) .disease-list:hover,
body:not(.quiz-mode) .disease-list:focus-within,
body:not(.quiz-mode) .disease-list:active {
  scrollbar-color: color-mix(in srgb, var(--accent) 42%, rgba(148, 163, 184, .42) 58%) transparent !important;
}

body:not(.quiz-mode) .disease-list::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

body:not(.quiz-mode) .disease-list::-webkit-scrollbar-track {
  background: transparent !important;
}

body:not(.quiz-mode) .disease-list::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: transparent !important;
  transition: background-color .18s ease !important;
}

body:not(.quiz-mode) .disease-list:hover::-webkit-scrollbar-thumb,
body:not(.quiz-mode) .disease-list:focus-within::-webkit-scrollbar-thumb,
body:not(.quiz-mode) .disease-list:active::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 42%, rgba(148, 163, 184, .42) 58%) !important;
}

body:not(.quiz-mode) .chrome-profile-btn:hover,
body:not(.quiz-mode) .chrome-profile-btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
  transform: none !important;
}

.app-sidebar-scrim {
  display: none;
}

body.sidebar-collapsed:not(.quiz-mode) .sidebar {
  visibility: hidden !important;
  transform: translateX(-100%) !important;
}

body.sidebar-collapsed:not(.quiz-mode) .main {
  margin-left: 0 !important;
}

body.sidebar-collapsed:not(.quiz-mode) .tabs {
  grid-template-columns: minmax(230px, 255px) minmax(420px, 720px) minmax(118px, 1fr) !important;
}

body:not(.quiz-mode) .main > .tab-panel {
  display: none !important;
  width: 100%;
  max-width: 1540px;
  margin-right: auto;
  margin-left: auto;
}

body:not(.quiz-mode) .main > .tab-panel.active {
  display: block !important;
}

@media (max-width: 1050px) {
:root {
    --app-sidebar-width: 248px;
    --app-shell-gutter: 18px;
  }

  body:not(.quiz-mode) .tabs,
  body.sidebar-collapsed:not(.quiz-mode) .tabs {
    grid-template-columns: minmax(210px, var(--app-sidebar-width)) minmax(360px, 1fr) auto !important;
    gap: 12px !important;
  }

  .app-library-identity-copy small {
    display: none;
  }
}

@media (max-width: 820px) {
:root {
    --app-topbar-height: 62px;
    --app-shell-gutter: 14px;
  }

  body:not(.quiz-mode) .main {
    margin-left: 0 !important;
    padding-top: calc(var(--app-topbar-height) + var(--app-shell-gutter)) !important;
  }

  body:not(.quiz-mode) .sidebar {
    z-index: 210 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(74vw, 288px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: calc(var(--app-topbar-height) + max(10px, env(safe-area-inset-top))) 10px max(24px, calc(20px + env(safe-area-inset-bottom))) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    pointer-events: none !important;
    visibility: visible !important;
    transform: translate3d(-100%, 0, 0) !important;
    transition: transform var(--app-shell-transition) !important;
    will-change: transform;
    backface-visibility: hidden;
    contain: paint;
  }

  html[data-theme="dark"] body:not(.quiz-mode) .sidebar {
    background: #0a1221 !important;
  }

  body.sidebar-collapsed:not(.quiz-mode) .sidebar {
    pointer-events: none !important;
    box-shadow: none !important;
    visibility: visible !important;
    transform: translate3d(-100%, 0, 0) !important;
  }

  body.sidebar-open:not(.quiz-mode) .sidebar {
    pointer-events: auto !important;
    box-shadow: 16px 0 38px rgba(15, 23, 42, .18) !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body:not(.quiz-mode) .gold-entry-action-rail {
    width: calc(min(74vw, 288px) - 20px);
  }

  body:not(.quiz-mode) .gold-entry-action-rail.is-collapsed {
    width: 42px;
  }

  body:not(.sidebar-open) .gold-entry-action-rail {
    display: none !important;
  }

  .mobile-sidebar-nav {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }

  .mobile-sidebar-nav-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .mobile-sidebar-nav .tab-row-primary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 32px !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .mobile-sidebar-nav .tab-row-primary .tab,
  .mobile-sidebar-nav .tab-row-primary .microscope-tab-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
    border-radius: 7px !important;
    background: var(--surface-elevated) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .mobile-sidebar-nav .tab-row-primary .tab::after,
  .mobile-sidebar-nav .tab-row-primary .microscope-tab-button::after {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    color: inherit !important;
    font-size: 11.5px !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-sidebar-nav .tab-row-primary [data-tab="library"]::after {
    content: "Lib";
  }

  .mobile-sidebar-nav .tab-row-primary [data-tab="quiz"]::after {
    content: "Quiz";
  }

  .mobile-sidebar-nav .tab-row-primary #microscopeModeBtn::after {
    content: "Micro";
  }

  .mobile-sidebar-nav .tab-row-primary [data-tab="import"]::after {
    content: "New";
  }

  .mobile-sidebar-nav .tab-row-primary [data-tab="export"]::after {
    content: "Save";
  }

  .mobile-sidebar-nav .tab-row-primary .tab:hover,
  .mobile-sidebar-nav .tab-row-primary .tab:focus-visible,
  .mobile-sidebar-nav .tab-row-primary .microscope-tab-button:hover,
  .mobile-sidebar-nav .tab-row-primary .microscope-tab-button:focus-visible {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-elevated) 92%) !important;
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line) 68%) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .mobile-sidebar-nav .tab-row-primary .tab.active,
  .mobile-sidebar-nav .tab-row-primary .tab.is-active,
  .mobile-sidebar-nav .tab-row-primary .tab[aria-selected="true"],
  .mobile-sidebar-nav .tab-row-primary .microscope-tab-button.active,
  .mobile-sidebar-nav .tab-row-primary .microscope-tab-button.is-active,
  .mobile-sidebar-nav .tab-row-primary .microscope-tab-button[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent) 13%, var(--surface-elevated) 87%) !important;
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%) !important;
    color: var(--accent-strong, var(--accent)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  }

  body:not(.quiz-mode) .tabs,
  body.sidebar-collapsed:not(.quiz-mode) .tabs {
    z-index: 230 !important;
    grid-template-columns: minmax(0, 1fr) 0 auto !important;
    gap: 8px !important;
    padding: 0 10px !important;
    background: #ffffff !important;
  }

  body:not(.quiz-mode) .tab-row-primary-home {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body:not(.quiz-mode) .app-topbar-brand {
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  body.sidebar-open:not(.quiz-mode) .tabs {
    pointer-events: auto !important;
    background: #ffffff !important;
    border-bottom-color: var(--line) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body:not(.quiz-mode) .tabs,
  html[data-theme="dark"] body.sidebar-collapsed:not(.quiz-mode) .tabs,
  html[data-theme="dark"] body.sidebar-open:not(.quiz-mode) .tabs {
    background: #0a1221 !important;
  }

  body:not(.quiz-mode) .app-sidebar-toggle:hover,
  body:not(.quiz-mode) .app-sidebar-toggle:focus-visible,
  body.sidebar-open:not(.quiz-mode) .app-sidebar-toggle {
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body:not(.quiz-mode) .app-library-identity {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  body:not(.quiz-mode) .app-library-identity-icon {
    display: grid !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .app-library-identity-copy small {
    display: none;
  }

  body:not(.quiz-mode) .app-library-identity-copy {
    display: grid !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.08 !important;
  }

  body:not(.quiz-mode) .app-library-kind-label {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  .app-library-identity-copy strong,
  .app-pack-rename-form input {
    max-width: 100%;
    font-size: 11px;
  }

  body:not(.quiz-mode) .app-pack-name-button {
    max-width: 100% !important;
    margin-top: 2px !important;
  }

  body:not(.quiz-mode) .app-pack-rename-form {
    max-width: 100% !important;
  }

  body:not(.quiz-mode) .app-pack-rename-form input {
    width: 100% !important;
    height: 24px !important;
  }

  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary {
    gap: 2px !important;
    padding: 3px !important;
    border-radius: 12px !important;
  }

  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab,
  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
  }

  body:not(.quiz-mode) .chrome-profile-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body:not(.quiz-mode) .app-chrome-actions {
    min-width: 126px !important;
  }

  body:not(.quiz-mode) .quick-create-wrap {
    flex-basis: 98px !important;
    width: 98px !important;
    min-width: 98px !important;
  }

  .quick-create-btn {
    width: 98px;
    height: 38px;
    padding: 0 12px 0 10px;
    gap: 7px;
  }

  .quick-create-label {
    font-size: 12.5px;
  }

  body:not(.quiz-mode) .app-sidebar-scrim {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    background: rgba(15, 23, 42, .24);
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: opacity 180ms ease;
  }

  body.sidebar-open:not(.quiz-mode) .app-sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 610px) {
  body:not(.quiz-mode) .app-library-identity-copy {
    display: grid !important;
  }

  .app-sidebar-toggle {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body:not(.quiz-mode) .tabs,
  body.sidebar-collapsed:not(.quiz-mode) .tabs {
    grid-template-columns: minmax(0, 1fr) 0 auto !important;
    gap: 5px !important;
    padding: 0 7px !important;
  }

  body:not(.quiz-mode) .app-topbar-brand {
    gap: 6px !important;
  }

  body:not(.quiz-mode) .app-library-identity {
    gap: 6px !important;
  }

  body:not(.quiz-mode) .app-library-identity-icon {
    flex-basis: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
  }

  body:not(.quiz-mode) .app-library-identity-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  body:not(.quiz-mode) .app-library-kind-label {
    font-size: 12px !important;
  }

  body:not(.quiz-mode) .app-library-identity-copy strong,
  body:not(.quiz-mode) .app-pack-rename-form input {
    font-size: 10.5px !important;
  }

  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab,
  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button {
    overflow: hidden;
    padding: 0 4px !important;
    font-size: 10px !important;
    text-overflow: ellipsis;
  }

  body:not(.quiz-mode) .app-chrome-actions {
    gap: 4px !important;
    min-width: 120px !important;
  }

  body:not(.quiz-mode) .gqb-logo-chrome-spacer {
    display: grid !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body:not(.quiz-mode) .gqb-logo-game-host.is-docked {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body:not(.quiz-mode) .account-menu-wrap {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
  }

  body:not(.quiz-mode) .quick-create-wrap {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
  }

  .quick-create-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
  }

  .quick-create-label {
    display: none;
  }

  .quick-create-btn svg {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .quick-create-menu {
    position: fixed;
    top: calc(var(--app-topbar-height, 62px) + max(8px, env(safe-area-inset-top)));
    right: max(10px, env(safe-area-inset-right));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    max-height: min(70dvh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .quick-create-menu :is(input, select, button) {
    min-height: 44px;
  }

  body:not(.quiz-mode) #tab-library > .hero-card.selected {
    display: grid !important;
  }
}

.study-note-display,
.study-edit-surface {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  max-height: none !important;
  overflow: hidden !important;
  overflow: clip !important;
}

.study-note-display::-webkit-scrollbar,
.study-edit-surface::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.account-menu-subview {
  padding: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

.account-menu-subview[hidden] {
  display: none !important;
}

.account-menu-back,
.account-menu-choice,
.account-menu-theme-option {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  text-align: left !important;
}

.account-menu-back {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 12px 18px !important;
  font-size: 16px !important;
}

.account-menu-back > span {
  color: var(--muted) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.account-menu-choice {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 26px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 62px !important;
  padding: 11px 20px !important;
}

.account-menu-choice-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.account-menu-choice-copy strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.account-menu-choice-copy small {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.account-menu-choice-check {
  color: var(--accent-strong) !important;
  font-weight: 900 !important;
  opacity: 0 !important;
}

.account-menu-choice.is-selected .account-menu-choice-check,
.account-menu-theme-option.is-selected::after {
  opacity: 1 !important;
}

.account-menu-choice.is-selected,
.account-menu-theme-option.is-selected {
  background: var(--theme-control-selected-bg, color-mix(in srgb, var(--accent-soft) 52%, transparent)) !important;
  color: var(--theme-ui-selected-text, var(--text)) !important;
}

.account-menu-choice.is-loading {
  opacity: .72 !important;
  pointer-events: none !important;
}

.account-menu-choice-group {
  border-top: 1px solid var(--line) !important;
}

.account-menu-theme-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 8px 0 10px !important;
  border-top: 1px solid var(--line) !important;
}

.account-menu-theme-option {
  position: relative !important;
  min-height: 44px !important;
  padding: 10px 42px 10px 20px !important;
  font-size: 13px !important;
  font-weight: 780 !important;
}

.account-menu-theme-option::after {
  content: "✓" !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--accent-strong) !important;
  opacity: 0 !important;
}

.account-menu-back:hover,
.account-menu-back:focus-visible,
.account-menu-choice:hover,
.account-menu-choice:focus-visible,
.account-menu-theme-option:hover,
.account-menu-theme-option:focus-visible {
  background: color-mix(in srgb, var(--text) 7%, transparent 93%) !important;
  outline: none !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-results {
  gap: 12px !important;
  margin-top: 14px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-result {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 16px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 96%, white 4%), var(--surface-elevated)),
    var(--surface-elevated) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-result-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 18px !important;
  padding-right: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-title-cluster {
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-result-title {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: clamp(18px, 1.35vw, 22px) !important;
  font-weight: 860 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-badges,
#sharedPackBrowseCard.shared-library-inline .shared-pack-tags {
  gap: 7px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-badge,
#sharedPackBrowseCard.shared-library-inline .shared-pack-tag {
  padding: 5px 9px !important;
  border-radius: 5px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-items: initial !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-align: left !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card img,
#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card .shared-pack-author-avatar {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card .shared-pack-author-text {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  overflow: hidden !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-top: 2px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card .shared-pack-author-text strong,
#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card .shared-pack-author-text > span {
  display: inline !important;
  width: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card .shared-pack-author-text strong {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card:hover .shared-pack-author-text,
#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card:focus-visible .shared-pack-author-text,
#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card:hover .shared-pack-author-text strong,
#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card:focus-visible .shared-pack-author-text strong {
  color: var(--accent-strong) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-description {
  max-width: 86ch !important;
  margin: 2px 0 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-meta {
  margin-top: 0 !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-preview {
  margin-top: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 2px !important;
  padding-top: 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-social-row,
#sharedPackBrowseCard.shared-library-inline .shared-pack-actions {
  margin-top: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-actions .btn-primary,
#sharedPackBrowseCard.shared-library-inline .shared-pack-actions .btn-secondary,
#sharedPackBrowseCard.shared-library-inline .shared-pack-actions .shared-pack-pin-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 820 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-actions .shared-pack-pin-btn {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-actions .shared-pack-pin-btn.is-active {
  background: rgba(245,158,11,0.14) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #9a6700 !important;
}

@media (max-width: 900px) {
#sharedPackBrowseCard.shared-library-inline .shared-pack-result-top {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-author-card {
    grid-template-columns: auto minmax(0, auto) !important;
    justify-self: start !important;
    justify-items: start !important;
    align-items: flex-start !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-author-card img,
  #sharedPackBrowseCard.shared-library-inline .shared-pack-author-card .shared-pack-author-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-actions {
    justify-content: stretch !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-actions .btn-primary,
  #sharedPackBrowseCard.shared-library-inline .shared-pack-actions .btn-secondary,
  #sharedPackBrowseCard.shared-library-inline .shared-pack-actions .shared-pack-pin-btn {
    flex: 1 1 120px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
body:not(.quiz-mode) .sidebar,
  body:not(.quiz-mode) .main {
    transition: none !important;
  }
}

/* Compact main navigation: plain text buttons with a soft selected pill. */
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  gap: 8px !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 106px !important;
}

body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab:hover,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-elevated) 92%) !important;
  border-color: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab.active,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab.is-active,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab[aria-selected="true"],
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button.active,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button.is-active,
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-elevated) 89%) !important;
  border-color: transparent !important;
  color: var(--accent-strong) !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .tab,
  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  body:not(.quiz-mode) .tab-row-primary-home .tab-row-primary .microscope-tab-button {
    min-width: 98px !important;
  }
}

/* Creator profile shared-pack modal */
.author-profile-card {
  width: min(1120px, calc(100vw - 42px)) !important;
  height: min(880px, calc(100dvh - 42px)) !important;
  max-width: min(1120px, calc(100vw - 42px)) !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.author-profile-top {
  align-items: center !important;
  padding: 28px 30px 22px !important;
  border-bottom: 0 !important;
}

.author-profile-hero {
  gap: 18px !important;
}

.author-profile-avatar {
  width: 80px !important;
  height: 80px !important;
  flex-basis: 80px !important;
  box-shadow: none !important;
}

.author-profile-hero .study-set-kicker {
  margin-bottom: 6px;
  color: var(--accent-strong);
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 900;
}

.author-profile-bio {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 30px 22px !important;
  padding: 15px 18px !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-elevated) 88%, var(--accent) 3%) !important;
  line-height: 1.5 !important;
}

.author-profile-bio::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 2px solid currentColor;
  border-radius: 8px 8px 8px 3px;
  color: var(--accent);
}

.author-profile-actions {
  margin: -8px 30px 22px !important;
}

.author-profile-stats {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: min(360px, 38dvh) !important;
  overflow: hidden !important;
  margin: 0 30px !important;
  padding: 22px 0 24px !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.author-profile-library-head {
  align-items: flex-start !important;
  gap: 16px !important;
}

.author-profile-library-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
  font-size: 15px !important;
}

.author-profile-library-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.author-profile-control-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-elevated) 90%, var(--accent) 2%);
}

.author-profile-control-group button {
  min-height: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  box-shadow: none;
  cursor: pointer;
}

.author-profile-control-group button:hover,
.author-profile-control-group button:focus-visible,
.author-profile-control-group button.is-active {
  background: var(--theme-control-selected-bg, color-mix(in srgb, var(--accent) 13%, var(--surface-raised) 87%));
  color: var(--theme-ui-selected-text, var(--accent-strong));
}

.author-profile-control-group button span {
  margin-left: 5px;
  color: var(--muted);
  font-size: 11px;
}

.author-profile-library-strip {
  margin-top: 18px !important;
  gap: 14px !important;
  max-height: min(250px, 27dvh) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 2px 8px 6px 2px !important;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--accent) 42%, var(--line) 58%) transparent;
  scrollbar-width: thin;
}

.author-profile-library-strip::-webkit-scrollbar {
  width: 7px;
}

.author-profile-library-strip::-webkit-scrollbar-track {
  background: transparent;
}

.author-profile-library-strip::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 38%, var(--line) 62%);
  background-clip: padding-box;
}

.author-profile-library-strip::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 56%, var(--line) 44%);
  background-clip: padding-box;
}

.author-profile-library-strip.is-cards-mode {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}

.author-profile-library-strip.is-list-mode {
  grid-template-columns: 1fr !important;
}

.author-profile-library-pack {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 14px !important;
  min-height: 88px !important;
  padding: 16px 18px !important;
  border-radius: 12px !important;
  background: var(--surface-raised) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

.author-profile-library-strip.is-list-mode .author-profile-library-pack {
  min-height: 68px !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
}

.author-profile-library-pack.is-current {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line) 28%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 12px 28px rgba(37, 99, 235, 0.11) !important;
}

.author-profile-library-pack-copy,
.author-profile-pack-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.author-profile-library-pack-title,
.author-profile-pack-title {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author-profile-library-pack-title {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.author-profile-meta-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author-profile-meta-dot {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.author-profile-folder-icon,
.author-profile-count-folder-icon,
.author-profile-selected-folder-icon {
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line) 82%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised) 90%);
  color: var(--accent);
}

.author-profile-folder-icon {
  width: 38px;
  height: 38px;
}

.author-profile-count-folder-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.author-profile-selected-folder-icon {
  width: 54px;
  height: 54px;
  border-radius: 13px;
}

.author-profile-folder-icon svg,
.author-profile-count-folder-icon svg,
.author-profile-selected-folder-icon svg {
  display: block;
  width: 68%;
  height: 68%;
}

html[data-theme-accent="white"] #authorProfileModal :is(
  .author-profile-folder-icon,
  .author-profile-count-folder-icon,
  .author-profile-selected-folder-icon
) {
  color: color-mix(in srgb, #2563eb 70%, #334155 30%);
  background: color-mix(in srgb, #dbeafe 58%, var(--surface-elevated) 42%);
  border-color: color-mix(in srgb, #2563eb 22%, var(--line) 78%);
}

html[data-theme-accent="white"] #authorProfileModal :is(
  .author-profile-folder-icon,
  .author-profile-count-folder-icon,
  .author-profile-selected-folder-icon
) svg path:first-child {
  fill: color-mix(in srgb, #ffffff 76%, #dbeafe 24%);
}

html[data-theme="dark"][data-theme-accent="white"] #authorProfileModal :is(
  .author-profile-folder-icon,
  .author-profile-count-folder-icon,
  .author-profile-selected-folder-icon
) {
  color: color-mix(in srgb, #bfdbfe 82%, var(--text) 18%);
  background: color-mix(in srgb, #dbeafe 13%, var(--surface-elevated) 87%);
  border-color: color-mix(in srgb, #bfdbfe 24%, var(--line) 76%);
}

html[data-theme="dark"][data-theme-accent="white"] #authorProfileModal :is(
  .author-profile-folder-icon,
  .author-profile-count-folder-icon,
  .author-profile-selected-folder-icon
) svg path:first-child {
  fill: color-mix(in srgb, #dbeafe 12%, var(--surface-elevated) 88%);
}

.author-profile-pack-list {
  flex: 0 0 auto !important;
  max-height: min(230px, 28dvh) !important;
  overflow: auto !important;
  margin: 0 30px 30px !important;
  padding: 26px 0 2px !important;
  scrollbar-color: color-mix(in srgb, var(--accent) 36%, var(--line) 64%) transparent;
  scrollbar-width: thin;
}

.author-profile-pack-list::-webkit-scrollbar {
  width: 7px;
}

.author-profile-pack-list::-webkit-scrollbar-track {
  background: transparent;
}

.author-profile-pack-list::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
  background-clip: padding-box;
}

.author-profile-pack-item {
  padding: 24px !important;
  border-radius: 14px !important;
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line) 74%) !important;
  background: color-mix(in srgb, var(--surface-elevated) 92%, var(--accent) 4%) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.10) !important;
}

.author-profile-pack-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 18px !important;
}

.author-profile-pack-title {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.author-profile-pack-sub .author-profile-meta-line {
  font-size: 13px;
}

.author-profile-pack-date {
  color: var(--muted);
  font-size: 13px !important;
  font-weight: 800 !important;
}

.author-profile-pack-badges {
  justify-content: flex-end;
  max-width: 360px;
}

.author-profile-pack-actions {
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.author-profile-pack-actions .btn-secondary,
.author-profile-pack-actions .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 140px;
  min-height: 44px;
  border-radius: 12px !important;
}

.author-profile-action-open:not(.disabled):not(:disabled)::after,
.author-profile-action-download:not(.disabled):not(:disabled)::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
}

.author-profile-action-open:not(.disabled):not(:disabled)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M14.5 5H19v4.5M13.5 10.5 19 5M19 13.2v3.55A2.25 2.25 0 0 1 16.75 19H7.25A2.25 2.25 0 0 1 5 16.75v-9.5A2.25 2.25 0 0 1 7.25 5h3.55' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M14.5 5H19v4.5M13.5 10.5 19 5M19 13.2v3.55A2.25 2.25 0 0 1 16.75 19H7.25A2.25 2.25 0 0 1 5 16.75v-9.5A2.25 2.25 0 0 1 7.25 5h3.55' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.author-profile-action-download:not(.disabled):not(:disabled)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M12 4v10M7.5 10.5 12 15l4.5-4.5M5 20h14' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M12 4v10M7.5 10.5 12 15l4.5-4.5M5 20h14' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.author-profile-action-btn.is-inline-confirming::before,
.author-profile-action-btn.is-inline-confirming::after {
  display: none !important;
}

html[data-theme="dark"] .author-profile-library-pack,
html[data-theme="dark"] .author-profile-pack-item {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24) !important;
}

@media (max-width: 820px) {
.author-profile-top {
    align-items: flex-start !important;
  }

  .author-profile-library-head,
  .author-profile-library-controls {
    align-items: stretch !important;
    flex-direction: column;
  }

  .author-profile-control-group {
    justify-content: center;
  }

  .author-profile-pack-head {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .author-profile-pack-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 560px) {
.author-profile-card {
    width: min(100vw - 14px, 760px) !important;
    max-width: min(100vw - 14px, 760px) !important;
  }

  .author-profile-top,
  .author-profile-bio,
  .author-profile-stats,
  .author-profile-pack-list {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  .author-profile-top {
    padding: 18px 14px 16px !important;
  }

  .author-profile-avatar {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
  }

  .author-profile-pack-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .author-profile-pack-actions .btn-secondary,
  .author-profile-pack-actions .btn-primary {
    width: 100%;
  }
}

/* Current user profile modal */
.current-user-profile-card.current-user-profile-modern {
  width: min(860px, calc(100vw - 24px)) !important;
  height: min(760px, calc(100dvh - 24px)) !important;
  max-width: min(860px, calc(100vw - 24px)) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--success-text, #17803a) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 94%, #ffffff 6%), var(--surface-raised)) !important;
  box-shadow: 0 30px 88px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
}

.current-user-profile-modern .current-user-profile-top {
  align-items: flex-start !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 32px 34px 18px !important;
  border-bottom: 0 !important;
}

.current-user-profile-modern .current-user-profile-hero {
  align-items: center !important;
  gap: 28px !important;
  min-width: 0;
}

.current-user-avatar-frame {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 158px;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-elevated) 45%);
}

.current-user-profile-modern .current-user-main-avatar {
  width: 150px !important;
  height: 150px !important;
  flex-basis: 150px !important;
  border: 4px solid color-mix(in srgb, var(--surface-elevated) 94%, #ffffff 6%) !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16) !important;
}

.current-user-avatar-status {
  position: absolute;
  right: 8px;
  bottom: 11px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--surface-elevated);
  background: #22c55e;
  color: #ffffff;
}

.current-user-avatar-frame:not(.has-avatar) .current-user-avatar-status {
  display: none;
}

.current-user-avatar-status svg {
  width: 17px;
  height: 17px;
}

.current-user-profile-title {
  min-width: 0;
}

.current-user-profile-title h2 {
  margin: 0 0 7px !important;
  color: var(--text) !important;
  font-size: clamp(34px, 4vw, 44px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.current-user-profile-modern .current-user-profile-title .study-set-subtitle {
  margin: 0 0 10px !important;
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
}

.current-user-profile-line {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

.current-user-profile-modern .current-user-profile-header-actions {
  align-items: center !important;
  align-self: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

.current-user-profile-modern .current-user-profile-header-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.current-user-profile-modern .current-user-profile-header-actions svg,
.current-user-profile-modern .current-user-section-edit svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.current-user-profile-edit {
  gap: 8px !important;
  background: #0f8f78 !important;
  border-color: #0f8f78 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.current-user-profile-modern .current-user-profile-signout {
  gap: 8px !important;
  border-color: var(--line) !important;
  background: var(--surface-elevated) !important;
  color: var(--text) !important;
}

.current-user-profile-close {
  width: auto !important;
  min-width: 112px !important;
  gap: 8px !important;
  padding-inline: 14px !important;
}

.current-user-profile-modern .current-user-profile-content {
  display: block !important;
  padding: 0 34px 28px !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges;
}

.current-user-profile-modern .current-user-profile-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 0 0 26px !important;
}

.current-user-profile-modern .current-user-profile-stat {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 3px;
  min-height: 82px;
  padding: 16px 18px !important;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-elevated) 92%, var(--accent-soft) 8%) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

.current-user-profile-stat-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised) 88%);
  color: var(--accent-strong);
}

.current-user-profile-stat:nth-child(1) .current-user-profile-stat-icon {
  background: color-mix(in srgb, #22c55e 12%, var(--surface-raised) 88%);
  color: #16834f;
}

.current-user-profile-stat:nth-child(2) .current-user-profile-stat-icon {
  background: color-mix(in srgb, #4285f4 12%, var(--surface-raised) 88%);
  color: #2563eb;
}

.current-user-profile-stat:nth-child(3) .current-user-profile-stat-icon {
  background: color-mix(in srgb, #7c3aed 12%, var(--surface-raised) 88%);
  color: #6d28d9;
}

.current-user-profile-stat-icon svg {
  width: 25px;
  height: 25px;
}

.current-user-profile-modern .current-user-profile-stat strong {
  min-width: 0;
  color: var(--text);
  font-size: 17px !important;
  line-height: 1.15;
  letter-spacing: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-user-profile-modern .current-user-profile-stat-label {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.25;
}

.current-user-profile-section {
  margin: 0 0 24px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-elevated) 90%, var(--surface-raised) 10%);
  box-shadow: none;
}

.current-user-profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.current-user-profile-section-title {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.current-user-profile-section-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.current-user-profile-section-title h3 span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.current-user-profile-section-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
}

.current-user-profile-section-icon svg {
  width: 25px;
  height: 25px;
}

.current-user-section-edit {
  min-height: 40px !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  gap: 8px !important;
  color: var(--text) !important;
}

.current-user-profile-modern .current-user-profile-form {
  margin: 0 !important;
}

.current-user-academic-grid,
.current-user-support-grid,
.current-user-avatar-grid {
  gap: 0 !important;
}

.current-user-academic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.current-user-support-grid,
.current-user-avatar-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.current-user-profile-modern .field {
  min-width: 0;
}

.current-user-profile-modern .field label {
  margin: 0 0 8px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.current-user-profile-modern .field input,
.current-user-profile-modern .field textarea {
  width: 100%;
  min-height: 42px;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 650;
}

.current-user-profile-modern .field textarea {
  min-height: 88px;
  line-height: 1.55;
  resize: vertical;
}

.current-user-academic-grid .field:not(:last-child),
.current-user-support-grid .field:not(:last-child) {
  padding-right: 20px;
  border-right: 1px solid var(--line);
}

.current-user-academic-grid .field:not(:first-child),
.current-user-support-grid .field:not(:first-child) {
  padding-left: 20px;
}

.study-set-modal:not(.is-profile-editing) .current-user-profile-modern .current-user-profile-form input,
.study-set-modal:not(.is-profile-editing) .current-user-profile-modern .current-user-profile-form textarea {
  min-height: 28px;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  cursor: default;
}

.study-set-modal:not(.is-profile-editing) .current-user-profile-modern .current-user-profile-form textarea {
  min-height: 48px;
}

.current-user-section-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.current-user-profile-modern .profile-bio-decor {
  margin-top: 10px;
}

.current-user-profile-modern .profile-emoji-picker summary {
  border-radius: 10px;
}

.current-user-profile-modern .profile-avatar-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 0 !important;
  justify-content: stretch !important;
}

.current-user-profile-modern .profile-avatar-option {
  justify-items: center;
  min-height: 142px;
  padding: 15px 12px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--surface-elevated) 92%, var(--accent-soft) 8%) !important;
}

.current-user-profile-modern .profile-avatar-option.active {
  border-color: color-mix(in srgb, #22c55e 44%, var(--line) 56%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 12%, transparent) !important;
}

.current-user-profile-modern .profile-avatar-choice {
  width: 80px !important;
  height: 80px !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.11) !important;
}

.current-user-profile-modern .profile-avatar-option-meta {
  justify-items: center;
  width: 100%;
  text-align: center;
}

.current-user-profile-modern .profile-avatar-option-meta span {
  white-space: normal !important;
  text-align: center;
}

.current-user-profile-modern .profile-avatar-option-meta small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.current-user-profile-modern .profile-avatar-upload {
  width: 100%;
}

.current-user-profile-modern .profile-avatar-upload summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: 100% !important;
  min-height: 142px !important;
  padding: 20px !important;
  border: 1px dashed color-mix(in srgb, var(--line) 88%, var(--accent) 12%) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--surface-elevated) 88%, var(--surface-muted) 12%) !important;
  color: var(--text) !important;
  text-align: left;
  white-space: normal;
}

.current-user-profile-modern .profile-avatar-upload summary::after {
  display: none !important;
}

.profile-avatar-upload-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-muted) 78%, var(--accent-soft) 22%);
  color: var(--muted);
}

.profile-avatar-upload-icon svg {
  width: 28px;
  height: 28px;
}

.current-user-profile-modern .profile-avatar-upload summary strong,
.current-user-profile-modern .profile-avatar-upload summary small {
  display: block;
}

.current-user-profile-modern .profile-avatar-upload summary strong {
  margin-bottom: 6px;
  font-size: 15px;
}

.current-user-profile-modern .profile-avatar-upload summary small {
  color: var(--muted);
  font-size: 13px;
}

.current-user-profile-modern .profile-avatar-upload-body {
  width: 100%;
  margin-top: 12px;
  border-radius: 14px;
}

.current-user-profile-footer-actions {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 18px;
  margin: 8px 0 0 !important;
  padding-top: 12px;
}

.current-user-profile-footer-actions .btn-secondary,
.current-user-profile-footer-actions .btn-primary {
  min-height: 52px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

.current-user-profile-footer-actions .btn-secondary {
  flex: 0 0 min(34%, 320px);
}

.current-user-profile-footer-actions .btn-primary {
  flex: 0 0 min(38%, 360px);
  background: #0f8f78 !important;
  border-color: #0f8f78 !important;
}

html[data-theme="dark"] .current-user-profile-card.current-user-profile-modern {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 86%, #111827 14%), var(--surface-raised)) !important;
  box-shadow: 0 30px 88px rgba(0, 0, 0, 0.46) !important;
}

html[data-theme="dark"] .current-user-profile-section,
html[data-theme="dark"] .current-user-profile-modern .current-user-profile-stat,
html[data-theme="dark"] .current-user-profile-modern .profile-avatar-option,
html[data-theme="dark"] .current-user-profile-modern .profile-avatar-upload summary {
  background: color-mix(in srgb, var(--surface-elevated) 88%, #111827 12%) !important;
}

@media (max-width: 900px) {
.current-user-profile-modern .current-user-profile-top {
    align-items: stretch !important;
    flex-direction: column;
  }

  .current-user-profile-modern .current-user-profile-header-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .current-user-profile-modern .current-user-profile-stats,
  .current-user-academic-grid,
  .current-user-support-grid,
  .current-user-avatar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .current-user-academic-grid .field,
  .current-user-support-grid .field {
    padding: 0 !important;
    border-right: 0 !important;
  }

  .current-user-academic-grid,
  .current-user-support-grid {
    gap: 16px !important;
  }
}

@media (max-width: 620px) {
.current-user-profile-card.current-user-profile-modern {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .current-user-profile-modern .current-user-profile-top,
  .current-user-profile-modern .current-user-profile-content {
    padding-inline: 16px !important;
  }

  .current-user-profile-modern .current-user-profile-hero {
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .current-user-avatar-frame {
    flex-basis: 98px;
    width: 98px;
    height: 98px;
  }

  .current-user-profile-modern .current-user-main-avatar {
    width: 92px !important;
    height: 92px !important;
    flex-basis: 92px !important;
  }

  .current-user-avatar-status {
    right: 3px;
    bottom: 5px;
    width: 25px;
    height: 25px;
  }

  .current-user-profile-title h2 {
    font-size: 30px !important;
  }

  .current-user-profile-section {
    padding: 16px;
  }

  .current-user-profile-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .current-user-profile-footer-actions {
    flex-direction: column-reverse;
  }

  .current-user-profile-footer-actions .btn-secondary,
  .current-user-profile-footer-actions .btn-primary {
    flex-basis: auto;
    width: 100%;
  }
}

/* Google Drive libraries redesign */
#driveLibrariesModal:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  overflow: hidden !important;
}

#driveLibrariesModal .study-set-scrim {
  position: absolute !important;
  inset: 0 !important;
}

.drive-libraries-card {
  width: min(805px, calc(100vw - 44px)) !important;
  height: min(646px, calc(100dvh - 36px)) !important;
  max-width: min(805px, calc(100vw - 44px)) !important;
  max-height: min(646px, calc(100dvh - 36px)) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--surface-elevated) 96%, #ffffff 4%) !important;
  overflow: hidden !important;
}

.drive-libraries-card .drive-libraries-top {
  flex: 0 0 auto;
  align-items: flex-start !important;
  gap: 18px !important;
  padding: 22px 26px 14px !important;
  border-bottom: 0 !important;
}

.drive-libraries-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.drive-libraries-logo {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.drive-libraries-logo svg {
  display: block;
  width: 40px;
  height: 40px;
  filter: none;
}

.drive-libraries-card .study-set-kicker {
  display: none !important;
}

.drive-libraries-card #driveLibrariesTitle {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 32px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
}

.drive-libraries-card .study-set-subtitle {
  margin-top: 5px !important;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.drive-libraries-card #closeDriveLibrariesBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.drive-libraries-card #closeDriveLibrariesBtn::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='m6 6 12 12M18 6 6 18' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='m6 6 12 12M18 6 6 18' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-library-panel {
  --gdrive-row-gutter: 14px;
  --gdrive-scrollbar-reserve: 22px;
  --gdrive-toolbar-control: 42px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 26px 24px;
  background: transparent;
  border: 0;
  overflow: hidden;
}

.drive-libraries-card .gdrive-library-toolbar-row {
  flex: 0 0 auto;
  margin: 0 0 18px;
  padding-right: calc(var(--gdrive-row-gutter) + var(--gdrive-scrollbar-reserve));
}

.drive-libraries-card .gdrive-library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px var(--gdrive-toolbar-control) var(--gdrive-toolbar-control);
  gap: 10px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.drive-libraries-card .gdrive-library-search-field {
  position: relative;
  display: block;
  min-width: 0;
  height: var(--gdrive-toolbar-control);
}

.drive-libraries-card .gdrive-library-search-input {
  width: 100%;
  height: 100%;
  padding: 0 18px 0 44px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--text) 14%);
  border-radius: 13px;
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}

.drive-libraries-card .gdrive-library-search-field::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.5' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 4 4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.5' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 4 4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.drive-libraries-card .gdrive-library-visible-count {
  display: grid;
  place-items: center;
  min-width: 0;
  height: var(--gdrive-toolbar-control);
  color: var(--text);
  font-size: 16px;
  font-weight: 850;
}

.drive-libraries-card .gdrive-library-filter-wrap {
  position: relative;
  height: var(--gdrive-toolbar-control);
  min-width: 0;
}

.drive-libraries-card .gdrive-library-icon-btn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: var(--gdrive-toolbar-control);
  min-width: var(--gdrive-toolbar-control);
  height: var(--gdrive-toolbar-control);
  min-height: var(--gdrive-toolbar-control);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--text) 14%);
  border-radius: 13px;
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: none;
  cursor: pointer;
  line-height: 1;
}

.drive-libraries-card .gdrive-library-filter-wrap .gdrive-library-icon-btn {
  width: 100%;
  min-width: 100%;
}

.drive-libraries-card .gdrive-library-icon-btn:hover,
.drive-libraries-card .gdrive-library-icon-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-elevated) 92%);
}

.drive-libraries-card .gdrive-library-icon-btn svg {
  width: 18px;
  height: 18px;
}

.drive-libraries-card .gdrive-library-refresh-btn.is-loading svg {
  animation: syncSpin .85s linear infinite;
}

.drive-libraries-card .gdrive-library-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 8;
  min-width: 210px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--text) 14%);
  border-radius: 12px;
  background: var(--surface-elevated);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .13);
}

.drive-libraries-card .gdrive-library-filter-menu button {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.drive-libraries-card .gdrive-library-filter-menu button:hover,
.drive-libraries-card .gdrive-library-filter-menu button.is-active {
  background: var(--theme-control-selected-bg, color-mix(in srgb, var(--accent) 10%, transparent));
  color: var(--theme-ui-selected-text, color-mix(in srgb, var(--accent) 74%, var(--text) 26%));
}

.drive-libraries-card .gdrive-library-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 2px var(--gdrive-row-gutter) 18px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: color-mix(in srgb, var(--accent) 36%, var(--line) 64%) transparent;
  scrollbar-width: thin;
}

.drive-libraries-card .gdrive-library-list::-webkit-scrollbar {
  width: 8px;
}

.drive-libraries-card .gdrive-library-list::-webkit-scrollbar-track {
  background: transparent;
}

.drive-libraries-card .gdrive-library-list::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
  background-clip: padding-box;
}

.drive-libraries-card .gdrive-pack-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 86px;
  gap: 10px;
  align-items: center;
  min-height: 122px;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--text) 14%);
  border-radius: 14px;
  background: var(--surface-elevated);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
}

.drive-libraries-card .gdrive-pack-row:hover,
.drive-libraries-card .gdrive-pack-row:focus-within {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
}

.drive-libraries-card .gdrive-pack-row.is-current {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line) 52%);
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--accent) 70%, #4f8cff 30%), 0 10px 24px rgba(15, 23, 42, .06);
}

.drive-libraries-card .gdrive-pack-row-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line) 84%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised) 92%);
  color: color-mix(in srgb, var(--accent) 84%, var(--text) 16%);
  align-self: center;
  justify-self: center;
}

.drive-libraries-card .gdrive-pack-row-icon svg {
  width: 21px;
  height: 21px;
}

.drive-libraries-card .gdrive-pack-row-main,
.drive-libraries-card .gdrive-pack-row-copy {
  min-width: 0;
  text-align: left;
}

.drive-libraries-card .gdrive-pack-row-main {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 6px;
  justify-self: stretch;
  width: 100%;
  text-align: left;
}

.drive-libraries-card .gdrive-pack-row-copy {
  justify-self: start;
  width: 100%;
}

.drive-libraries-card .gdrive-pack-row-top {
  min-width: 0;
}

.drive-libraries-card .gdrive-pack-row-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 770;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.drive-libraries-card button.gdrive-pack-row-title:hover,
.drive-libraries-card button.gdrive-pack-row-title:focus-visible {
  color: color-mix(in srgb, var(--accent) 76%, var(--text) 24%);
}

.drive-libraries-card .gdrive-pack-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  overflow: hidden;
}

.drive-libraries-card .gdrive-pack-row-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 20px;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised) 95%);
  color: color-mix(in srgb, var(--text) 82%, var(--accent) 18%);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-libraries-card .gdrive-pack-row-type-badge.shared-pack-system-histology {
  border-color: color-mix(in srgb, var(--success) 24%, var(--line) 76%);
  background: color-mix(in srgb, var(--success) 14%, var(--surface-raised) 86%);
  color: color-mix(in srgb, var(--success) 72%, var(--text) 28%);
}

.drive-libraries-card .gdrive-pack-row-type-badge.shared-pack-system-anatomy {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line) 76%);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised) 88%);
  color: color-mix(in srgb, var(--accent) 76%, var(--text) 24%);
}

.drive-libraries-card .gdrive-pack-row-sub {
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
  font-size: 11.25px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-libraries-card .gdrive-pack-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  max-width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
  font-size: 9.75px;
  font-weight: 670;
  line-height: 1.25;
}

.drive-libraries-card .gdrive-pack-row-meta span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-libraries-card .gdrive-pack-row-meta span::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
}

.drive-libraries-card .gdrive-pack-row-meta span[data-drive-meta-icon="file"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M7 3.75h6.2L18 8.55V20.25H7A1.25 1.25 0 0 1 5.75 19V5A1.25 1.25 0 0 1 7 3.75Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M13 4v5h5' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M7 3.75h6.2L18 8.55V20.25H7A1.25 1.25 0 0 1 5.75 19V5A1.25 1.25 0 0 1 7 3.75Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M13 4v5h5' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-pack-row-meta span[data-drive-meta-icon="size"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M5.5 8.5h13v9.25c0 .97-.78 1.75-1.75 1.75h-9.5c-.97 0-1.75-.78-1.75-1.75V8.5Z' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 8.5V7a4 4 0 0 1 8 0v1.5M9 13h6' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M5.5 8.5h13v9.25c0 .97-.78 1.75-1.75 1.75h-9.5c-.97 0-1.75-.78-1.75-1.75V8.5Z' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 8.5V7a4 4 0 0 1 8 0v1.5M9 13h6' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-pack-row-meta span[data-drive-meta-icon="date"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M6.75 5.5h10.5A2.25 2.25 0 0 1 19.5 7.75v9.5a2.25 2.25 0 0 1-2.25 2.25H6.75a2.25 2.25 0 0 1-2.25-2.25v-9.5A2.25 2.25 0 0 1 6.75 5.5ZM8 3.75v3.5M16 3.75v3.5M5 9.5h14' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M6.75 5.5h10.5A2.25 2.25 0 0 1 19.5 7.75v9.5a2.25 2.25 0 0 1-2.25 2.25H6.75a2.25 2.25 0 0 1-2.25-2.25v-9.5A2.25 2.25 0 0 1 6.75 5.5ZM8 3.75v3.5M16 3.75v3.5M5 9.5h14' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-pack-row-actions {
  display: grid;
  grid-auto-rows: minmax(26px, auto);
  gap: 5px;
  align-self: center;
  justify-self: end;
  width: 86px;
  min-width: 0;
  overflow: hidden;
}

.drive-libraries-card .gdrive-pack-row:has(.gdrive-pack-row-action.is-inline-confirming, .gdrive-pack-row-action.is-action-progress) .gdrive-pack-row-actions {
  width: max-content;
  min-width: 86px;
}

.drive-libraries-card .gdrive-pack-row-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 0 6px;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--text) 16%);
  border-radius: 8px;
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: none;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.drive-libraries-card .gdrive-pack-row-action--primary {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 58%, #ffffff 42%);
  color: color-mix(in srgb, var(--text) 88%, #ffffff 12%);
}

.drive-libraries-card .gdrive-pack-row-action:hover,
.drive-libraries-card .gdrive-pack-row-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-elevated) 92%);
}

.drive-libraries-card .gdrive-pack-row-action--primary:hover,
.drive-libraries-card .gdrive-pack-row-action--primary:focus-visible {
  background: color-mix(in srgb, var(--accent) 66%, #ffffff 34%);
}

.drive-libraries-card .gdrive-pack-row-action:disabled,
.drive-libraries-card .gdrive-pack-row-action.disabled {
  border-color: transparent;
  background: color-mix(in srgb, var(--muted) 18%, var(--surface-raised) 82%);
  color: color-mix(in srgb, var(--muted) 72%, var(--text) 28%);
  cursor: default;
}

.drive-libraries-card .gdrive-pack-row-action.is-inline-confirming,
.drive-libraries-card .gdrive-pack-row-action.is-action-progress {
  width: max-content;
  min-width: 118px;
  padding-inline: 10px;
}

.drive-libraries-card .gdrive-pack-row-action::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: currentColor;
}

.drive-libraries-card .gdrive-pack-row-action:disabled::before,
.drive-libraries-card .gdrive-pack-row-action.disabled::before,
.drive-libraries-card .gdrive-pack-row-action.is-inline-confirming::before,
.drive-libraries-card .gdrive-pack-row-action.is-action-progress::before {
  display: none;
}

.drive-libraries-card .gdrive-pack-row-action--open::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M14.5 5H19v4.5M13.5 10.5 19 5M19 13.2v3.55A2.25 2.25 0 0 1 16.75 19H7.25A2.25 2.25 0 0 1 5 16.75v-9.5A2.25 2.25 0 0 1 7.25 5h3.55' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M14.5 5H19v4.5M13.5 10.5 19 5M19 13.2v3.55A2.25 2.25 0 0 1 16.75 19H7.25A2.25 2.25 0 0 1 5 16.75v-9.5A2.25 2.25 0 0 1 7.25 5h3.55' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-pack-row-action--edit::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='m5 16.8-.8 3 3-.8L18.6 7.6a2.1 2.1 0 0 0-3-3L5 16.8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m14.5 5.7 3.8 3.8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='m5 16.8-.8 3 3-.8L18.6 7.6a2.1 2.1 0 0 0-3-3L5 16.8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m14.5 5.7 3.8 3.8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-pack-row-action--share::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Ccircle cx='18' cy='5.5' r='2.5' stroke='black' stroke-width='2'/%3E%3Ccircle cx='6' cy='12' r='2.5' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='18.5' r='2.5' stroke='black' stroke-width='2'/%3E%3Cpath d='m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Ccircle cx='18' cy='5.5' r='2.5' stroke='black' stroke-width='2'/%3E%3Ccircle cx='6' cy='12' r='2.5' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='18.5' r='2.5' stroke='black' stroke-width='2'/%3E%3Cpath d='m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-pack-row-action--unshare::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M7 10V8.2A5 5 0 0 1 15.4 4.5M17 10h.75A2.25 2.25 0 0 1 20 12.25v5.5A2.25 2.25 0 0 1 17.75 20H6.25A2.25 2.25 0 0 1 4 17.75v-5.5A2.25 2.25 0 0 1 6.25 10H12M14 14l5.5-5.5M19.5 14 14 8.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M7 10V8.2A5 5 0 0 1 15.4 4.5M17 10h.75A2.25 2.25 0 0 1 20 12.25v5.5A2.25 2.25 0 0 1 17.75 20H6.25A2.25 2.25 0 0 1 4 17.75v-5.5A2.25 2.25 0 0 1 6.25 10H12M14 14l5.5-5.5M19.5 14 14 8.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-pack-row-action--remove::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M6 7h12M9 7V5.5h6V7M9 10v7M15 10v7M7.5 7l.7 12h7.6l.7-12' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M6 7h12M9 7V5.5h6V7M9 10v7M15 10v7M7.5 7l.7 12h7.6l.7-12' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.drive-libraries-card .gdrive-library-list .current-user-shared-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--line) 78%, var(--text) 22%);
  border-radius: 12px;
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
  font-size: 13px;
  text-align: center;
}

html[data-theme="dark"] .drive-libraries-card .gdrive-pack-row {
  box-shadow: 0 16px 32px rgba(0, 0, 0, .20);
}

@media (max-width: 760px) {
.drive-libraries-card .gdrive-library-panel {
    --gdrive-row-gutter: 0px;
    padding-inline: 16px;
  }

  .drive-libraries-card .gdrive-library-toolbar {
    grid-template-columns: minmax(0, 1fr) 38px 40px 40px;
  }

  .drive-libraries-card .gdrive-library-search-field,
  .drive-libraries-card .gdrive-library-visible-count,
  .drive-libraries-card .gdrive-library-icon-btn {
    height: 40px;
  }

  .drive-libraries-card .gdrive-pack-row {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 0;
  }

  .drive-libraries-card .gdrive-pack-row-actions {
    grid-column: 2;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  }
}

.drive-libraries-card .shared-pack-badge {
  min-height: 28px !important;
  padding: 6px 12px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 840 !important;
}

.drive-libraries-card .shared-pack-tags,
.drive-libraries-card [data-current-user-pack-search-text][hidden] {
  display: none !important;
}

html[data-theme="dark"] .drive-libraries-card {
  background: color-mix(in srgb, var(--surface-elevated) 96%, #0b1220 4%) !important;
}

@media (max-width: 720px) {
  .drive-libraries-heading {
    gap: 14px;
  }

  .drive-libraries-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .drive-libraries-logo svg {
    width: 42px;
    height: 38px;
  }

  .drive-libraries-card #driveLibrariesTitle {
    font-size: 30px !important;
  }
}

/* Compact workspaces with real layout sizing instead of browser zoom/scale. */
#tab-quiz,
#tab-import,
#tab-export {
  width: 100% !important;
  margin-inline: auto !important;
  transform: none !important;
  zoom: 1 !important;
}

#tab-quiz {
  max-width: 1025px;
}

#tab-import,
#tab-export {
  max-width: 1148px;
}

#tab-quiz .quiz-panel,
#tab-quiz .quiz-setup-panel,
#tab-import .import-option-card,
#tab-export .drive-export-card,
#tab-export .share-students-card,
#tab-export .danger-card {
  border-radius: 16px;
}

#tab-quiz .quiz-panel,
#tab-quiz .quiz-setup-panel {
  padding: clamp(17px, 1.8vw, 29px);
}

#tab-import .import-option-card {
  min-height: 0;
  padding: clamp(15px, 1.7vw, 24px);
}

#tab-import .import-start-stack {
  gap: clamp(12px, 1.3vw, 19px);
}

#tab-import .shared-library-inline {
  margin-top: clamp(15px, 1.7vw, 24px);
}

#tab-export .drive-export-grid {
  gap: clamp(12px, 1.35vw, 19px);
}

#tab-export .drive-export-card {
  min-height: 0;
  padding: clamp(15px, 1.45vw, 24px);
}

#tab-export .share-students-card {
  margin-top: clamp(15px, 1.7vw, 24px);
}

#tab-export .share-students-body,
#tab-export .shared-pack-publish-body {
  padding: clamp(15px, 1.7vw, 26px);
}

#userProfileModal .current-user-profile-card.current-user-profile-modern,
#authorProfileModal .author-profile-card {
  transform: none !important;
  zoom: 1 !important;
  width: min(860px, calc(100vw - 24px)) !important;
  max-width: min(860px, calc(100vw - 24px)) !important;
  height: min(760px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  margin: auto !important;
}
#userProfileModal .current-user-profile-card.current-user-profile-modern {
  width: min(860px, calc(100vw - 24px)) !important;
  max-width: min(860px, calc(100vw - 24px)) !important;
}

@media (max-width: 1120px) {
#tab-import .import-start-stack,
  #tab-export .drive-export-grid {
    grid-template-columns: 1fr;
  }

  #userProfileModal .current-user-profile-card.current-user-profile-modern,
  #authorProfileModal .author-profile-card {
    width: min(860px, calc(100vw - 28px)) !important;
    max-width: min(860px, calc(100vw - 28px)) !important;
    height: min(760px, calc(100dvh - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
  }
}

@media (max-width: 720px) {
#tab-quiz,
  #tab-import,
  #tab-export {
    max-width: none;
  }

  #tab-quiz .quiz-panel,
  #tab-quiz .quiz-setup-panel,
  #tab-import .import-option-card,
  #tab-export .drive-export-card,
  #tab-export .share-students-card,
  #tab-export .danger-card {
    border-radius: 12px;
  }

  #userProfileModal .current-user-profile-card.current-user-profile-modern,
  #authorProfileModal .author-profile-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* Reference-aligned modal layout polish. Keep this real sizing, not zoom/scale. */
#userProfileModal .current-user-profile-card.current-user-profile-modern {
  width: min(860px, calc(100vw - 24px)) !important;
  max-width: min(860px, calc(100vw - 24px)) !important;
  height: min(760px, calc(100dvh - 24px)) !important;
  margin: auto !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-options {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 10px !important;
  min-height: 146px !important;
  padding: 14px 12px !important;
  text-align: center !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-choice {
  width: 76px !important;
  height: 76px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option-meta {
  align-items: center !important;
  text-align: center !important;
}

#authorProfileModal .author-profile-card {
  width: min(860px, calc(100vw - 24px)) !important;
  max-width: min(860px, calc(100vw - 24px)) !important;
  height: min(760px, calc(100dvh - 24px)) !important;
  margin: auto !important;
}

#authorProfileModal .author-profile-top {
  padding: 24px 30px 18px !important;
}

#authorProfileModal .author-profile-bio {
  margin-bottom: 18px !important;
}

#authorProfileModal .author-profile-stats {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 20px 0 22px !important;
}

#authorProfileModal .author-profile-library-strip {
  max-height: min(248px, 30dvh) !important;
  overflow-y: auto !important;
  padding-bottom: 8px !important;
}

#authorProfileModal .author-profile-pack-list {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 30px 26px !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid var(--line) !important;
}

#authorProfileModal .author-profile-pack-item {
  padding: 22px 24px !important;
}

#authorProfileModal .author-profile-pack-actions .author-profile-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
}

#authorProfileModal .author-profile-action-open:not(.disabled):not(:disabled)::after,
#authorProfileModal .author-profile-action-download:not(.disabled):not(:disabled)::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
}

#authorProfileModal .author-profile-action-open:not(.disabled):not(:disabled)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M14.5 5H19v4.5M13.5 10.5 19 5M19 13.2v3.55A2.25 2.25 0 0 1 16.75 19H7.25A2.25 2.25 0 0 1 5 16.75v-9.5A2.25 2.25 0 0 1 7.25 5h3.55' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M14.5 5H19v4.5M13.5 10.5 19 5M19 13.2v3.55A2.25 2.25 0 0 1 16.75 19H7.25A2.25 2.25 0 0 1 5 16.75v-9.5A2.25 2.25 0 0 1 7.25 5h3.55' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

#authorProfileModal .author-profile-action-download:not(.disabled):not(:disabled)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M12 4.5v10M8 10.5l4 4 4-4M5.5 18.5h13' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M12 4.5v10M8 10.5l4 4 4-4M5.5 18.5h13' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 720px) {
  #userProfileModal .current-user-profile-card.current-user-profile-modern,
  #authorProfileModal .author-profile-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* Final quiz flattening: no panel glow, compact difficulty segmented control. */
#tab-quiz {
  --quiz-panel-shadow: none !important;
}

#tab-quiz .quiz-options,
#tab-quiz .quiz-setup-actions,
#tab-quiz .quiz-panel,
#tab-quiz .quiz-setup-panel,
#tab-quiz .quiz-include-card,
#tab-quiz .quiz-include-card-stack,
#tab-quiz .quiz-group-preview-panel,
#tab-quiz .group-filter-summary {
  box-shadow: none !important;
}

#tab-quiz .quiz-options,
#tab-quiz .quiz-setup-actions {
  border-color: var(--line) !important;
  background: var(--surface-elevated) !important;
}

#tab-quiz .quiz-options[data-include-mode="group"] .quiz-include-card.is-code-groups,
#tab-quiz .quiz-options[data-include-mode="saved"] .quiz-include-card.is-saved-groups {
  box-shadow: none !important;
}

#tab-quiz .quiz-difficulty-control,
html[data-theme] #tab-quiz .quiz-difficulty-control,
html[data-theme-accent] #tab-quiz .quiz-difficulty-control {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

#tab-quiz .quiz-difficulty-control:hover,
#tab-quiz .quiz-difficulty-control:focus-within,
html[data-theme] #tab-quiz .quiz-difficulty-control:hover,
html[data-theme] #tab-quiz .quiz-difficulty-control:focus-within,
html[data-theme-accent] #tab-quiz .quiz-difficulty-control:hover,
html[data-theme-accent] #tab-quiz .quiz-difficulty-control:focus-within {
  border-color: transparent !important;
  outline: 0 !important;
}

#tab-quiz .quiz-difficulty-track,
html[data-theme] #tab-quiz .quiz-difficulty-track,
html[data-theme-accent] #tab-quiz .quiz-difficulty-track {
  min-height: 22px !important;
  height: 22px !important;
  border: 1px solid color-mix(in srgb, var(--line, #cbd5e1) 78%, var(--text, #0f172a) 14%) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface) 58%) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#tab-quiz .quiz-difficulty-option,
html[data-theme] #tab-quiz .quiz-difficulty-option,
html[data-theme-accent] #tab-quiz .quiz-difficulty-option {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 100% !important;
  padding-block: 0 !important;
}

#tab-quiz .quiz-difficulty-option + .quiz-difficulty-option,
html[data-theme] #tab-quiz .quiz-difficulty-option + .quiz-difficulty-option,
html[data-theme-accent] #tab-quiz .quiz-difficulty-option + .quiz-difficulty-option {
  border-left: 0 !important;
}

#tab-quiz .quiz-difficulty-track::before {
  display: none !important;
}

#tab-quiz .quiz-difficulty-option:hover,
#tab-quiz .quiz-difficulty-option:focus-visible,
html[data-theme] #tab-quiz .quiz-difficulty-option:hover,
html[data-theme] #tab-quiz .quiz-difficulty-option:focus-visible,
html[data-theme-accent] #tab-quiz .quiz-difficulty-option:hover,
html[data-theme-accent] #tab-quiz .quiz-difficulty-option:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  outline: 0 !important;
}

#tab-quiz .quiz-difficulty-option.is-selected,
html[data-theme] #tab-quiz .quiz-difficulty-option.is-selected,
html[data-theme-accent] #tab-quiz .quiz-difficulty-option.is-selected {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Proportional density pass for the reduced Quiz/New/Save widths. */
#tab-quiz {
  --workspace-panel-radius: 16px;
}

#tab-quiz .quiz-shell {
  gap: 10px !important;
  min-height: auto !important;
}

#tab-quiz .quiz-options,
#tab-quiz .quiz-setup-actions {
  border-radius: var(--workspace-panel-radius) !important;
}

#tab-quiz .quiz-options {
  margin-bottom: 12px !important;
  padding: clamp(12px, 1.55vw, 19px) !important;
}

#tab-quiz .quiz-options > summary {
  gap: 12px !important;
  margin-bottom: 14px !important;
}

#tab-quiz .quiz-panel-icon {
  width: 41px !important;
  height: 41px !important;
  border-radius: 11px !important;
}

#tab-quiz .quiz-panel-icon svg,
#tab-quiz .quiz-small-icon svg {
  width: 19px !important;
  height: 19px !important;
}

#tab-quiz .quiz-action-button .quiz-button-icon {
  width: 20px !important;
  height: 20px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: initial !important;
  filter: none !important;
  box-shadow: none !important;
}

#tab-quiz .quiz-action-button .quiz-button-icon-study {
  width: 20px !important;
}

#tab-quiz .quiz-action-button .quiz-button-icon-shuffle {
  width: 20px !important;
}

#tab-quiz .quiz-action-button .quiz-button-icon * {
  vector-effect: non-scaling-stroke !important;
}

#tab-quiz .quiz-action-button .quiz-button-icon path,
#tab-quiz .quiz-action-button .quiz-button-icon line,
#tab-quiz .quiz-action-button .quiz-button-icon polyline,
#tab-quiz .quiz-action-button .quiz-button-icon circle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
  box-shadow: none !important;
}

#tab-quiz .quiz-panel-icon,
#tab-quiz .quiz-small-icon,
#tab-quiz .quiz-choice-icon,
#tab-quiz .quiz-include-icon,
#tab-quiz .quiz-panel-icon svg,
#tab-quiz .quiz-small-icon svg,
#tab-quiz .quiz-choice-icon svg,
#tab-quiz .quiz-include-icon svg {
  box-shadow: none !important;
  filter: none !important;
}

#tab-quiz .quiz-options-summary-text > span:first-child,
#tab-quiz .quiz-setup-copy .quiz-setup-kicker {
  font-size: clamp(18px, 1.7vw, 24px) !important;
  line-height: 1.08 !important;
}

#tab-quiz .quiz-options-summary-sub,
#tab-quiz .quiz-setup-copy p {
  font-size: clamp(12px, 0.95vw, 13px) !important;
  line-height: 1.4 !important;
}

#tab-quiz .group-filter-grid {
  gap: clamp(11px, 1.6vw, 19px) !important;
}

#tab-quiz .quiz-include-panel,
#tab-quiz .quiz-group-preview-panel {
  gap: 9px !important;
}

#tab-quiz .quiz-include-card {
  min-height: 75px !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}

#tab-quiz .quiz-small-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
}

#tab-quiz .quiz-include-card-title {
  font-size: 13.5px !important;
  line-height: 1.25 !important;
}

#tab-quiz .quiz-include-card-sub {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

#tab-quiz .quiz-include-arrow {
  width: 20px !important;
  height: 20px !important;
  border-radius: 7px !important;
}

#tab-quiz .quiz-include-arrow::before {
  width: 7px !important;
  height: 7px !important;
}

#tab-quiz .quiz-group-preview-panel {
  min-height: 210px !important;
  padding: 15px 17px !important;
  border-radius: var(--workspace-panel-radius) !important;
}

#tab-quiz #quizGroupSelect {
  min-height: 128px !important;
  font-size: 12.5px !important;
}

#tab-quiz .quiz-saved-group-list {
  min-height: 128px !important;
  max-height: 128px !important;
  font-size: 12.5px !important;
}

#tab-quiz .quiz-saved-group-list-row {
  min-height: 36px;
  padding: 7px 10px;
}

#tab-quiz .quiz-all-preview-hint {
  min-height: 107px !important;
  gap: 8px !important;
  font-size: 12.5px !important;
}

#tab-quiz .group-filter-summary {
  min-height: 39px !important;
  margin-top: 14px !important;
  padding: 10px 14px 10px 41px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
}

#tab-quiz .quiz-setup-actions {
  gap: 12px !important;
  margin-top: 12px !important;
  padding: clamp(12px, 1.55vw, 19px) !important;
}

#tab-quiz .quiz-setup-side {
  gap: 8px !important;
  padding-left: 15px !important;
}

#tab-quiz .quiz-setup-buttons {
  gap: 8px !important;
  grid-template-columns: minmax(176px, 1.08fr) minmax(164px, .92fr) !important;
}

#tab-quiz .quiz-setup-buttons > button {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  padding-inline: 8px !important;
}

#tab-import .import-start-stack {
  gap: 11px !important;
}

#tab-import .import-start-stack .import-action-card {
  min-height: 185px !important;
  padding: 15px !important;
  gap: 10px !important;
  border-radius: 14px !important;
}

#tab-import .import-start-stack .import-action-card .action-fold-static-head,
#tab-import .import-start-stack .import-action-card .action-fold-body {
  gap: 8px !important;
}

#tab-import .import-start-stack .import-action-card .action-fold-body {
  grid-template-rows: minmax(48px, 1fr) auto minmax(0, auto) !important;
}

#tab-import .import-start-stack .import-action-card .action-fold-static-head,
#tab-import #newLibraryCard .action-fold-body::before {
  min-height: 48px !important;
}

#tab-import .import-start-stack .action-fold-title-wrap {
  gap: 5px !important;
}

#tab-import .import-start-stack .action-fold-title {
  font-size: clamp(14px, 0.95vw, 17px) !important;
  line-height: 1.16 !important;
}

#tab-import .import-start-stack .action-fold-sub {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

#tab-import .import-card-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}

#tab-import .import-card-icon svg {
  width: 18px !important;
  height: 18px !important;
}

#tab-import .import-card-icon-drive svg {
  width: 20px !important;
  height: 20px !important;
}

#tab-import .import-card-primary,
#tab-import .import-file-choose {
  min-height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

#tab-import .import-drop-zone {
  min-height: 51px !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  border-radius: 11px !important;
}

#tab-import .import-drop-icon {
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
}

#tab-import .drive-link-pill {
  min-height: 51px !important;
  grid-template-columns: 14px minmax(0, 1fr) 29px !important;
  padding: 3px 4px 3px 9px !important;
}

#tab-import .drive-link-arrow {
  width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  border-radius: 8px !important;
}

#tab-import .import-or-divider {
  margin: 4px 0 0 !important;
}

#tab-export .save-share-stack,
#tab-export .drive-export-grid {
  gap: 11px !important;
}

#tab-export .save-action-card {
  min-height: 80px !important;
  grid-template-columns: 34px 1fr auto !important;
  gap: 10px !important;
  padding: 13px 14px !important;
  border-radius: 14px !important;
}

#tab-export .save-action-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

#tab-export .save-action-card h3 {
  font-size: 14px !important;
  line-height: 1.18 !important;
}

#tab-export .save-action-card p {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#tab-export .save-action-card button {
  min-height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

#tab-export .share-students-card {
  margin-top: 15px !important;
  border-radius: 14px !important;
}

#tab-export .share-students-head {
  padding: 14px 15px !important;
}

#tab-export .share-students-head h3 {
  font-size: 16px !important;
  line-height: 1.15 !important;
}

#tab-export .share-students-head p {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

#tab-export .share-profile-details {
  margin: 12px 15px 0 !important;
}

#tab-export .share-profile-details-grid {
  gap: 8px !important;
}

#tab-export .shared-pack-publish-body {
  gap: 17px !important;
  margin: 12px 15px 0 !important;
  padding: 0 !important;
}

#tab-export #driveExportCard .shared-pack-compact-form {
  gap: 7px 8px !important;
  padding: 10px !important;
  border-radius: 12px !important;
}

#tab-export #driveExportCard .shared-pack-compact-form label {
  margin-bottom: 4px !important;
  font-size: 11px !important;
}

#tab-export #driveExportCard .shared-pack-compact-form input,
#tab-export #driveExportCard .shared-pack-compact-form select,
#tab-export #driveExportCard .shared-pack-compact-form textarea,
#tab-export #driveExportCard .shared-pack-compact-form .semester-prefix-input {
  min-height: 30px !important;
  font-size: 11.5px !important;
}

#tab-export #driveExportCard .shared-pack-compact-form textarea {
  min-height: 54px !important;
}

#tab-export .shared-pack-preview-card {
  gap: 7px !important;
  padding: 13px 14px !important;
  border-radius: 12px !important;
}

#tab-export .shared-pack-preview-result {
  min-height: 177px !important;
  padding: 12px 13px !important;
  border-radius: 11px !important;
}

#tab-export .shared-pack-preview-card h4 {
  font-size: 14.5px !important;
  line-height: 1.18 !important;
}

#tab-export .shared-pack-preview-card p {
  font-size: 11.3px !important;
  line-height: 1.42 !important;
}

#tab-export .shared-pack-preview-help {
  margin-top: 12px !important;
  padding: 9px 10px !important;
  font-size: 10.5px !important;
}

#tab-export .drive-share-action-stack-bottom {
  margin-top: 14px !important;
  padding: 11px 15px !important;
}

#tab-export .drive-share-action-stack-bottom .btn-primary,
#tab-export .drive-share-action-stack-bottom .btn-secondary {
  min-height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

/* Center the reduced pop-up windows with the same anchoring model as settings. */
#userProfileModal:not([hidden]),
#authorProfileModal:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  overflow: hidden !important;
}

#userProfileModal .current-user-profile-card.current-user-profile-modern,
#authorProfileModal .author-profile-card {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: auto !important;
}

@media (max-width: 980px) {
#tab-quiz .group-filter-grid,
  #tab-quiz .quiz-setup-actions,
  #tab-export .shared-pack-publish-body {
    grid-template-columns: 1fr !important;
  }

  #tab-quiz .quiz-setup-side {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

@media (max-width: 720px) {
#tab-quiz .quiz-options,
  #tab-quiz .quiz-setup-actions,
  #tab-import .import-start-stack .import-action-card,
  #tab-export .save-action-card,
  #tab-export .share-students-card {
    border-radius: 14px !important;
  }

  #userProfileModal:not([hidden]),
  #authorProfileModal:not([hidden]) {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    background: var(--surface-elevated, #ffffff) !important;
  }

  #userProfileModal .current-user-profile-card.current-user-profile-modern,
  #authorProfileModal .author-profile-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

/* Modal layout repair: keep the reduced windows usable without inherited shared-card overflow. */
#userProfileModal .current-user-profile-card.current-user-profile-modern,
#authorProfileModal .author-profile-card {
  width: min(860px, calc(100vw - 24px)) !important;
  max-width: min(860px, calc(100vw - 24px)) !important;
  height: min(760px, calc(100dvh - 24px)) !important;
  max-height: min(760px, calc(100dvh - 24px)) !important;
}
#userProfileModal .current-user-profile-card.current-user-profile-modern {
  border-radius: 22px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-top {
  gap: 16px !important;
  padding: 20px 24px 10px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-hero {
  gap: 18px !important;
}

#userProfileModal .current-user-avatar-frame {
  width: 108px !important;
  height: 108px !important;
  flex-basis: 108px !important;
}

#userProfileModal .current-user-profile-modern .current-user-main-avatar {
  width: 102px !important;
  height: 102px !important;
  flex-basis: 102px !important;
}

#userProfileModal .current-user-avatar-status {
  right: 3px !important;
  bottom: 6px !important;
  width: 24px !important;
  height: 24px !important;
}

#userProfileModal .current-user-profile-title h2 {
  margin-bottom: 4px !important;
  font-size: clamp(30px, 3.4vw, 36px) !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-title .study-set-subtitle,
#userProfileModal .current-user-profile-line {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-header-actions {
  gap: 8px !important;
  justify-content: flex-end !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-header-actions button {
  min-width: 112px !important;
  min-height: 36px !important;
  padding-inline: 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

#userProfileModal .current-user-profile-close {
  width: auto !important;
  min-width: 112px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-content {
  overflow: hidden !important;
  padding: 0 24px 16px !important;
  scrollbar-gutter: auto !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-stats {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-stat {
  min-height: 54px !important;
  padding: 8px 10px !important;
  column-gap: 9px !important;
  border-radius: 10px !important;
}

#userProfileModal .current-user-profile-stat-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
}

#userProfileModal .current-user-profile-stat-icon svg {
  width: 19px !important;
  height: 19px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-stat strong {
  font-size: 15px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-stat-label {
  font-size: 11px !important;
}

#userProfileModal .current-user-profile-section {
  margin-bottom: 9px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

#userProfileModal .current-user-profile-section-head {
  margin-bottom: 7px !important;
}

#userProfileModal .current-user-profile-section-title {
  gap: 8px !important;
}

#userProfileModal .current-user-profile-section-title h3 {
  font-size: 15px !important;
}

#userProfileModal .current-user-profile-section-icon {
  width: 22px !important;
  height: 22px !important;
}

#userProfileModal .current-user-profile-section-icon svg {
  width: 19px !important;
  height: 19px !important;
}

#userProfileModal .current-user-section-edit {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

#userProfileModal .current-user-profile-modern .field label {
  margin-bottom: 4px !important;
  font-size: 10.5px !important;
}

#userProfileModal .current-user-profile-modern .field input,
#userProfileModal .current-user-profile-modern .field textarea {
  min-height: 30px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

#userProfileModal .current-user-profile-modern .field textarea {
  min-height: 46px !important;
  max-height: 52px !important;
  line-height: 1.35 !important;
}

#userProfileModal .current-user-academic-grid,
#userProfileModal .current-user-support-grid {
  gap: 0 !important;
}

#userProfileModal .current-user-academic-grid .field:not(:last-child),
#userProfileModal .current-user-support-grid .field:not(:last-child) {
  padding-right: 12px !important;
}

#userProfileModal .current-user-academic-grid .field:not(:first-child),
#userProfileModal .current-user-support-grid .field:not(:first-child) {
  padding-left: 12px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-options {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option {
  min-height: 74px !important;
  padding: 8px !important;
  border-radius: 11px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-choice {
  width: 42px !important;
  height: 42px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option-meta span,
#userProfileModal .current-user-profile-modern .profile-avatar-upload summary strong {
  font-size: 12px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option-meta small,
#userProfileModal .current-user-profile-modern .profile-avatar-upload summary small {
  font-size: 10.5px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload summary {
  min-height: 74px !important;
  padding: 10px !important;
  gap: 10px !important;
  border-radius: 11px !important;
}

#userProfileModal .profile-avatar-upload-icon {
  width: 42px !important;
  height: 42px !important;
}

#userProfileModal .current-user-profile-footer-actions {
  gap: 12px !important;
  margin-top: 4px !important;
  padding-top: 6px !important;
}

#userProfileModal .current-user-profile-footer-actions .btn-secondary,
#userProfileModal .current-user-profile-footer-actions .btn-primary {
  min-height: 38px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

#authorProfileModal .author-profile-card {
  border-radius: 22px !important;
}

#authorProfileModal .author-profile-top {
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 24px 12px !important;
}

#authorProfileModal .author-profile-avatar {
  width: 60px !important;
  height: 60px !important;
  flex-basis: 60px !important;
}

#authorProfileModal .author-profile-hero {
  gap: 14px !important;
}

#authorProfileModal .author-profile-hero .study-set-kicker {
  margin-bottom: 3px !important;
  font-size: 10.5px !important;
}

#authorProfileModal .author-profile-hero h2 {
  font-size: clamp(26px, 3vw, 34px) !important;
  line-height: 1.05 !important;
}

#authorProfileModal .author-profile-hero .study-set-subtitle {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

#authorProfileModal .author-profile-card .btn-secondary {
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

#authorProfileModal .author-profile-bio {
  min-height: 42px !important;
  margin: 0 24px 12px !important;
  padding: 10px 13px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
}

#authorProfileModal .author-profile-bio::before {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px !important;
  border-width: 1.7px !important;
}

#authorProfileModal .author-profile-actions {
  margin: -2px 24px 12px !important;
}

#authorProfileModal .author-profile-stats {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 24px !important;
  padding: 14px 0 15px !important;
  overflow: hidden !important;
}

#authorProfileModal .author-profile-library-head {
  align-items: center !important;
  gap: 10px !important;
}

#authorProfileModal .author-profile-library-title {
  margin-top: 6px !important;
  font-size: 13px !important;
}

#authorProfileModal .author-profile-control-group {
  border-radius: 11px !important;
  padding: 3px !important;
}

#authorProfileModal .author-profile-control-group button {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

#authorProfileModal .author-profile-library-strip {
  max-height: 208px !important;
  margin-top: 12px !important;
  gap: 10px !important;
  padding: 2px 6px 4px 2px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#authorProfileModal .author-profile-library-strip.is-cards-mode {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#authorProfileModal .author-profile-library-strip.is-list-mode {
  grid-template-columns: 1fr !important;
}

#authorProfileModal .author-profile-library-pack {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 66px !important;
  padding: 10px 11px !important;
  border-radius: 11px !important;
}

#authorProfileModal .author-profile-folder-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
}

#authorProfileModal .author-profile-library-pack-copy {
  gap: 4px !important;
}

#authorProfileModal .author-profile-library-pack-title {
  font-size: 12.5px !important;
  line-height: 1.15 !important;
}

#authorProfileModal .author-profile-meta-line {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

#authorProfileModal .author-profile-meta-dot {
  display: inline !important;
}

#authorProfileModal .author-profile-pack-list {
  flex: 0 0 auto !important;
  max-height: 164px !important;
  margin: 0 24px 18px !important;
  padding: 14px 0 0 !important;
  overflow: hidden !important;
  border-top: 1px solid var(--line) !important;
}

#authorProfileModal .author-profile-pack-item {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#authorProfileModal .author-profile-pack-head {
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

#authorProfileModal .author-profile-selected-folder-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

#authorProfileModal .author-profile-pack-title {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

#authorProfileModal .author-profile-pack-date,
#authorProfileModal .author-profile-pack-sub .author-profile-meta-line {
  font-size: 11.5px !important;
}

#authorProfileModal .author-profile-pack-badges {
  justify-content: flex-end !important;
  gap: 7px !important;
  max-width: 270px !important;
}

#authorProfileModal .author-profile-pack-badges .shared-pack-badge {
  width: auto !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#authorProfileModal .author-profile-pack-actions {
  gap: 8px !important;
  margin-top: 10px !important;
}

#authorProfileModal .author-profile-pack-actions .btn-secondary,
#authorProfileModal .author-profile-pack-actions .btn-primary {
  min-width: 116px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
}

@media (max-width: 760px) {
#authorProfileModal .author-profile-library-strip.is-cards-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final modal containment repair: keep rich modal cards from collapsing into
   each other after the compact sizing pass. */
#userProfileModal .current-user-profile-card.current-user-profile-modern {
  width: min(860px, calc(100vw - 24px)) !important;
  height: min(900px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
}

#userProfileModal .current-user-profile-edit,
#userProfileModal .current-user-profile-stats,
#userProfileModal .current-user-profile-footer-actions {
  display: none !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 24px 18px !important;
  scrollbar-gutter: stable !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-section {
  margin-bottom: 14px !important;
  padding: 20px 22px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-section h3 {
  font-size: 17px !important;
}

#userProfileModal [data-current-user-profile-edit-trigger].is-profile-save-trigger {
  background: #138f65 !important;
  border-color: #138f65 !important;
  color: #fff !important;
}

#userProfileModal .current-user-profile-modern .field textarea {
  min-height: 92px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-top {
  padding-bottom: 18px !important;
}

#authorProfileModal .author-profile-card {
  width: min(960px, calc(100vw - 24px)) !important;
  height: min(900px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
}

#authorProfileModal .author-profile-pack-list {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 24px 20px !important;
  padding: 16px 0 0 !important;
}

#authorProfileModal .author-profile-selected-card {
  margin-bottom: 22px !important;
}

@media (max-width: 760px) {
  #userProfileModal .current-user-profile-card.current-user-profile-modern,
  #authorProfileModal .author-profile-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* Final Author Profile layout guard.
   Keep the creator pack browser compact and predictable without transform
   scaling, and reserve the visual selection treatment for the large preview
   card only. */
#authorProfileModal:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

#authorProfileModal .author-profile-card {
  width: min(960px, calc(100vw - 36px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 36px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

#authorProfileModal .author-profile-top {
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 24px 10px !important;
}

#authorProfileModal .author-profile-avatar {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
}

#authorProfileModal .author-profile-hero {
  gap: 12px !important;
  min-width: 0 !important;
}

#authorProfileModal .author-profile-hero .study-set-kicker {
  margin-bottom: 2px !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

#authorProfileModal .author-profile-hero h2 {
  font-size: clamp(26px, 3vw, 34px) !important;
  line-height: 1.05 !important;
}

#authorProfileModal .author-profile-hero .study-set-subtitle {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

#authorProfileModal .author-profile-card .btn-secondary {
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

#authorProfileModal .author-profile-bio {
  flex: 0 0 auto !important;
  min-height: 42px !important;
  margin: 0 24px 10px !important;
  padding: 10px 13px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
}

#authorProfileModal .author-profile-bio::before {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border-width: 1.7px !important;
}

#authorProfileModal .author-profile-actions {
  flex: 0 0 auto !important;
  margin: -2px 24px 10px !important;
}

#authorProfileModal .author-profile-stats {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 24px !important;
  padding: 12px 0 14px !important;
  overflow: visible !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}

#authorProfileModal .author-profile-library-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

#authorProfileModal .author-profile-library-kicker {
  font-size: 10.5px !important;
  letter-spacing: .16em !important;
  line-height: 1.1 !important;
}

#authorProfileModal .author-profile-library-title {
  margin-top: 6px !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#authorProfileModal .author-profile-library-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#authorProfileModal .author-profile-control-group {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px !important;
  border-radius: 11px !important;
}

#authorProfileModal .author-profile-control-group button {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#authorProfileModal .author-profile-view-toggle button {
  width: 36px !important;
  min-width: 36px !important;
  padding: 6px !important;
}

#authorProfileModal .author-profile-view-glyph {
  position: relative !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  margin: 0 !important;
  color: currentColor !important;
}

#authorProfileModal .author-profile-view-glyph::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
}

#authorProfileModal .author-profile-view-glyph.is-cards::before {
  width: 5px !important;
  height: 5px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  box-shadow: 8px 0 0 currentColor, 0 8px 0 currentColor, 8px 8px 0 currentColor !important;
}

#authorProfileModal .author-profile-view-glyph.is-list::before {
  top: 1px !important;
  width: 14px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor !important;
}

#authorProfileModal .author-profile-view-label {
  display: none !important;
}

#authorProfileModal .author-profile-sort-toggle {
  position: relative !important;
  width: 38px !important;
  min-width: 38px !important;
  justify-content: center !important;
  overflow: visible !important;
  gap: 0 !important;
}

#authorProfileModal .author-profile-sort-glyph {
  width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: currentColor !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
}

#authorProfileModal .author-profile-sort-glyph svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

#authorProfileModal .author-profile-sort-menu-btn {
  width: 30px !important;
  min-width: 30px !important;
  padding: 6px !important;
}

#authorProfileModal .author-profile-sort-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 50 !important;
  display: grid !important;
  width: max-content !important;
  min-width: 164px !important;
  gap: 4px !important;
  padding: 6px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-elevated) 96%, var(--accent) 4%) !important;
  box-shadow: none !important;
}

#authorProfileModal .author-profile-sort-menu[hidden] {
  display: none !important;
}

#authorProfileModal .author-profile-sort-menu button {
  width: 100% !important;
  min-height: 32px !important;
  justify-content: space-between !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  text-align: left !important;
}

#authorProfileModal .author-profile-control-group button span:not(.author-profile-view-glyph):not(.author-profile-view-label):not(.author-profile-sort-glyph) {
  margin-left: 4px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}

#authorProfileModal .author-profile-library-strip {
  display: grid !important;
  max-height: min(205px, 28dvh) !important;
  min-height: 0 !important;
  margin-top: 10px !important;
  gap: 10px !important;
  padding: 2px 8px 4px 2px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#authorProfileModal .author-profile-library-strip.is-cards-mode {
  grid-template-columns: repeat(auto-fill, minmax(238px, 238px)) !important;
  justify-content: start !important;
}

#authorProfileModal .author-profile-library-strip.is-list-mode {
  grid-template-columns: 1fr !important;
}

#authorProfileModal .author-profile-library-pack,
#authorProfileModal .author-profile-library-pack.is-current,
#authorProfileModal .author-profile-library-pack[aria-pressed="true"] {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 66px !important;
  width: 100% !important;
  padding: 10px 11px !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: var(--surface-raised) !important;
  box-shadow: none !important;
  filter: none !important;
}

#authorProfileModal .author-profile-library-strip.is-list-mode .author-profile-library-pack {
  min-height: 62px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

#authorProfileModal .author-profile-library-pack:hover,
#authorProfileModal .author-profile-library-pack:focus-visible {
  border-color: var(--line) !important;
  box-shadow: none !important;
  filter: none !important;
}

#authorProfileModal .author-profile-folder-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
}

#authorProfileModal .author-profile-library-pack-copy {
  gap: 4px !important;
  min-width: 0 !important;
}

#authorProfileModal .author-profile-library-pack-title {
  font-size: 12.5px !important;
  line-height: 1.15 !important;
}

#authorProfileModal .author-profile-library-pack .shared-pack-badge {
  width: auto !important;
  max-width: 100% !important;
  min-height: 22px !important;
  justify-self: start !important;
  padding: 4px 9px !important;
  border-radius: 7px !important;
  line-height: 1 !important;
}

#authorProfileModal .author-profile-meta-line {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#authorProfileModal .author-profile-meta-dot {
  display: inline !important;
}

#authorProfileModal .author-profile-pack-list {
  flex: 0 0 auto !important;
  max-height: none !important;
  margin: 0 24px 18px !important;
  padding: 14px 0 0 !important;
  overflow: visible !important;
  border-top: 1px solid var(--line) !important;
}

#authorProfileModal .author-profile-pack-item {
  padding: 14px 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--surface-elevated) !important;
  box-shadow: none !important;
  filter: none !important;
}

#authorProfileModal .author-profile-pack-item.is-current {
  border-color: var(--line) !important;
  background: var(--surface-elevated) !important;
  box-shadow: none !important;
  filter: none !important;
}

#authorProfileModal .author-profile-pack-head {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

#authorProfileModal .author-profile-selected-folder-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

#authorProfileModal .author-profile-pack-title {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

#authorProfileModal .author-profile-pack-date,
#authorProfileModal .author-profile-pack-sub .author-profile-meta-line {
  font-size: 11.5px !important;
}

#authorProfileModal .author-profile-pack-badges {
  max-width: 270px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}

#authorProfileModal .author-profile-pack-badges .shared-pack-badge {
  width: auto !important;
  min-height: 28px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#authorProfileModal .author-profile-pack-actions {
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

#authorProfileModal .author-profile-pack-actions .btn-secondary,
#authorProfileModal .author-profile-pack-actions .btn-primary {
  min-width: 116px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
}

@media (max-width: 760px) {
  #authorProfileModal:not([hidden]) {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    background: var(--surface-elevated, #ffffff) !important;
  }

  #authorProfileModal .author-profile-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
  }

  #authorProfileModal .author-profile-top,
  #authorProfileModal .author-profile-bio,
  #authorProfileModal .author-profile-actions,
  #authorProfileModal .author-profile-stats,
  #authorProfileModal .author-profile-pack-list {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  #authorProfileModal .author-profile-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 14px 8px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  #authorProfileModal .author-profile-hero {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  #authorProfileModal .author-profile-avatar {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }

  #authorProfileModal .author-profile-hero .study-set-kicker {
    margin-bottom: 2px !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    line-height: 1.1 !important;
  }

  #authorProfileModal #authorProfileName {
    overflow: hidden !important;
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.02 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #authorProfileModal .author-profile-actions {
    margin: 0 !important;
  }

  #authorProfileModal #closeAuthorProfileBtn,
  #authorProfileModal .author-profile-actions button {
    min-width: 74px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  #authorProfileModal .author-profile-bio {
    min-height: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #authorProfileModal .author-profile-bio::before {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
    border-radius: 7px 7px 7px 3px !important;
  }

  #authorProfileModal .author-profile-stats {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
  }

  #authorProfileModal .author-profile-library-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  #authorProfileModal .author-profile-library-head > div:first-child {
    min-width: 0 !important;
  }

  #authorProfileModal .author-profile-library-kicker {
    font-size: 9px !important;
    letter-spacing: .13em !important;
    line-height: 1.1 !important;
  }

  #authorProfileModal .author-profile-library-controls {
    display: inline-grid !important;
    grid-template-columns: 38px 38px !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
  }

  #authorProfileModal .author-profile-library-title {
    margin-top: 4px !important;
    gap: 6px !important;
    font-size: 13px !important;
  }

  #authorProfileModal .author-profile-count-folder-icon {
    width: 24px !important;
    height: 24px !important;
  }

  #authorProfileModal .author-profile-control-group {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    justify-content: center !important;
  }

  #authorProfileModal .author-profile-control-group button,
  #authorProfileModal .author-profile-view-toggle button,
  #authorProfileModal .author-profile-sort-menu-btn {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 11px !important;
  }

  #authorProfileModal .author-profile-sort-menu {
    right: -2px !important;
    max-width: min(220px, calc(100vw - 40px)) !important;
    max-height: min(260px, calc(100dvh - 180px)) !important;
    overflow-y: auto !important;
  }

  #authorProfileModal .author-profile-library-strip.is-cards-mode {
    grid-template-columns: 1fr !important;
  }

  #authorProfileModal .author-profile-library-strip {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    margin-top: 7px !important;
    gap: 6px !important;
    padding: 1px 3px 2px 1px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  #authorProfileModal .author-profile-library-pack,
  #authorProfileModal .author-profile-library-pack.is-current,
  #authorProfileModal .author-profile-library-pack[aria-pressed="true"],
  #authorProfileModal .author-profile-library-strip.is-list-mode .author-profile-library-pack {
    min-height: 46px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
  }

  #authorProfileModal .author-profile-folder-icon {
    width: 25px !important;
    height: 25px !important;
    border-radius: 8px !important;
  }

  #authorProfileModal .author-profile-library-pack-title {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  #authorProfileModal .author-profile-library-pack .shared-pack-badge {
    min-height: 18px !important;
    padding: 2px 7px !important;
    border-radius: 7px !important;
    font-size: 10.5px !important;
  }

  #authorProfileModal .author-profile-pack-list {
    align-self: end !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    padding: 8px 0 0 !important;
    overflow: visible !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  #authorProfileModal .author-profile-pack-head {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 7px !important;
  }

  #authorProfileModal .author-profile-pack-item {
    padding: 9px 10px !important;
    border-radius: 11px !important;
  }

  #authorProfileModal .author-profile-selected-folder-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }

  #authorProfileModal .author-profile-pack-title {
    font-size: 14px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #authorProfileModal .author-profile-pack-badges {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    max-width: none !important;
    gap: 5px !important;
    margin-top: 5px !important;
  }

  #authorProfileModal .author-profile-pack-badges .shared-pack-badge {
    min-height: 22px !important;
    padding: 4px 7px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }

  #authorProfileModal .author-profile-pack-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  #authorProfileModal .author-profile-pack-actions .btn-secondary,
  #authorProfileModal .author-profile-pack-actions .btn-primary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding-inline: 6px !important;
    font-size: 11.5px !important;
  }
}

/* Creator profile compact edit surface */
#userProfileModal .current-user-profile-card.current-user-profile-modern {
  height: auto !important;
  max-height: min(820px, calc(100dvh - 24px)) !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-content {
  padding: 0 22px 16px !important;
}

#userProfileModal .current-user-profile-edit {
  display: inline-flex !important;
}

#userProfileModal .current-user-section-edit,
#userProfileModal .current-user-profile-save,
#userProfileModal .current-user-profile-cancel,
#userProfileModal .current-user-profile-footer-actions {
  display: none !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-section {
  margin-bottom: 12px !important;
  padding: 16px 18px !important;
}

#userProfileModal .current-user-profile-modern .current-user-profile-section-head {
  margin-bottom: 10px !important;
}

#userProfileModal .current-user-profile-modern .current-user-about-section .field {
  position: relative !important;
}

#userProfileModal .current-user-profile-modern #currentUserProfileBio {
  min-height: 36px !important;
  max-height: none !important;
  height: auto;
  padding: 8px 0 !important;
  overflow: hidden !important;
  resize: none !important;
  scrollbar-width: none !important;
  line-height: 1.45 !important;
  transition: height 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

#userProfileModal .current-user-profile-modern #currentUserProfileBio::-webkit-scrollbar {
  display: none !important;
}

#userProfileModal:not(.is-profile-editing) .current-user-profile-modern #currentUserProfileBio {
  min-height: 22px !important;
  padding: 0 !important;
}

#userProfileModal .current-user-profile-modern .profile-bio-decor {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: auto !important;
  width: 100% !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

#userProfileModal .current-user-profile-modern .profile-emoji-picker {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: auto !important;
  max-width: none !important;
  pointer-events: auto !important;
}

#userProfileModal .current-user-profile-modern .profile-emoji-picker summary {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 20px !important;
  line-height: 1 !important;
  list-style: none !important;
}

#userProfileModal .current-user-profile-modern .profile-emoji-picker summary::-webkit-details-marker {
  display: none !important;
}

#userProfileModal .current-user-profile-modern .profile-emoji-picker summary::before,
#userProfileModal .current-user-profile-modern .profile-emoji-picker summary::after {
  display: none !important;
}

#userProfileModal .current-user-profile-modern .profile-emoji-grid {
  display: none !important;
}

#userProfileModal .current-user-profile-modern .profile-emoji-picker[open] .profile-emoji-grid {
  position: static !important;
  width: auto !important;
  max-width: calc(100% - 38px) !important;
  max-height: none !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#userProfileModal .current-user-profile-modern .profile-emoji-grid button {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

#userProfileModal .current-user-profile-modern .current-user-avatar-grid {
  grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-options {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
  gap: 8px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option {
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px 6px !important;
  text-align: center !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-choice {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-choice img {
  width: 44px !important;
  height: 44px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option-meta {
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 2px !important;
  text-align: center !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option-meta span,
#userProfileModal .current-user-profile-modern .profile-avatar-option-meta small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload summary {
  min-height: 86px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px !important;
  text-align: center !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload-icon {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload-body {
  display: none !important;
}

@media (max-width: 820px) {
#userProfileModal .current-user-profile-modern .current-user-avatar-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final profile and Drive library polish.
   Keep this after older experiments so modal rows and profile tiles stay stable. */
#userProfileModal:not(.is-profile-editing) .current-user-profile-modern .profile-bio-decor {
  display: none !important;
}

#userProfileModal .current-user-profile-modern .profile-bio-decor {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  margin-top: 2px !important;
}

#userProfileModal .current-user-profile-modern .current-user-avatar-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

#userProfileModal .current-user-profile-modern .current-user-avatar-grid > .field:first-child {
  flex: 0 1 auto !important;
  display: contents !important;
}

#userProfileModal .current-user-profile-modern .current-user-avatar-grid > .field:first-child > label {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 0 2px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-options {
  display: flex !important;
  width: auto !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-option,
#userProfileModal .current-user-profile-modern .profile-avatar-upload summary {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  min-height: 104px !important;
  padding: 9px 7px !important;
  border-radius: 12px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload-field {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload-field > label {
  display: none !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload {
  width: 92px !important;
  margin: 0 !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-choice {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-choice img {
  width: 42px !important;
  height: 42px !important;
}

#userProfileModal .current-user-profile-modern .profile-avatar-upload-icon {
  width: 32px !important;
  height: 32px !important;
}

#authorProfileModal .author-profile-library-strip {
  align-items: start !important;
}

#authorProfileModal .author-profile-library-strip.is-cards-mode {
  grid-template-columns: repeat(auto-fill, minmax(238px, 238px)) !important;
}

#authorProfileModal .author-profile-library-pack,
#authorProfileModal .author-profile-library-pack.is-current,
#authorProfileModal .author-profile-library-pack[aria-pressed="true"] {
  min-height: 92px !important;
  height: 92px !important;
  align-content: center !important;
  overflow: hidden !important;
}

#authorProfileModal .author-profile-library-strip.is-list-mode .author-profile-library-pack {
  min-height: 92px !important;
  height: 92px !important;
}

#authorProfileModal .author-profile-library-pack .shared-pack-badge {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
}

/* Final proportional page-density repair for reduced Quiz/New/Save workspaces. */
#tab-quiz,
#tab-import,
#tab-export {
  --workspace-compact-gap: 10px;
  --workspace-compact-radius: 13px;
}

#tab-quiz .quiz-options {
  padding: 16px !important;
  margin-bottom: 10px !important;
}

#tab-quiz .quiz-options > summary {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#tab-quiz .group-filter-grid {
  gap: 13px !important;
}

#tab-quiz .quiz-include-card {
  min-height: 70px !important;
  padding: 10px 12px !important;
}

#tab-quiz .quiz-group-preview-panel {
  min-height: 190px !important;
  padding: 13px 15px !important;
}

#tab-quiz .group-filter-summary {
  min-height: 36px !important;
  margin-top: 11px !important;
  padding-block: 8px !important;
}

#tab-quiz .quiz-setup-actions {
  margin-top: 10px !important;
  padding: 14px 16px !important;
}

#tab-import .import-start-stack {
  gap: var(--workspace-compact-gap) !important;
}

#tab-import .import-start-stack .import-action-card {
  min-height: 168px !important;
  padding: 13px !important;
  gap: 8px !important;
  border-radius: var(--workspace-compact-radius) !important;
}

#tab-import .import-start-stack .import-action-card .action-fold-static-head,
#tab-import #newLibraryCard .action-fold-body::before {
  min-height: 38px !important;
}

#tab-import .import-start-stack .import-action-card .action-fold-body {
  grid-template-rows: minmax(32px, 1fr) auto minmax(0, auto) !important;
  gap: 7px !important;
}

#tab-import .import-card-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
}

#tab-import .import-card-icon svg,
#tab-import .import-card-icon-drive svg {
  width: 17px !important;
  height: 17px !important;
}

#tab-import .import-card-primary,
#tab-import .import-file-choose {
  min-height: 32px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  gap: 6px !important;
}

#tab-import .import-device-actions {
  gap: 7px !important;
}

#tab-import .import-drop-zone,
#tab-import .drive-link-pill {
  min-height: 44px !important;
  border-radius: 10px !important;
}

#tab-import .import-drop-zone {
  padding: 7px 9px !important;
  gap: 7px !important;
}

#tab-import .drive-link-pill {
  grid-template-columns: 13px minmax(0, 1fr) 27px !important;
  gap: 7px !important;
  padding: 3px 4px 3px 9px !important;
}

#tab-import .import-drop-icon,
#tab-import .drive-link-arrow {
  width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  border-radius: 8px !important;
}

#tab-import .import-drop-copy strong {
  font-size: 11.5px !important;
}

#tab-import .import-drop-copy small,
#tab-import .drive-link-pill input {
  font-size: 11px !important;
}

#tab-import .import-card-footnote,
#tab-import .import-card-points-compact {
  min-height: 0 !important;
}

#tab-import .import-or-divider {
  margin: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline {
  margin-top: 10px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-controls-panel {
  padding: 12px !important;
  border-radius: var(--workspace-compact-radius) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-result {
  padding: 13px 14px !important;
  border-radius: 11px !important;
  padding-right: 52px !important;
  overflow: visible !important;
  position: relative !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-footer {
  grid-template-columns: minmax(82px, 1fr) minmax(92px, auto) minmax(188px, auto) !important;
  gap: 8px !important;
  align-items: center !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-social-row {
  flex-wrap: nowrap !important;
  gap: 5px !important;
  justify-content: center !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-thumbs-btn {
  min-width: 44px !important;
  min-height: 31px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-actions .btn-primary,
#sharedPackBrowseCard.shared-library-inline .shared-pack-actions .btn-secondary {
  min-width: 78px !important;
  min-height: 31px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-actions .shared-pack-pin-btn {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  border-radius: 7px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 12;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger {
  width: 22px;
  min-width: 22px;
  height: 32px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text, #0f172a) 86%, var(--muted, #64748b));
  box-shadow: none;
  cursor: pointer;
  transition: color .16s ease, opacity .16s ease;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger svg {
  width: 18px;
  height: 22px;
  display: block;
  fill: currentColor;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger:hover,
#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger:focus-visible,
#sharedPackBrowseCard.shared-library-inline .shared-pack-result.is-card-menu-open .shared-pack-card-menu-trigger {
  background: transparent;
  border-color: transparent;
  color: var(--text, #0f172a);
  box-shadow: none;
  outline: none;
  opacity: .82;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger:active {
  transform: none;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-panel {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  min-width: 166px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, rgba(148, 163, 184, 0.45)) 82%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--accent-soft, #dbeafe));
  color: var(--text, #0f172a);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  transform: translateY(-18%);
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-panel[hidden] {
  display: none !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-panel button {
  min-height: 34px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-panel button:hover,
#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-panel button:focus-visible {
  background: color-mix(in srgb, var(--accent-soft, #dbeafe) 58%, transparent);
  color: var(--accent-strong, #2563eb);
  outline: none;
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger {
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--text, #f8fafc) 82%, var(--muted, #94a3b8));
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-panel {
  background: color-mix(in srgb, var(--panel, #111827) 94%, var(--accent-soft, #1d4ed8));
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.38);
}

@media (max-width: 760px) {
#sharedPackBrowseCard.shared-library-inline .shared-pack-result {
    padding-right: 46px !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu {
    top: 10px;
    right: 10px;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-panel {
    top: calc(100% + 7px);
    right: 0;
    transform: none;
  }
}

#tab-export .save-share-stack,
#tab-export .drive-export-grid {
  gap: var(--workspace-compact-gap) !important;
}

#tab-export .save-action-card {
  min-height: 68px !important;
  grid-template-columns: 30px 1fr auto !important;
  padding: 10px 12px !important;
  gap: 9px !important;
  border-radius: var(--workspace-compact-radius) !important;
}

#tab-export .save-action-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}

#tab-export .save-action-card button {
  min-height: 31px !important;
  padding-inline: 10px !important;
  font-size: 11.5px !important;
}

#tab-export .share-students-card {
  margin-top: 11px !important;
  border-radius: var(--workspace-compact-radius) !important;
}

#tab-export .share-students-head {
  padding: 11px 13px !important;
}

#tab-export .share-profile-details {
  margin: 9px 13px 0 !important;
}

#tab-export .shared-pack-publish-body {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 41%) !important;
  gap: 12px !important;
  margin: 9px 13px 0 !important;
}

#tab-export #driveExportCard .shared-pack-compact-form {
  gap: 6px 7px !important;
  padding: 8px !important;
}

#tab-export #driveExportCard .shared-pack-compact-form input,
#tab-export #driveExportCard .shared-pack-compact-form select,
#tab-export #driveExportCard .shared-pack-compact-form textarea,
#tab-export #driveExportCard .shared-pack-compact-form .semester-prefix-input {
  min-height: 28px !important;
  font-size: 11px !important;
}

#tab-export #driveExportCard .shared-pack-compact-form textarea {
  min-height: 46px !important;
}

#tab-export .shared-pack-preview-card {
  gap: 5px !important;
  padding: 10px !important;
  border-radius: 10px !important;
}

#tab-export .shared-pack-preview-result {
  min-height: 148px !important;
  padding: 9px 10px !important;
  gap: 5px !important;
  grid-template-rows: auto auto auto minmax(22px, 1fr) auto auto !important;
}

#tab-export .shared-pack-preview-author {
  gap: 4px !important;
  font-size: 10.5px !important;
}

#tab-export .shared-pack-preview-card h4 {
  font-size: 12.8px !important;
  line-height: 1.15 !important;
}

#tab-export .shared-pack-preview-card p {
  font-size: 10.4px !important;
  line-height: 1.34 !important;
}

#tab-export .shared-pack-preview-badges,
#tab-export .shared-pack-preview-tags {
  gap: 4px !important;
}

#tab-export .shared-pack-preview-card .shared-pack-badge,
#tab-export .shared-pack-preview-card .shared-pack-tag {
  min-height: 18px !important;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  font-size: 9.5px !important;
}

#tab-export .shared-pack-preview-footer {
  grid-template-columns: minmax(58px, .7fr) minmax(90px, auto) minmax(190px, auto) !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 3px !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-date-line {
  min-width: 0 !important;
  font-size: 9.6px !important;
  white-space: nowrap !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-social-row {
  flex-wrap: nowrap !important;
  gap: 4px !important;
  justify-content: center !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-thumbs-btn {
  min-width: 40px !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-like-icon {
  font-size: 12px !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-actions {
  display: grid !important;
  grid-template-columns: 76px 82px 28px !important;
  gap: 4px !important;
  justify-content: end !important;
  min-width: 0 !important;
  width: 100% !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-actions .btn-primary,
#tab-export .shared-pack-preview-footer .shared-pack-actions .btn-secondary {
  min-height: 28px !important;
  height: 28px !important;
  padding-inline: 6px !important;
  border-radius: 6px !important;
  font-size: 9.6px !important;
  gap: 4px !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-actions .btn-secondary::after,
#tab-export .shared-pack-preview-footer .shared-pack-actions .btn-primary::before {
  width: 12px !important;
  height: 12px !important;
  flex-basis: 12px !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-actions .shared-pack-pin-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
}

#tab-export .shared-pack-preview-footer .shared-pack-actions .shared-pack-pin-btn .shared-pack-pin-icon {
  width: 14px !important;
  height: 14px !important;
}

#tab-export .shared-pack-preview-help {
  margin-top: 8px !important;
  padding: 7px 8px !important;
}

#tab-export .drive-share-action-stack-bottom {
  margin-top: 10px !important;
  padding: 9px 13px !important;
}

@media (max-width: 1180px) {
#tab-export .shared-pack-publish-body,
  #sharedPackBrowseCard.shared-library-inline .shared-pack-footer {
    grid-template-columns: 1fr !important;
  }

  #tab-export .shared-pack-preview-footer {
    grid-template-columns: 1fr !important;
  }

  #tab-export .shared-pack-preview-footer .shared-pack-social-row,
  #tab-export .shared-pack-preview-footer .shared-pack-actions,
  #sharedPackBrowseCard.shared-library-inline .shared-pack-social-row,
  #sharedPackBrowseCard.shared-library-inline .shared-pack-actions {
    justify-content: flex-start !important;
  }
}

/* Real modal size reductions: profile 20%, author profile 10%, Drive libraries 10%. */
@media (min-width: 761px) {
  #userProfileModal .current-user-profile-card.current-user-profile-modern {
    width: min(688px, calc(100vw - 24px)) !important;
    max-width: min(688px, calc(100vw - 24px)) !important;
    max-height: min(656px, calc(100dvh - 24px)) !important;
  }

  #userProfileModal .current-user-profile-modern .current-user-profile-top {
    gap: 13px !important;
    padding: 16px 19px 8px !important;
  }

  #userProfileModal .current-user-profile-modern .current-user-profile-content {
    padding: 0 18px 13px !important;
  }

  #userProfileModal .current-user-avatar-frame {
    width: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
  }

  #userProfileModal .current-user-profile-modern .current-user-main-avatar {
    width: 82px !important;
    height: 82px !important;
    flex-basis: 82px !important;
  }

  #userProfileModal .current-user-profile-title h2 {
    font-size: clamp(24px, 2.8vw, 29px) !important;
  }

  #userProfileModal .current-user-profile-modern .current-user-profile-header-actions button {
    min-width: 96px !important;
    min-height: 32px !important;
    padding-inline: 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  #userProfileModal .current-user-profile-modern .current-user-profile-section {
    margin-bottom: 10px !important;
    padding: 13px 14px !important;
    border-radius: 11px !important;
  }

  #userProfileModal .current-user-profile-section-head {
    margin-bottom: 8px !important;
  }

  #userProfileModal .current-user-profile-section-title h3 {
    font-size: 14px !important;
  }

  #userProfileModal .current-user-profile-modern #currentUserProfileBio {
    min-height: 34px !important;
    max-height: none !important;
    padding: 7px 0 !important;
  }

  #userProfileModal .current-user-profile-modern .current-user-academic-grid,
  #userProfileModal .current-user-profile-modern .current-user-support-grid {
    gap: 10px !important;
  }

  #userProfileModal .current-user-profile-modern .profile-avatar-option,
  #userProfileModal .current-user-profile-modern .profile-avatar-upload summary {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    min-height: 84px !important;
    padding: 7px 6px !important;
    border-radius: 10px !important;
  }

  #userProfileModal .current-user-profile-modern .profile-avatar-choice {
    width: 37px !important;
    height: 37px !important;
    flex-basis: 37px !important;
  }

  #userProfileModal .current-user-profile-modern .profile-avatar-choice img {
    width: 34px !important;
    height: 34px !important;
  }

  #userProfileModal .current-user-profile-modern .profile-avatar-upload {
    width: 74px !important;
  }

  #userProfileModal .current-user-profile-modern .profile-avatar-upload-icon {
    width: 26px !important;
    height: 26px !important;
  }

  #authorProfileModal .author-profile-card {
    width: min(864px, calc(100vw - 36px)) !important;
    max-width: min(864px, calc(100vw - 36px)) !important;
    max-height: min(810px, calc(100dvh - 36px)) !important;
  }

  #authorProfileModal .author-profile-top {
    gap: 13px !important;
    padding: 16px 22px 9px !important;
  }

  #authorProfileModal .author-profile-avatar {
    width: 72px !important;
    height: 72px !important;
  }

  #authorProfileModal #authorProfileName {
    font-size: clamp(30px, 3.2vw, 42px) !important;
  }

  #authorProfileModal .author-profile-bio,
  #authorProfileModal .author-profile-actions,
  #authorProfileModal .author-profile-stats {
    margin-left: 22px !important;
    margin-right: 22px !important;
  }

  #authorProfileModal .author-profile-bio {
    padding: 10px 14px !important;
    min-height: 48px !important;
  }

  #authorProfileModal .author-profile-stats {
    padding: 13px 0 14px !important;
  }

  #authorProfileModal .author-profile-library-head {
    gap: 12px !important;
    padding-top: 13px !important;
  }

  #authorProfileModal .author-profile-library-strip {
    max-height: min(245px, 34dvh) !important;
    margin-top: 10px !important;
    gap: 9px !important;
  }

  #authorProfileModal .author-profile-library-strip.is-cards-mode {
    grid-template-columns: repeat(auto-fill, minmax(214px, 214px)) !important;
  }

  #authorProfileModal .author-profile-library-pack,
  #authorProfileModal .author-profile-library-pack.is-current,
  #authorProfileModal .author-profile-library-pack[aria-pressed="true"],
  #authorProfileModal .author-profile-library-strip.is-list-mode .author-profile-library-pack {
    min-height: 83px !important;
    height: 83px !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 9px 10px !important;
  }

  #authorProfileModal .author-profile-library-pack-icon {
    width: 30px !important;
    height: 30px !important;
  }

  #authorProfileModal .author-profile-pack-list {
    margin: 0 22px 16px !important;
    padding-top: 24px !important;
  }

  #authorProfileModal .author-profile-pack-item {
    padding: 13px 14px !important;
  }
}







/* Quiz icon correction: keep the injected study icon from collapsing into speaker-like bars. */
#tab-quiz .quiz-action-button .quiz-button-icon-study {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.85 !important;
}

#tab-quiz .quiz-action-button .quiz-button-icon-study path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#tab-quiz .quiz-panel-icon-rocket .quiz-rocket-icon {
  width: 23px !important;
  height: 23px !important;
  overflow: visible !important;
}

#tab-quiz .quiz-panel-icon-rocket .quiz-rocket-icon path,
#tab-quiz .quiz-panel-icon-rocket .quiz-rocket-icon circle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.95 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
  box-shadow: none !important;
}







/* Shared library import panel */
#sharedPackBrowseCard.shared-library-inline {
  margin-top: 18px !important;
  --shared-library-panel-bg: color-mix(in srgb, var(--surface-elevated, #ffffff) 96%, var(--accent-soft, transparent) 4%);
  --shared-library-panel-border: color-mix(in srgb, var(--line, #d9dee8) 82%, var(--text, #111827) 18%);
  --shared-library-panel-divider: color-mix(in srgb, var(--line, #d9dee8) 78%, transparent);
  --shared-library-field-bg: var(--input-bg-strong, var(--surface-elevated, #ffffff));
  --shared-library-field-border: color-mix(in srgb, var(--line, #d9dee8) 84%, var(--text, #111827) 16%);
  --shared-library-button-bg: var(--surface-elevated, #ffffff);
  --shared-library-muted-bg: color-mix(in srgb, var(--surface-elevated, #ffffff) 86%, var(--surface-muted, #f4f6fb) 14%);
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline {
  --shared-library-panel-bg: color-mix(in srgb, var(--surface-elevated, #121c2f) 92%, var(--panel, #0a1221) 8%);
  --shared-library-panel-border: color-mix(in srgb, var(--line, #334155) 78%, var(--accent, #60a5fa) 22%);
  --shared-library-panel-divider: color-mix(in srgb, var(--line, #334155) 72%, transparent);
  --shared-library-field-bg: color-mix(in srgb, var(--input-bg-strong, #0a1222) 90%, var(--panel, #0a1221) 10%);
  --shared-library-field-border: color-mix(in srgb, var(--line, #334155) 78%, var(--accent, #60a5fa) 22%);
  --shared-library-button-bg: color-mix(in srgb, var(--surface-elevated, #121c2f) 90%, var(--panel, #0a1221) 10%);
  --shared-library-muted-bg: color-mix(in srgb, var(--surface-muted, #0c1321) 78%, var(--surface-elevated, #121c2f) 22%);
}

#sharedPackBrowseCard.shared-library-inline .shared-library-controls {
  margin: 0 0 22px !important;
  padding: 26px 30px 30px !important;
  border: 1px solid var(--shared-library-panel-border) !important;
  border-radius: 16px !important;
  background: var(--shared-library-panel-bg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-controls-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 0 0 22px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--shared-library-panel-divider) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-title-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  min-width: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-title-icon {
  width: 44px !important;
  height: 44px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: color-mix(in srgb, var(--text, #111827) 88%, var(--accent, #3182f6) 12%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-title-icon svg {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-title-wrap .action-fold-title {
  font-size: clamp(25px, 2.15vw, 32px) !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--text, #111827) !important;
  text-transform: none !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-tool-btn.shared-library-refresh-btn {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  border: 1px solid var(--shared-library-field-border) !important;
  background: var(--shared-library-button-bg) !important;
  color: var(--text, #111827) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-tool-btn.shared-library-reset-btn {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: 1px solid var(--shared-library-field-border) !important;
  background: var(--shared-library-muted-bg) !important;
  color: var(--text, #111827) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-tool-btn.shared-library-reset-btn:hover,
#sharedPackBrowseCard.shared-library-inline .shared-library-tool-btn.shared-library-reset-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #3182f6) 32%, var(--line, #d9dee8) 68%) !important;
  background: color-mix(in srgb, var(--accent-soft, #edf5ff) 44%, var(--shared-library-button-bg) 56%) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-tool-btn.shared-library-refresh-btn svg {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 auto !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-status-row.shared-pack-status-row-solo {
  margin: 22px 0 22px !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackCatalogStatus {
  color: #12845d !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 620 !important;
  margin: 0 !important;
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline #sharedPackCatalogStatus {
  color: color-mix(in srgb, #5ee6a0 86%, var(--text, #e5edf7) 14%) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)) !important;
  gap: 18px 18px !important;
  align-items: end !important;
  margin: 0 !important;
  max-width: 100% !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field label {
  margin: 0 !important;
  color: var(--text, #111827) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field input,
#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field select {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 10px !important;
  border: 1px solid var(--shared-library-field-border) !important;
  background-color: var(--shared-library-field-bg) !important;
  box-shadow: none !important;
  color: var(--text, #111827) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
  color-scheme: light !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field input:focus,
#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field select:focus,
#sharedPackBrowseCard.shared-library-inline .shared-library-tool-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #3182f6) 52%, var(--shared-library-field-border) 48%) !important;
  outline: 3px solid color-mix(in srgb, var(--accent, #3182f6) 16%, transparent) !important;
  outline-offset: 2px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-tool-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #3182f6) 34%, var(--shared-library-field-border) 66%) !important;
  background: color-mix(in srgb, var(--accent-soft, #edf5ff) 22%, var(--shared-library-button-bg) 78%) !important;
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field input,
html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field select {
  color-scheme: dark !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field input {
  padding: 0 18px !important;
  text-overflow: ellipsis !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field select {
  padding: 0 42px 0 18px !important;
  text-overflow: ellipsis !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-search-field {
  position: relative !important;
  grid-column: span 2 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field.shared-library-search-field input {
  padding: 0 18px 0 56px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-search-icon {
  position: absolute !important;
  left: 18px !important;
  bottom: 16px !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--muted, #64748b) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-search-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-library-search-icon svg circle,
#sharedPackBrowseCard.shared-library-inline .shared-library-search-icon svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (max-width: 1220px) {
#sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-library-search-field {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
#sharedPackBrowseCard.shared-library-inline .shared-library-controls {
    padding: 20px !important;
    border-radius: 14px !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-library-controls-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding-bottom: 20px !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-library-title-wrap {
    align-items: center !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-library-toolbar {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: stretch !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-library-tool-btn {
    flex: 1 1 180px !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-library-search-field {
    grid-column: auto !important;
  }
}

/* Settings panel: two-column preference shell */
#settingsModal .settings-card.settings-shell {
  width: min(1080px, calc(100vw - 40px));
  height: min(760px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  padding: 0 !important;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  box-shadow: var(--shadow, 0 24px 64px rgba(15, 23, 42, 0.18)) !important;
  overflow: hidden;
  background: var(--surface-elevated, #fff);
  display: grid;
  grid-template-rows: auto 1fr;
}

#settingsModal .settings-shell-header {
  min-height: 88px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  background: var(--surface-elevated, #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#settingsModal .settings-shell-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#settingsModal .settings-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  border-radius: 12px;
  background: var(--surface-elevated, #fff);
  color: var(--text, #0f172a);
  box-shadow: none;
  align-items: center;
  justify-content: center;
}

#settingsModal .settings-nav-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

#settingsModal .settings-brand {
  display: inline-flex;
  margin: 0 0 7px;
  padding: 4px 10px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  border-radius: 999px;
  background: var(--accent-soft, rgba(37, 99, 235, 0.08));
  color: var(--accent-strong, var(--accent, #2563eb));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#settingsModal #settingsTitle {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 780;
  color: var(--text, #0f172a);
}

#settingsModal .settings-shell-close {
  width: auto;
  min-width: 112px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  border-radius: 12px;
  background: var(--surface-elevated, #fff);
  color: var(--text, #0f172a);
  box-shadow: 0 8px 18px var(--accent-shadow-soft, rgba(15, 23, 42, 0.06));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  white-space: nowrap;
}

#settingsModal .settings-shell-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 104px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  border-radius: 12px;
  background: var(--surface-elevated, #fff);
  color: var(--text, #0f172a);
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
}

.modal-close span[aria-hidden="true"] {
  font-size: 20px;
  line-height: 1;
}

#settingsModal .settings-layout {
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
}

#settingsModal .settings-nav-scrim {
  display: none;
}

#settingsModal .settings-sidebar {
  min-height: 0;
  border-right: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  background: color-mix(in srgb, var(--surface-muted, #f8fafc) 70%, var(--surface-elevated, #fff) 30%);
  display: flex;
  flex-direction: column;
}

#settingsModal .settings-nav-main {
  padding: 12px;
  display: grid;
  gap: 4px;
}

#settingsModal .settings-nav-item {
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #0f172a);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 720;
  text-align: left;
  cursor: pointer;
}

#settingsModal .settings-nav-item.is-active {
  border-color: var(--theme-control-selected-border, var(--line, #d8e0ee));
  background: var(--theme-control-selected-bg, color-mix(in srgb, var(--accent, #2563eb) 10%, transparent));
  color: var(--theme-ui-selected-text, var(--accent-strong, var(--accent, #2563eb)));
}

#settingsModal .settings-nav-item svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#settingsModal .settings-nav-chevron {
  margin-left: auto;
  width: 17px !important;
  height: 17px !important;
}

#settingsModal .settings-sidebar-footer {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  color: var(--muted, #64748b);
}

#settingsModal .settings-version {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

#settingsModal .settings-help-link {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

#settingsModal .settings-help-link svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

#settingsModal .settings-content {
  min-width: 0;
  min-height: 0;
  padding: 30px 32px;
  overflow: auto;
}

#settingsModal .settings-pane[hidden] {
  display: none !important;
}

#settingsModal .settings-pane-title {
  margin: 0 0 22px;
  color: var(--accent, #2563eb);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#settingsModal .settings-control-row {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#settingsModal .settings-list .settings-control-row {
  padding: 22px 0;
}

#settingsModal .settings-list .settings-control-row:first-child {
  padding-top: 0;
}

#settingsModal .settings-item-title {
  color: var(--text, #0f172a);
  font-size: 16px;
  font-weight: 750;
}

#settingsModal .settings-item-meta {
  margin-top: 5px;
  color: var(--muted, #64748b);
  font-size: 14px;
}

#settingsModal .settings-control-block {
  padding-top: 24px;
}

#settingsModal .settings-theme-palette {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#settingsModal .settings-theme-swatch {
  --swatch-ring: var(--accent, #2563eb);
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  box-shadow: none;
  position: relative;
}

#settingsModal .settings-theme-swatch[data-theme-accent="blue"] {
  --swatch-ring: #60a5fa;
  background: #93c5fd;
}

#settingsModal .settings-theme-swatch[data-theme-accent="green"] {
  --swatch-ring: #22c55e;
  background: #86efac;
}

#settingsModal .settings-theme-swatch[data-theme-accent="amber"] {
  --swatch-ring: #f97316;
  background: #fdba74;
}

#settingsModal .settings-theme-swatch[data-theme-accent="yellow"] {
  --swatch-ring: #eab308;
  background: #fde68a;
}

#settingsModal .settings-theme-swatch[data-theme-accent="rose"] {
  --swatch-ring: #f43f5e;
  background: #fda4af;
}

#settingsModal .settings-theme-swatch[data-theme-accent="black"] {
  --swatch-ring: #111111;
  border-color: #111111;
  background: linear-gradient(135deg, #111111 0 48%, #ffffff 49% 100%);
}

#settingsModal .settings-theme-swatch[data-theme-accent="white"] {
  --swatch-ring: #94a3b8;
  border-color: #cbd5e1;
  background: #f8fafc;
}

#settingsModal .settings-theme-swatch:hover {
  border-color: var(--accent, #2563eb);
}

#settingsModal .settings-theme-swatch.active,
#settingsModal .settings-theme-swatch[aria-pressed="true"] {
  outline: 3px solid var(--swatch-ring);
  outline-offset: 2px;
}

#settingsModal .settings-theme-swatch.active::after,
#settingsModal .settings-theme-swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 13px 11px 14px 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}

#settingsModal .settings-theme-swatch[data-theme-accent="white"]::after {
  border-color: #111827;
}

#settingsModal .settings-library-heading {
  margin-bottom: 14px;
}

#settingsModal .settings-library-switcher {
  width: min(100%, 720px);
  padding: 4px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  border-radius: 12px;
  background: var(--surface-muted, #f4f6f8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

#settingsModal .settings-library-option {
  min-width: 0;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #0f172a);
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

#settingsModal .settings-library-option:hover,
#settingsModal .settings-library-option:focus-visible {
  background: var(--theme-ui-hover, color-mix(in srgb, var(--accent) 7%, transparent));
  border-color: var(--line);
}

#settingsModal .settings-library-option.is-active {
  background: var(--surface-elevated, #fff);
  border-color: var(--theme-control-selected-border, var(--accent));
  box-shadow: 0 1px 3px var(--accent-shadow-soft, rgba(15, 23, 42, 0.08));
}

#settingsModal .settings-library-option.is-loading {
  cursor: progress;
}

#settingsModal .settings-library-option-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#settingsModal .settings-library-option-copy strong {
  font-size: 15px;
  line-height: 1.15;
  font-weight: 760;
}

#settingsModal .settings-library-option-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted, #64748b);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsModal .settings-library-option-check {
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent, #2563eb);
  color: var(--study-text, #fff);
  font-size: 12px;
  font-weight: 900;
}

#settingsModal .settings-library-option.is-active .settings-library-option-check {
  display: grid;
}

#settingsModal .settings-library-current {
  width: min(100%, 720px);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

#settingsModal .settings-library-current span {
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 650;
}

#settingsModal .settings-library-current strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text, #0f172a);
  font-size: 14px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsModal .settings-library-description {
  width: min(100%, 720px);
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  border-radius: 10px;
  background: var(--surface-muted, #f8fafc);
  color: var(--text, #0f172a);
}

#settingsModal .settings-library-description strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 760;
}

#settingsModal .settings-library-description p {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

#settingsModal .settings-feedback-panel {
  display: grid;
  gap: 14px;
  min-height: 0;
  margin-top: 30px;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  border-radius: 0;
  background: transparent;
}

#settingsModal .settings-feedback-heading {
  margin-bottom: 4px;
}

#settingsModal .settings-feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#settingsModal .settings-feedback-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 800;
}

#settingsModal .settings-feedback-panel input,
#settingsModal .settings-feedback-panel textarea {
  width: 100%;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  border-radius: 10px;
  background: var(--input-bg-strong, var(--surface-elevated, #fff));
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 13px;
  padding: 10px 12px;
}

#settingsModal .settings-feedback-panel textarea {
  min-height: 90px;
  resize: vertical;
}

#settingsModal .settings-feedback-panel input:focus,
#settingsModal .settings-feedback-panel textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent, #2563eb) 42%, transparent);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--accent, #2563eb) 48%, var(--line, #d8e0ee));
}

#settingsModal .settings-feedback-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#settingsModal .feedback-send-btn {
  width: 44px;
  min-width: 44px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

#settingsModal .feedback-trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#settingsModal .feedback-status {
  min-height: 20px;
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 800;
}

#settingsModal .feedback-status[data-tone="busy"] {
  color: var(--accent-strong, var(--accent, #2563eb));
}

#settingsModal .feedback-status[data-tone="good"] {
  color: var(--success, #047857);
}

#settingsModal .feedback-status[data-tone="bad"] {
  color: var(--danger, #b91c1c);
}

@media (max-width: 920px) {
  #settingsModal .settings-card.settings-shell {
    width: min(100vw - 24px, 780px);
    height: min(100vh - 24px, 980px);
  }

  #settingsModal .settings-layout {
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
  }

  #settingsModal .settings-sidebar {
    border-right: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  }

  #settingsModal .settings-nav-main {
    padding: 10px;
    display: grid;
    gap: 4px;
  }

  #settingsModal .settings-nav-item {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    font-size: 14px;
  }

  #settingsModal .settings-content {
    padding: 24px 22px;
  }

  #settingsModal .settings-control-row {
    align-items: flex-start;
    flex-direction: column;
  }

  #settingsModal .settings-library-switcher,
  #settingsModal .settings-library-current,
  #settingsModal .settings-library-description {
    width: 100%;
  }
}

@media (max-width: 820px) {
  #settingsModal .settings-nav-toggle {
    display: inline-flex;
  }

  #settingsModal .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  #settingsModal .settings-sidebar {
    position: absolute;
    z-index: 3;
    inset: 0 auto 0 0;
    width: min(82vw, 300px);
    border-right: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    border-bottom: 0;
    background: var(--surface-elevated, #fff);
    box-shadow: 16px 0 38px var(--shadow-color, rgba(15, 23, 42, 0.18));
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  #settingsModal.settings-nav-open .settings-sidebar {
    transform: translateX(0);
  }

  #settingsModal .settings-nav-scrim {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(2, 6, 23, 0.52);
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  #settingsModal.settings-nav-open .settings-nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  #settingsModal .settings-nav-main {
    display: grid;
    gap: 4px;
    padding: 12px;
    overflow: visible;
  }

  #settingsModal .settings-nav-item {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    flex: none;
    padding: 0 13px;
    white-space: normal;
  }

  #settingsModal .settings-nav-chevron {
    display: block;
  }

  #settingsModal .settings-sidebar-footer {
    display: block;
  }

  #settingsModal .settings-feedback-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep the three New-page start actions on one professional baseline. */
@media (min-width: 721px) {
  #tab-import .import-start-stack > #newLibraryCard.import-action-card,
  #tab-import .import-start-stack > #restoreBackupCard.import-action-card,
  #tab-import .import-start-stack > #driveImportCard.import-action-card {
    grid-template-rows: auto minmax(58px, auto) 1fr !important;
    align-content: stretch !important;
  }

  #tab-import .import-start-stack > #newLibraryCard.import-action-card .action-fold-static-head,
  #tab-import .import-start-stack > #restoreBackupCard.import-action-card .action-fold-static-head,
  #tab-import .import-start-stack > #driveImportCard.import-action-card .action-fold-static-head {
    min-height: 58px !important;
    align-content: start !important;
  }

  #tab-import .import-start-stack > #newLibraryCard.import-action-card .action-fold-body,
  #tab-import .import-start-stack > #restoreBackupCard.import-action-card .action-fold-body,
  #tab-import .import-start-stack > #driveImportCard.import-action-card .action-fold-body {
    display: grid !important;
    grid-template-rows: 44px minmax(32px, auto) minmax(0, auto) !important;
    align-content: stretch !important;
    gap: 7px !important;
  }

  #tab-import #newLibraryCard .action-fold-body::before,
  #tab-import #restoreBackupCard .import-drop-zone,
  #tab-import #driveImportCard .drive-link-pill {
    min-height: 44px !important;
    height: 44px !important;
  }

  #tab-import #newLibraryBtn,
  #tab-import #restoreBackupCard .import-device-actions,
  #tab-import #googleDrivePickerBtn {
    grid-row: 2 !important;
    align-self: start !important;
  }
}

/* Theme calibration layer: shared chrome colors for every accent in light and dark mode. */
html[data-theme-accent] {
  --theme-ui-panel-bg: color-mix(in srgb, var(--surface-elevated) 95%, var(--accent) 5%);
  --theme-ui-menu-bg: color-mix(in srgb, var(--surface-elevated) 97%, var(--accent) 3%);
  --theme-ui-tint: color-mix(in srgb, var(--accent) 10%, var(--surface-elevated) 90%);
  --theme-ui-tint-strong: color-mix(in srgb, var(--accent) 18%, var(--surface-elevated) 82%);
  --theme-ui-hover: color-mix(in srgb, var(--accent) 12%, transparent 88%);
  --theme-ui-selected-bg: color-mix(in srgb, var(--accent) 34%, var(--surface-elevated) 66%);
  --theme-ui-selected-text: color-mix(in srgb, var(--accent-strong) 82%, var(--text) 18%);
  --theme-ui-selected-border: color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
  --theme-ui-panel-border: color-mix(in srgb, var(--accent) 18%, var(--line) 82%);
  --theme-ui-focus: color-mix(in srgb, var(--accent) 18%, transparent 82%);
  --theme-ui-icon-bg: color-mix(in srgb, var(--accent) 12%, var(--surface-muted) 88%);
  --theme-ui-danger-soft: color-mix(in srgb, #ef4444 13%, var(--surface-elevated) 87%);
  --theme-ui-good-soft: color-mix(in srgb, #16a34a 13%, var(--surface-elevated) 87%);
  --theme-ui-difficulty-selected-bg: var(--theme-ui-selected-bg);
  --theme-ui-difficulty-selected-text: var(--theme-ui-selected-text);
  --theme-control-bg: var(--secondary-bg, var(--surface-elevated));
  --theme-control-hover-bg: var(--button-secondary-hover, var(--theme-ui-hover));
  --theme-control-border: var(--line);
  --theme-control-hover-border: var(--theme-ui-selected-border);
  --theme-control-selected-bg: var(--theme-ui-selected-bg);
  --theme-control-selected-border: var(--theme-ui-selected-border);
  --theme-control-selected-ring: var(--theme-ui-focus);
  --theme-top-menu-hover-bg: color-mix(in srgb, var(--accent) 8%, var(--surface-elevated) 92%);
  --theme-top-menu-active-bg: color-mix(in srgb, var(--accent) 11%, var(--surface-elevated) 89%);
  --theme-top-menu-active-text: var(--accent-strong);
  --control-bg: var(--theme-control-bg);
  --control-border: var(--theme-control-border);
  --control-hover-bg: var(--theme-control-hover-bg);
  --control-hover-border: var(--theme-control-hover-border);
  --selected-bg: var(--theme-ui-selected-bg);
  --selected-border: var(--theme-ui-selected-border);
  --selected-text: var(--theme-ui-selected-text);
  --selected-ring: var(--theme-ui-focus);
  --focus-ring: var(--theme-ui-focus);
  --menu-border: var(--theme-ui-panel-border);
  --menu-hover-bg: var(--theme-ui-hover);
  --chip-bg: var(--theme-ui-tint);
  --chip-border: var(--theme-ui-panel-border);
  --chip-text: var(--text);
  --chip-icon: var(--text);
}

html[data-theme="dark"][data-theme-accent] {
  --theme-ui-panel-bg: color-mix(in srgb, var(--surface-elevated) 92%, var(--accent) 8%);
  --theme-ui-menu-bg: color-mix(in srgb, var(--surface-elevated) 94%, var(--accent) 6%);
  --theme-ui-tint: color-mix(in srgb, var(--accent) 16%, var(--surface-elevated) 84%);
  --theme-ui-tint-strong: color-mix(in srgb, var(--accent) 26%, var(--surface-elevated) 74%);
  --theme-ui-hover: color-mix(in srgb, var(--accent) 18%, transparent 82%);
  --theme-ui-selected-bg: color-mix(in srgb, var(--accent) 44%, var(--surface-elevated) 56%);
  --theme-ui-selected-text: color-mix(in srgb, var(--accent-strong) 88%, #ffffff 12%);
  --theme-ui-selected-border: color-mix(in srgb, var(--accent) 54%, var(--line) 46%);
  --theme-ui-panel-border: color-mix(in srgb, var(--accent) 30%, var(--line) 70%);
  --theme-ui-focus: color-mix(in srgb, var(--accent) 26%, transparent 74%);
  --theme-ui-icon-bg: color-mix(in srgb, var(--accent) 18%, var(--surface-muted) 82%);
  --theme-control-hover-bg: color-mix(in srgb, var(--accent) 14%, var(--surface-elevated) 86%);
  --theme-control-hover-border: var(--theme-ui-selected-border);
  --theme-control-selected-bg: var(--theme-ui-selected-bg);
  --theme-control-selected-border: var(--theme-ui-selected-border);
  --theme-control-selected-ring: var(--theme-ui-focus);
  --theme-top-menu-hover-bg: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated) 88%);
  --theme-top-menu-active-bg: color-mix(in srgb, var(--accent) 18%, var(--surface-elevated) 82%);
  --theme-top-menu-active-text: var(--theme-ui-selected-text);
}

html[data-theme-accent="black"] {
  --theme-ui-panel-bg: color-mix(in srgb, var(--surface-elevated) 95%, #111827 5%);
  --theme-ui-menu-bg: var(--surface-elevated);
  --theme-ui-tint: color-mix(in srgb, #111827 9%, var(--surface-elevated) 91%);
  --theme-ui-tint-strong: color-mix(in srgb, #111827 16%, var(--surface-elevated) 84%);
  --theme-ui-hover: color-mix(in srgb, #111827 8%, transparent 92%);
  --theme-ui-selected-bg: #111827;
  --theme-ui-selected-text: #ffffff;
  --theme-ui-selected-border: color-mix(in srgb, #111827 56%, var(--line) 44%);
  --theme-ui-panel-border: color-mix(in srgb, #111827 20%, var(--line) 80%);
  --theme-ui-focus: color-mix(in srgb, #111827 16%, transparent 84%);
  --theme-ui-icon-bg: color-mix(in srgb, #111827 8%, var(--surface-muted) 92%);
  --theme-ui-difficulty-selected-bg: #111827;
  --theme-ui-difficulty-selected-text: #ffffff;
}

html[data-theme="dark"][data-theme-accent="black"] {
  --theme-ui-panel-bg: color-mix(in srgb, var(--surface-elevated) 90%, #f8fafc 10%);
  --theme-ui-menu-bg: color-mix(in srgb, var(--surface-elevated) 92%, #f8fafc 8%);
  --theme-ui-tint: color-mix(in srgb, #f8fafc 14%, var(--surface-elevated) 86%);
  --theme-ui-tint-strong: color-mix(in srgb, #f8fafc 22%, var(--surface-elevated) 78%);
  --theme-ui-hover: color-mix(in srgb, #f8fafc 12%, transparent 88%);
  --theme-ui-selected-bg: #f8fafc;
  --theme-ui-selected-text: #0f172a;
  --theme-ui-selected-border: color-mix(in srgb, #f8fafc 54%, var(--line) 46%);
  --theme-ui-panel-border: color-mix(in srgb, #f8fafc 24%, var(--line) 76%);
  --theme-ui-focus: color-mix(in srgb, #f8fafc 24%, transparent 76%);
  --theme-ui-icon-bg: color-mix(in srgb, #f8fafc 12%, var(--surface-muted) 88%);
  --theme-ui-difficulty-selected-bg: #f8fafc;
  --theme-ui-difficulty-selected-text: #0f172a;
}

html[data-theme-accent="white"] {
  --theme-ui-panel-bg: color-mix(in srgb, var(--surface-elevated) 96%, var(--text) 4%);
  --theme-ui-menu-bg: var(--surface-elevated);
  --theme-ui-tint: color-mix(in srgb, var(--text) 5%, var(--surface-elevated) 95%);
  --theme-ui-tint-strong: color-mix(in srgb, var(--text) 8%, var(--surface-elevated) 92%);
  --theme-ui-hover: color-mix(in srgb, var(--text) 7%, transparent 93%);
  --theme-ui-selected-bg: color-mix(in srgb, var(--text) 9%, var(--surface-elevated) 91%);
  --theme-ui-selected-text: color-mix(in srgb, var(--text) 88%, #2563eb 12%);
  --theme-ui-selected-border: color-mix(in srgb, var(--text) 15%, var(--line) 85%);
  --theme-ui-panel-border: color-mix(in srgb, var(--text) 10%, var(--line) 90%);
  --theme-ui-focus: color-mix(in srgb, #64748b 20%, transparent 80%);
  --theme-ui-icon-bg: color-mix(in srgb, var(--text) 7%, var(--surface-muted) 93%);
  --theme-ui-difficulty-selected-bg: color-mix(in srgb, #0f172a 12%, var(--surface-elevated) 88%);
  --theme-ui-difficulty-selected-text: #0f172a;
  --theme-top-menu-hover-bg: color-mix(in srgb, #0f172a 5%, var(--surface-elevated) 95%);
  --theme-top-menu-active-bg: color-mix(in srgb, #0f172a 8%, var(--surface-elevated) 92%);
  --theme-top-menu-active-text: color-mix(in srgb, #0f172a 92%, var(--muted) 8%);
}

html[data-theme="dark"][data-theme-accent="white"] {
  --theme-ui-panel-bg: color-mix(in srgb, var(--surface-elevated) 88%, #f8fafc 12%);
  --theme-ui-menu-bg: color-mix(in srgb, var(--surface-elevated) 92%, #f8fafc 8%);
  --theme-ui-tint: color-mix(in srgb, #f8fafc 14%, var(--surface-elevated) 86%);
  --theme-ui-tint-strong: color-mix(in srgb, #f8fafc 22%, var(--surface-elevated) 78%);
  --theme-ui-hover: color-mix(in srgb, #f8fafc 12%, transparent 88%);
  --theme-ui-selected-bg: color-mix(in srgb, #f8fafc 22%, var(--surface-elevated) 78%);
  --theme-ui-selected-text: #f8fafc;
  --theme-ui-selected-border: color-mix(in srgb, #f8fafc 36%, var(--line) 64%);
  --theme-ui-panel-border: color-mix(in srgb, #f8fafc 20%, var(--line) 80%);
  --theme-ui-focus: color-mix(in srgb, #f8fafc 22%, transparent 78%);
  --theme-ui-icon-bg: color-mix(in srgb, #f8fafc 12%, var(--surface-muted) 88%);
  --theme-ui-difficulty-selected-bg: color-mix(in srgb, #f8fafc 26%, var(--surface-elevated) 74%);
  --theme-ui-difficulty-selected-text: #f8fafc;
  --theme-top-menu-hover-bg: color-mix(in srgb, #f8fafc 10%, var(--surface-elevated) 90%);
  --theme-top-menu-active-bg: color-mix(in srgb, #f8fafc 18%, var(--surface-elevated) 82%);
  --theme-top-menu-active-text: #f8fafc;
}

html[data-theme-accent] :is(
  .study-set-card,
  .app-prompt-card,
  .settings-card,
  .author-profile-card,
  .current-user-profile-card,
  .drive-libraries-card
) {
  border-color: var(--theme-ui-panel-border) !important;
  background: var(--theme-ui-panel-bg) !important;
}

html[data-theme-accent="white"] body:not(.quiz-mode) .tabs :is(
  .app-sidebar-toggle,
  .app-library-kind-label,
  .app-pack-name-button,
  .app-library-refresh-button
),
html[data-theme-accent="white"] body:not(.quiz-mode) .tabs :is(
  .app-sidebar-toggle,
  .app-library-kind-label,
  .app-pack-name-button,
  .app-library-refresh-button
):is(:hover, :focus-visible) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme-accent="white"] #accountMenu.account-menu :is(
  .account-menu-section,
  .account-menu-subview,
  .account-menu-choice-group,
  .account-menu-theme-grid
) {
  border: 0 !important;
  border-top: 0 !important;
  border-block-start: 0 !important;
  box-shadow: none !important;
}

html[data-theme-accent="white"] #accountMenu.account-menu :is(
  .account-menu-item,
  .account-menu-back,
  .account-menu-choice,
  .account-menu-theme-option,
  .account-menu-profile-link,
  .account-menu-signout-link
),
html[data-theme-accent="white"] #accountMenu.account-menu :is(
  .account-menu-item,
  .account-menu-back,
  .account-menu-choice,
  .account-menu-theme-option,
  .account-menu-profile-link,
  .account-menu-signout-link
):is(:hover, :focus-visible) {
  border: 0 !important;
  outline: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme-accent] #sharedPackBrowseCard.shared-library-inline {
  --shared-library-panel-bg: var(--theme-ui-panel-bg);
  --shared-library-panel-border: var(--theme-ui-panel-border);
  --shared-library-panel-divider: color-mix(in srgb, var(--theme-ui-panel-border) 72%, transparent 28%);
  --shared-library-field-bg: var(--input-bg-strong, var(--surface-elevated));
  --shared-library-field-border: var(--theme-ui-panel-border);
  --shared-library-button-bg: var(--theme-ui-menu-bg);
  --shared-library-muted-bg: var(--theme-ui-tint);
}

html[data-theme-accent] #tab-quiz .quiz-difficulty-track {
  border-color: var(--theme-ui-panel-border) !important;
  background: color-mix(in srgb, var(--surface-muted) 54%, var(--theme-ui-tint) 46%) !important;
}

html[data-theme-accent] #tab-quiz .quiz-difficulty-option {
  color: color-mix(in srgb, var(--muted) 80%, var(--text) 20%) !important;
}

html[data-theme-accent] #tab-quiz .quiz-difficulty-option:hover,
html[data-theme-accent] #tab-quiz .quiz-difficulty-option:focus-visible {
  background: var(--theme-ui-hover) !important;
  color: var(--theme-ui-selected-text) !important;
}

html[data-theme-accent] #tab-quiz .quiz-difficulty-option.is-selected {
  background: var(--theme-ui-difficulty-selected-bg) !important;
  color: var(--theme-ui-difficulty-selected-text) !important;
  box-shadow: inset 0 0 0 1px var(--theme-ui-selected-border) !important;
}

/* White theme top-menu selected states. */
html[data-theme-accent="white"] .tabs .tab-row-primary :is(.tab, .microscope-tab-button):not(:disabled) {
  color: var(--text) !important;
}

html[data-theme-accent="white"] .tabs .tab-row-primary :is(.tab, .microscope-tab-button):not(.active):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not(:disabled):hover,
html[data-theme-accent="white"] .tabs .tab-row-primary :is(.tab, .microscope-tab-button):not(.active):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not(:disabled):focus-visible {
  background: var(--theme-top-menu-hover-bg) !important;
  color: var(--text) !important;
}

html[data-theme-accent="white"] .tabs .tab-row-primary :is(
  .tab.active,
  .tab.is-active,
  .tab[aria-selected="true"],
  .microscope-tab-button.active,
  .microscope-tab-button.is-active,
  .microscope-tab-button[aria-pressed="true"]
):not(:disabled) {
  background: var(--theme-top-menu-active-bg) !important;
  border-color: transparent !important;
  color: var(--theme-top-menu-active-text) !important;
  box-shadow: none !important;
}

/* Google Drive libraries: keep each saved pack self-contained and readable. */
/* Cross-surface sizing consistency: scoped to app panels, menus, and pages; the main library side panel is intentionally untouched. */
html {
  --gqb-ui-modal-radius: 18px;
  --gqb-ui-panel-radius: 16px;
  --gqb-ui-card-radius: 14px;
  --gqb-ui-control-radius: 12px;
  --gqb-ui-menu-radius: 14px;
  --gqb-ui-close-height: 44px;
  --gqb-ui-close-min-width: 104px;
  --gqb-ui-button-height: 42px;
  --gqb-ui-compact-button-height: 36px;
  --gqb-ui-input-height: 44px;
  --gqb-ui-modal-title-size: clamp(24px, 1.65vw, 30px);
  --gqb-ui-panel-title-size: clamp(20px, 1.35vw, 24px);
  --gqb-ui-section-title-size: 16px;
  --gqb-ui-control-font-size: 14px;
  --gqb-ui-body-font-size: 15px;
}

:is(
  #authorProfileModal .author-profile-card,
  #userProfileModal .current-user-profile-card,
  #driveLibrariesModal .drive-libraries-card,
  #settingsModal .settings-card.settings-shell,
  #appPromptModal .app-prompt-card,
  #studySetModal .study-set-card,
  #hardCardModal .hard-card-panel,
  #rewardPreviewModal .reward-preview-card,
  .drive-save-chooser-card,
  .drive-import-chooser-card,
  #sharedPackBrowseCard.shared-library-inline .shared-library-controls,
  #tab-import .import-action-card,
  #tab-export .save-action-card,
  #tab-quiz .quiz-setup-actions,
  #tab-quiz .quiz-include-card,
  #tab-quiz .quiz-saved-groups-panel
) {
  border-radius: var(--gqb-ui-panel-radius) !important;
}

:is(
  #authorProfileModal .study-set-top,
  #userProfileModal .current-user-profile-top,
  #driveLibrariesModal .drive-libraries-top,
  #settingsModal .settings-shell-header,
  #appPromptModal .study-set-top,
  #studySetModal .study-set-top,
  #hardCardModal .hard-card-top,
  #rewardPreviewModal .reward-preview-top,
  .drive-save-chooser-card .study-set-top,
  .drive-import-chooser-card .study-set-top,
  #sharedPackBrowseCard.shared-library-inline .shared-library-controls-head
) {
  gap: 18px !important;
}

#settingsModal .settings-shell-header {
  min-height: 96px !important;
  padding: 22px 30px !important;
}

:is(
  #authorProfileModal #authorProfileName,
  #userProfileModal #currentUserName,
  #driveLibrariesModal #driveLibrariesTitle,
  #settingsModal #settingsTitle,
  #appPromptModal #appPromptTitle,
  #studySetModal #studySetTitle,
  #hardCardModal #hardCardTitle,
  #rewardPreviewModal .reward-preview-title,
  .drive-save-chooser-card h2,
  .drive-import-chooser-card h2
) {
  font-size: var(--gqb-ui-modal-title-size) !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

:is(
  #sharedPackBrowseCard.shared-library-inline .shared-library-title,
  #sharedPackBrowseCard.shared-library-inline .shared-library-title-wrap h2,
  #tab-import .import-action-card .action-fold-title,
  #tab-export .save-action-card h3,
  #tab-quiz .quiz-setup-copy h3,
  #tab-quiz .quiz-include-card h3,
  #tab-quiz .quiz-saved-groups-panel h3,
  .drive-save-chooser-card h3,
  .drive-import-chooser-card h3
) {
  font-size: var(--gqb-ui-panel-title-size) !important;
  line-height: 1.18 !important;
  font-weight: 690 !important;
  letter-spacing: 0 !important;
}

:is(
  #authorProfileModal .study-set-kicker,
  #userProfileModal .study-set-kicker,
  #settingsModal .settings-brand,
  #settingsModal .settings-pane-title,
  #appPromptModal .study-set-kicker,
  #studySetModal .study-set-kicker,
  #hardCardModal .hard-card-kicker,
  #tab-import .import-action-card .field label,
  #tab-export .save-action-card .field label,
  #sharedPackBrowseCard.shared-library-inline .shared-pack-filter-grid .field label
) {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 720 !important;
  letter-spacing: 0.08em !important;
}

:is(
  #userProfileModal .current-user-profile-section-title h3,
  #settingsModal .settings-item-title,
  #authorProfileModal .author-profile-library-title
) {
  font-size: var(--gqb-ui-section-title-size) !important;
  line-height: 1.25 !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

:is(
  #authorProfileModal .study-set-subtitle,
  #userProfileModal .study-set-subtitle,
  #userProfileModal .current-user-profile-line,
  #settingsModal .settings-item-meta,
  #appPromptModal #appPromptMessage,
  #studySetModal #studySetSubtitle,
  #rewardPreviewModal .reward-preview-sub,
  #tab-import .import-action-card .action-fold-sub,
  #tab-export .save-action-card p,
  #sharedPackBrowseCard.shared-library-inline .shared-pack-status-row
) {
  font-size: var(--gqb-ui-body-font-size) !important;
  line-height: 1.45 !important;
  font-weight: 430 !important;
  letter-spacing: 0 !important;
}

:is(
  #closeAuthorProfileBtn,
  #closeCurrentUserProfileBtn,
  #closeDriveLibrariesBtn,
  #closeSettingsBtn,
  #closeAppPromptBtn,
  #closeStudySetBtn,
  #hardCardCloseBtn,
  #closeModalBtn,
  #closeRewardPreview,
  .modal-close,
  .drive-save-chooser-card [data-drive-save-close],
  .drive-import-chooser-card [data-drive-import-close]
) {
  min-height: var(--gqb-ui-close-height) !important;
  min-width: var(--gqb-ui-close-min-width) !important;
  padding: 0 16px !important;
  border-radius: var(--gqb-ui-control-radius) !important;
  font-size: var(--gqb-ui-control-font-size) !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

:is(
  #authorProfileModal,
  #userProfileModal,
  #driveLibrariesModal,
  #settingsModal,
  #appPromptModal,
  #tab-import,
  #tab-export,
  #sharedPackBrowseCard.shared-library-inline,
  .drive-save-chooser-card,
  .drive-import-chooser-card
) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  min-height: var(--gqb-ui-input-height) !important;
  border-radius: var(--gqb-ui-control-radius) !important;
  font-size: var(--gqb-ui-body-font-size) !important;
  line-height: 1.2 !important;
}

:is(
  #userProfileModal,
  #driveLibrariesModal,
  #settingsModal,
  #appPromptModal,
  #tab-import,
  #tab-export,
  #sharedPackBrowseCard.shared-library-inline,
  .drive-save-chooser-card,
  .drive-import-chooser-card
) textarea {
  border-radius: var(--gqb-ui-control-radius) !important;
  font-size: var(--gqb-ui-body-font-size) !important;
  line-height: 1.4 !important;
}

#userProfileModal .current-user-profile-header-actions,
#authorProfileModal .author-profile-actions,
#appPromptModal .app-prompt-actions,
#tab-export .save-action-card,
#tab-import .import-action-card .action-fold-body {
  gap: 12px !important;
}

#tab-quiz .quiz-setup-buttons > button,
#tab-quiz .quiz-toolbar-actions .quiz-action-button {
  min-height: var(--gqb-ui-button-height) !important;
  border-radius: var(--gqb-ui-control-radius) !important;
  font-size: var(--gqb-ui-control-font-size) !important;
}

#microscopeOverlay :is(
  .microscope-exit-button,
  .microscope-tool-button,
  .microscope-import-menu-button,
  .microscope-slide-action,
  .microscope-section-toggle
) {
  min-height: var(--gqb-ui-compact-button-height) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

@media (max-width: 720px) {
  html {
    --gqb-ui-modal-radius: 16px;
    --gqb-ui-panel-radius: 14px;
    --gqb-ui-card-radius: 12px;
    --gqb-ui-close-height: 40px;
    --gqb-ui-close-min-width: 92px;
    --gqb-ui-button-height: 40px;
    --gqb-ui-compact-button-height: 34px;
    --gqb-ui-input-height: 42px;
    --gqb-ui-modal-title-size: clamp(21px, 6vw, 26px);
    --gqb-ui-panel-title-size: 19px;
    --gqb-ui-body-font-size: 14px;
  }

  /* Phone browsers auto-zoom focused fields below 16px; keep ordinary app fields stable without blocking pinch zoom. */
  :is(
    #authorProfileModal,
    #userProfileModal,
    #driveLibrariesModal,
    #settingsModal,
    #appPromptModal,
    #studySetModal,
    #hardCardModal,
    #rewardPreviewModal,
    #tab-import,
    #tab-export,
    #sharedPackBrowseCard,
    #studyProfileShell,
    .drive-save-chooser-card,
    .drive-import-chooser-card
  ) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
  #diseaseSearch,
  #appPackRenameInput,
  #starGroupName,
  #studyTimerInput,
  #customCode,
  #customName,
  #customGroup,
  #quizGuess,
  #systemPackNameInput,
  .quick-create-menu :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    font-size: 16px !important;
  }

  html:has(#userProfileModal.open),
  html:has(#authorProfileModal.open),
  html:has(#driveLibrariesModal.open),
  html:has(#settingsModal.open),
  html:has(#appPromptModal.open),
  html:has(#studySetModal.open),
  html:has(#hardCardModal.open),
  html:has(#rewardPreviewModal.open),
  body:has(#userProfileModal.open),
  body:has(#authorProfileModal.open),
  body:has(#driveLibrariesModal.open),
  body:has(#settingsModal.open),
  body:has(#appPromptModal.open),
  body:has(#studySetModal.open),
  body:has(#hardCardModal.open),
  body:has(#rewardPreviewModal.open) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    scrollbar-gutter: auto !important;
  }

  body:has(#userProfileModal.open) .wrap,
  body:has(#authorProfileModal.open) .wrap,
  body:has(#driveLibrariesModal.open) .wrap,
  body:has(#settingsModal.open) .wrap,
  body:has(#appPromptModal.open) .wrap,
  body:has(#studySetModal.open) .wrap,
  body:has(#hardCardModal.open) .wrap,
  body:has(#rewardPreviewModal.open) .wrap {
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #settingsModal .settings-shell-header,
  :is(
    #authorProfileModal .study-set-top,
    #userProfileModal .current-user-profile-top,
    #driveLibrariesModal .drive-libraries-top,
    #appPromptModal .study-set-top,
    #studySetModal .study-set-top,
    #hardCardModal .hard-card-top,
    #rewardPreviewModal .reward-preview-top
  ) {
    padding: 18px !important;
    gap: 14px !important;
  }

  #settingsModal .settings-content {
    padding: 24px 20px !important;
  }

  :is(
    #userProfileModal .current-user-profile-card,
    #authorProfileModal .author-profile-card,
    #driveLibrariesModal .drive-libraries-card,
    #settingsModal .settings-card.settings-shell,
    #appPromptModal .app-prompt-card,
    #studySetModal .study-set-card,
    #hardCardModal .hard-card-panel,
    #rewardPreviewModal .reward-preview-card
  ) {
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--surface-elevated, #ffffff) !important;
    overflow: hidden !important;
  }

  #studySetModal.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--surface-elevated) !important;
  }

  #studySetModal .study-set-scrim {
    display: none !important;
  }

  #userProfileModal.open,
  #authorProfileModal.open,
  #driveLibrariesModal.open,
  #settingsModal.open,
  #appPromptModal.open,
  #studySetModal.open,
  #hardCardModal.open,
  #rewardPreviewModal.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--surface-elevated, #ffffff) !important;
  }

  #driveLibrariesModal .drive-libraries-card,
  #appPromptModal .app-prompt-card,
  #studySetModal .study-set-card,
  #hardCardModal .hard-card-panel,
  #rewardPreviewModal .reward-preview-card {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  #appPromptModal .app-prompt-card {
    align-self: stretch !important;
  }

  #appPromptModal .app-prompt-body {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-wrap: anywhere !important;
    -webkit-overflow-scrolling: touch;
  }

  #appPromptModal .app-prompt-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #appPromptModal .app-prompt-actions > button,
  #studySetModal .study-set-list-item,
  #hardCardModal .hard-card-panel button,
  #rewardPreviewModal .reward-preview-card button {
    min-height: 44px !important;
  }

  #studySetModal .study-set-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--surface-elevated) !important;
  }

  #studySetModal .study-set-top {
    align-items: center !important;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface-elevated) !important;
    min-height: calc(54px + env(safe-area-inset-top)) !important;
  }

  #studySetModal .study-set-top > div {
    min-width: 0 !important;
  }

  #studySetModal .study-set-kicker {
    margin: 0 0 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
  }

  #studySetModal #studySetTitle {
    display: none !important;
  }

  #studySetModal #studySetSubtitle {
    margin: 2px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  #studySetModal #closeStudySetBtn {
    min-width: 76px !important;
    width: auto !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    flex: 0 0 auto !important;
  }

  #studySetModal #closeStudySetBtn::before {
    content: none !important;
  }

  #studySetModal .study-set-list,
  #studySetModal .study-set-detail {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  #studySetModal .study-set-list {
    display: flex !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface-elevated) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-gutter: auto !important;
  }

  #studySetModal .study-set-list-item {
    flex: 0 0 min(46vw, 180px) !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #studySetModal .study-set-list-item:hover,
  #studySetModal .study-set-list-item.active:hover {
    transform: none !important;
  }

  #studySetModal .study-set-list-code {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  #studySetModal .study-set-list-name {
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  #studySetModal .study-set-list-meta {
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #studySetModal .study-set-detail {
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom)) !important;
    scrollbar-gutter: auto !important;
    background: var(--surface-elevated) !important;
  }

  #studySetModal .study-set-detail-header {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--line) !important;
    gap: 8px !important;
  }

  #studySetModal .study-set-detail-badges {
    gap: 6px !important;
  }

  #studySetModal .study-set-detail-badges .badge {
    padding: 5px 8px !important;
    min-height: 28px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  #studySetModal .study-set-detail-title {
    margin-top: 8px !important;
    font-size: clamp(19px, 5.8vw, 24px) !important;
    line-height: 1.12 !important;
  }

  #studySetModal .study-set-detail-grid {
    gap: 0 !important;
  }

  #studySetModal .study-set-detail-section {
    padding: 12px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #studySetModal .study-set-detail-section:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  #studySetModal .study-set-detail-section h4 {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  #studySetModal .study-note-display {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  #studySetModal .study-note-display :is(h1, h2, h3) {
    margin: 0.8em 0 0.35em !important;
    font-size: clamp(19px, 5.6vw, 24px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  #studySetModal .study-note-display :is(h4, h5, h6) {
    margin: 0.75em 0 0.3em !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  #studySetModal .study-note-display :is(p, li, div) {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  #studySetModal .study-note-display :is(ul, ol) {
    padding-left: 1.25em !important;
    margin: 0.4em 0 0.75em !important;
  }

  #studySetModal #studySetImages {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #studySetModal #studySetImages .img-card,
  #studySetModal .study-set-canvas-preview {
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  #studySetModal.study-set-surface-canvas .study-set-detail {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 0 !important;
  }

  #studySetModal.study-set-surface-canvas .study-set-detail-grid--canvas-study {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  #studySetModal.study-set-surface-canvas .study-set-canvas-study-section {
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
  }

  #studySetModal .study-set-canvas-study-viewer {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    touch-action: pan-x pan-y pinch-zoom;
  }

  #studySetModal .study-set-canvas-study-viewer .excalidraw {
    width: 100% !important;
    height: 100% !important;
  }

  #studySetModal .study-set-canvas-study-fallback {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    background: #ffffff !important;
  }

  #studySetModal .study-set-canvas-study-fallback img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  #studySetModal.single-entry .study-set-body {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  #studySetModal.single-entry .study-set-detail {
    display: block !important;
  }

  #studySetModal.single-entry .study-set-list {
    display: none !important;
  }

  #studySetModal.single-entry .study-set-detail-header {
    display: none !important;
  }

  #driveLibrariesModal .drive-libraries-top,
  #settingsModal .settings-shell-header,
  #appPromptModal .study-set-top,
  #studySetModal .study-set-top,
  #hardCardModal .hard-card-top,
  #rewardPreviewModal .reward-preview-top {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-library-panel {
    min-height: 0 !important;
    padding: 0 14px 14px !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-library-toolbar-row {
    margin-bottom: 10px !important;
    padding-right: 0 !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-library-toolbar {
    grid-template-columns: minmax(0, 1fr) 40px 40px 40px !important;
    gap: 8px !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-library-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    align-content: stretch !important;
    gap: 8px !important;
    padding: 2px 2px 16px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 0 !important;
    align-items: stretch !important;
    align-content: start !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    contain: none !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
    border-bottom: 2px solid color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
    transform: rotate(45deg);
    transition: transform .18s ease, top .18s ease;
    pointer-events: none;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded::after {
    top: 21px;
    transform: rotate(-135deg);
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-renaming::after {
    display: none !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row-icon {
    display: none !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row-main,
  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row-copy,
  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row-top {
    width: 100% !important;
    min-width: 0 !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row-main {
    display: grid !important;
    gap: 0 !important;
    align-content: stretch !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row-copy {
    display: grid !important;
    gap: 7px !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 42px 0 16px !important;
    font-size: 16px !important;
    font-weight: 820 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    touch-action: manipulation;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-renaming .drive-library-rename {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    justify-self: start !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-renaming .drive-library-rename input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row:not(.is-mobile-expanded) :is(
    .gdrive-pack-row-badges,
    .gdrive-pack-row-sub,
    .gdrive-pack-row-meta,
    .gdrive-pack-row-actions,
    .current-user-shared-edit-form,
    .drive-library-inline-edit-actions
  ) {
    display: none !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    align-content: start !important;
    align-items: stretch !important;
    padding: 13px !important;
    overflow: visible !important;
    scroll-margin-top: 14px !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded .gdrive-pack-row-main {
    grid-column: 1 !important;
    grid-row: auto !important;
    gap: 10px !important;
    align-content: start !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded .gdrive-pack-row-title {
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding: 0 34px 0 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded .gdrive-pack-row-badges {
    display: flex !important;
    margin-top: 0 !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded .gdrive-pack-row-sub {
    display: block !important;
    margin: 0 !important;
    color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded .gdrive-pack-row-meta {
    display: grid !important;
    gap: 6px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    overflow: visible !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded .gdrive-pack-row-meta span {
    white-space: normal !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded .gdrive-pack-row-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
    grid-auto-rows: minmax(38px, auto) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  #driveLibrariesModal .drive-libraries-card .gdrive-pack-row.is-mobile-expanded .gdrive-pack-row-action {
    min-height: 38px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  #hardCardModal .hard-card-stage,
  #rewardPreviewModal .reward-preview-grid {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  #hardCardModal .hard-card-stage {
    padding: 10px !important;
  }

  #rewardPreviewModal .reward-preview-grid {
    padding: 12px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  #settingsModal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--surface-elevated, #ffffff) !important;
  }

  #settingsModal .settings-card.settings-shell {
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--surface-elevated, #ffffff) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  #settingsModal .study-set-scrim {
    display: none !important;
  }

  #settingsModal .settings-shell-header {
    min-height: 66px !important;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
    gap: 10px !important;
    background: var(--surface-elevated, #ffffff) !important;
  }

  #settingsModal .settings-brand {
    margin-bottom: 3px !important;
    max-width: min(52vw, 270px) !important;
    padding: 3px 9px !important;
    border: 1px solid color-mix(in srgb, var(--accent, #3182f6) 26%, var(--line, #d8e0ee) 74%) !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: .13em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #settingsModal #settingsTitle {
    font-size: 26px !important;
    line-height: 1.05 !important;
  }

  #settingsModal .settings-shell-close {
    min-width: 86px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  #settingsModal .settings-content {
    min-height: 0 !important;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  #settingsModal .settings-pane-title {
    margin-bottom: 14px !important;
    font-size: 11.5px !important;
    letter-spacing: .11em !important;
  }

  #settingsModal .settings-control-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 0 !important;
  }

  #settingsModal .settings-control-row > button {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 42px !important;
    white-space: normal !important;
  }

  #settingsModal .settings-item-title {
    font-size: 15px !important;
  }

  #settingsModal .settings-item-meta {
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #settingsModal .settings-theme-palette {
    gap: 9px !important;
    margin-top: 12px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #settingsModal .settings-theme-swatch {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  #settingsModal .settings-control-block {
    width: 100% !important;
    max-width: none !important;
  }

  #settingsModal .settings-feedback-panel {
    margin-top: 14px !important;
    padding: 16px 0 0 !important;
  }

  :is(
    #settingsModal .settings-content,
    #userProfileModal .current-user-profile-body,
    #authorProfileModal .author-profile-body,
    #driveLibrariesModal .gdrive-library-panel,
    #appPromptModal .app-prompt-body
  ) {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Shared-pack card polish: distinct metadata rectangles, semantic type badges, and purple tag pills. */
#sharedPackBrowseCard.shared-library-inline .shared-pack-result,
#tab-export .shared-pack-preview-card,
#authorProfileModal .author-profile-library-pack,
#authorProfileModal .author-profile-pack-card {
  --shared-card-meta-chip-bg: color-mix(in srgb, var(--theme-ui-tint, var(--accent-soft, #dbeafe)) 42%, var(--surface-elevated, #ffffff) 58%);
  --shared-card-meta-chip-border: color-mix(in srgb, var(--theme-ui-panel-border, var(--border, rgba(148, 163, 184, 0.34))) 62%, transparent);
  --shared-card-meta-chip-text: color-mix(in srgb, var(--text, #0f172a) 92%, #000 8%);
  --shared-card-meta-chip-icon: color-mix(in srgb, var(--text, #0f172a) 88%, var(--muted, #64748b) 12%);
  --shared-card-purple-tag-bg: color-mix(in srgb, #7c3aed 11%, var(--surface-elevated, #ffffff) 89%);
  --shared-card-purple-tag-border: color-mix(in srgb, #7c3aed 16%, transparent);
  --shared-card-purple-tag-text: color-mix(in srgb, #4c1d95 90%, var(--text, #0f172a) 10%);
  --shared-card-menu-hover-bg: color-mix(in srgb, var(--theme-ui-tint, var(--accent-soft, #dbeafe)) 62%, var(--surface-elevated, #fff) 38%);
  --shared-card-menu-hover-border: color-mix(in srgb, var(--theme-ui-panel-border, var(--border, rgba(148, 163, 184, 0.38))) 76%, transparent);
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline .shared-pack-result,
html[data-theme="dark"] #tab-export .shared-pack-preview-card,
html[data-theme="dark"] #authorProfileModal .author-profile-library-pack,
html[data-theme="dark"] #authorProfileModal .author-profile-pack-card {
  --shared-card-meta-chip-bg: color-mix(in srgb, var(--theme-ui-tint, var(--accent-soft, #1d4ed8)) 20%, var(--surface-elevated, #111827) 80%);
  --shared-card-meta-chip-border: color-mix(in srgb, var(--theme-ui-panel-border, var(--border, rgba(148, 163, 184, 0.26))) 68%, transparent);
  --shared-card-meta-chip-text: color-mix(in srgb, var(--text, #f8fafc) 88%, var(--muted, #94a3b8) 12%);
  --shared-card-meta-chip-icon: color-mix(in srgb, var(--text, #f8fafc) 84%, var(--muted, #94a3b8) 16%);
  --shared-card-purple-tag-bg: color-mix(in srgb, #8b5cf6 20%, var(--surface-elevated, #111827) 80%);
  --shared-card-purple-tag-border: color-mix(in srgb, #c4b5fd 30%, transparent);
  --shared-card-purple-tag-text: #ddd6fe;
  --shared-card-menu-hover-bg: color-mix(in srgb, var(--theme-ui-tint, var(--accent-soft, #1d4ed8)) 22%, var(--surface-elevated, #111827) 78%);
  --shared-card-menu-hover-border: color-mix(in srgb, var(--theme-ui-panel-border, var(--border, rgba(148, 163, 184, 0.28))) 78%, transparent);
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-result-title {
  font-size: 30px !important;
  font-weight: 450 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

#tab-export .shared-pack-preview-card .shared-pack-result-title {
  font-size: 26px !important;
  font-weight: 450 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu {
  top: 16px !important;
  right: 16px !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger {
  width: 34px !important;
  min-width: 34px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--text, #0f172a) 88%, var(--muted, #64748b) 12%) !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger:hover,
#sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger:focus-visible,
#sharedPackBrowseCard.shared-library-inline .shared-pack-result.is-card-menu-open .shared-pack-card-menu-trigger {
  background: var(--shared-card-menu-hover-bg) !important;
  border-color: var(--shared-card-menu-hover-border) !important;
  color: var(--text, #0f172a) !important;
  opacity: 1 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 14%, transparent) !important;
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline .shared-pack-card-menu-trigger {
  color: color-mix(in srgb, var(--text, #f8fafc) 86%, var(--muted, #94a3b8) 14%) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card .shared-pack-author-text,
#tab-export .shared-pack-preview-card .shared-pack-author-text {
  color: color-mix(in srgb, var(--muted, #64748b) 86%, var(--text, #0f172a) 14%) !important;
  font-weight: 430 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card .shared-pack-author-text strong,
#tab-export .shared-pack-preview-card .shared-pack-author-text strong {
  color: var(--text, #0f172a) !important;
  font-weight: 520 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card:hover .shared-pack-author-text,
#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card:focus-visible .shared-pack-author-text,
#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card:hover .shared-pack-author-text strong,
#sharedPackBrowseCard.shared-library-inline .shared-pack-author-card:focus-visible .shared-pack-author-text strong,
#tab-export .shared-pack-preview-card .shared-pack-author-card:hover .shared-pack-author-text,
#tab-export .shared-pack-preview-card .shared-pack-author-card:focus-visible .shared-pack-author-text,
#tab-export .shared-pack-preview-card .shared-pack-author-card:hover .shared-pack-author-text strong,
#tab-export .shared-pack-preview-card .shared-pack-author-card:focus-visible .shared-pack-author-text strong {
  color: var(--text, #0f172a) !important;
}

.shared-pack-meta-icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
  color: currentColor;
}

.shared-pack-meta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-pack-badge .shared-pack-meta-icon,
.shared-pack-tag .shared-pack-meta-icon,
.shared-pack-date-line .shared-pack-meta-icon,
.shared-pack-tag-chip .shared-pack-meta-icon {
  margin-inline-start: -1px;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-badge,
#tab-export .shared-pack-preview-card .shared-pack-badge,
#authorProfileModal .author-profile-library-pack .shared-pack-badge,
#authorProfileModal .author-profile-pack-card .shared-pack-badge {
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 12px !important;
  border: 1px solid var(--shared-card-meta-chip-border) !important;
  gap: 7px !important;
  font-weight: 430 !important;
  line-height: 1.15 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-badge:not(.shared-pack-system-badge) .shared-pack-meta-icon,
#tab-export .shared-pack-preview-card .shared-pack-badge:not(.shared-pack-system-badge) .shared-pack-meta-icon,
#authorProfileModal .author-profile-library-pack .shared-pack-badge:not(.shared-pack-system-badge) .shared-pack-meta-icon,
#authorProfileModal .author-profile-pack-card .shared-pack-badge:not(.shared-pack-system-badge) .shared-pack-meta-icon {
  color: var(--shared-card-meta-chip-icon) !important;
  opacity: .94;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-system-badge,
#tab-export .shared-pack-preview-card .shared-pack-system-badge,
#authorProfileModal .author-profile-library-pack .shared-pack-system-badge,
#authorProfileModal .author-profile-pack-card .shared-pack-system-badge {
  border-radius: 12px !important;
  font-weight: 520 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-tag,
#tab-export .shared-pack-preview-card .shared-pack-tag,
#tab-export .shared-pack-tag-chip,
#authorProfileModal .author-profile-library-pack .shared-pack-tag,
#authorProfileModal .author-profile-pack-card .shared-pack-tag {
  min-height: 30px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--shared-card-purple-tag-border) !important;
  border-radius: 999px !important;
  background: var(--shared-card-purple-tag-bg) !important;
  color: var(--shared-card-purple-tag-text) !important;
  gap: 7px !important;
  font-weight: 430 !important;
  line-height: 1.15 !important;
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline .shared-pack-tag,
html[data-theme="dark"] #tab-export .shared-pack-preview-card .shared-pack-tag,
html[data-theme="dark"] #tab-export .shared-pack-tag-chip,
html[data-theme="dark"] #authorProfileModal .author-profile-library-pack .shared-pack-tag,
html[data-theme="dark"] #authorProfileModal .author-profile-pack-card .shared-pack-tag {
  border-color: var(--shared-card-purple-tag-border) !important;
  background: var(--shared-card-purple-tag-bg) !important;
  color: var(--shared-card-purple-tag-text) !important;
}

html[data-theme-accent] #sharedPackBrowseCard.shared-library-inline .shared-pack-result .shared-pack-tag,
html[data-theme-accent] #tab-export .shared-pack-preview-card .shared-pack-tag,
html[data-theme-accent] #tab-export .shared-pack-tag-chip,
html[data-theme-accent] #authorProfileModal .author-profile-library-pack .shared-pack-tag,
html[data-theme-accent] #authorProfileModal .author-profile-pack-card .shared-pack-tag {
  border-color: var(--shared-card-purple-tag-border) !important;
  background: var(--shared-card-purple-tag-bg) !important;
  color: var(--shared-card-purple-tag-text) !important;
}

html[data-theme="dark"][data-theme-accent] #sharedPackBrowseCard.shared-library-inline .shared-pack-result .shared-pack-tag,
html[data-theme="dark"][data-theme-accent] #tab-export .shared-pack-preview-card .shared-pack-tag,
html[data-theme="dark"][data-theme-accent] #tab-export .shared-pack-tag-chip,
html[data-theme="dark"][data-theme-accent] #authorProfileModal .author-profile-library-pack .shared-pack-tag,
html[data-theme="dark"][data-theme-accent] #authorProfileModal .author-profile-pack-card .shared-pack-tag {
  border-color: var(--shared-card-purple-tag-border) !important;
  background: var(--shared-card-purple-tag-bg) !important;
  color: var(--shared-card-purple-tag-text) !important;
}

#tab-export .shared-pack-tag-chip .shared-pack-meta-icon {
  overflow: visible !important;
}

.shared-pack-tag-label,
#tab-export .shared-pack-tag-chip .shared-pack-tag-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-date-line,
#tab-export .shared-pack-preview-footer .shared-pack-date-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  font-size: 12px !important;
  font-weight: 430 !important;
  line-height: 1.22 !important;
  color: color-mix(in srgb, var(--muted) 78%, var(--text) 22%) !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-date-line .shared-pack-meta-icon,
#tab-export .shared-pack-preview-footer .shared-pack-date-line .shared-pack-meta-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  color: color-mix(in srgb, var(--text, #0f172a) 72%, var(--muted, #64748b) 28%) !important;
}

#tab-export .shared-pack-preview-card .shared-pack-badge,
#tab-export .shared-pack-preview-card .shared-pack-tag {
  min-height: 22px !important;
  padding: 4px 7px !important;
  gap: 4px !important;
  font-size: 10px !important;
}

#tab-export .shared-pack-preview-card .shared-pack-meta-icon {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
}

@media (max-width: 640px) {
#sharedPackBrowseCard.shared-library-inline .shared-pack-result-title {
    font-size: 24px !important;
  }

  #tab-export .shared-pack-preview-card .shared-pack-result-title {
    font-size: 22px !important;
  }

  #authorProfileModal .author-profile-library-pack .shared-pack-badge,
  #authorProfileModal .author-profile-library-pack .shared-pack-tag {
    min-height: 18px !important;
    padding: 2px 7px !important;
    gap: 4px !important;
    border-radius: 7px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
  }

  #authorProfileModal .author-profile-library-pack .shared-pack-meta-icon {
    width: 11px !important;
    height: 11px !important;
    flex-basis: 11px !important;
  }
}




html[data-theme-accent] #tab-quiz {
  --quiz-theme-icon-bg: var(--theme-ui-icon-bg);
  --quiz-theme-icon-bg-strong: var(--theme-ui-tint-strong);
  --quiz-theme-icon-color: var(--theme-ui-selected-text);
  --quiz-theme-icon-border: var(--theme-ui-panel-border);
  --quiz-theme-saved-bg: color-mix(in srgb, #16a34a 13%, var(--surface-elevated) 87%);
  --quiz-theme-saved-color: color-mix(in srgb, #15803d 78%, var(--text) 22%);
  --quiz-theme-saved-border: color-mix(in srgb, #16a34a 28%, var(--line) 72%);
}

html[data-theme="dark"][data-theme-accent] #tab-quiz {
  --quiz-theme-saved-bg: color-mix(in srgb, #22c55e 18%, var(--surface-elevated) 82%);
  --quiz-theme-saved-color: color-mix(in srgb, #bbf7d0 84%, var(--text) 16%);
  --quiz-theme-saved-border: color-mix(in srgb, #22c55e 34%, var(--line) 66%);
}

html[data-theme="light"][data-theme-accent="white"] #tab-quiz {
  --quiz-theme-icon-bg: color-mix(in srgb, #0f172a 7%, var(--surface-elevated) 93%);
  --quiz-theme-icon-bg-strong: color-mix(in srgb, #0f172a 10%, var(--surface-elevated) 90%);
  --quiz-theme-icon-color: color-mix(in srgb, #0f172a 82%, var(--muted) 18%);
  --quiz-theme-icon-border: color-mix(in srgb, #0f172a 15%, var(--line) 85%);
}

html[data-theme-accent] #tab-quiz .quiz-panel-icon,
html[data-theme-accent] #tab-quiz .quiz-small-icon,
html[data-theme-accent] #tab-quiz .quiz-stack-line-icon {
  color: var(--quiz-theme-icon-color) !important;
  background: var(--quiz-theme-icon-bg) !important;
  border-color: var(--quiz-theme-icon-border) !important;
  box-shadow: inset 0 0 0 1px var(--quiz-theme-icon-border) !important;
}

html[data-theme-accent] #tab-quiz .quiz-panel-icon-cube,
html[data-theme-accent] #tab-quiz .quiz-panel-icon-rocket {
  background: var(--quiz-theme-icon-bg-strong) !important;
  color: var(--quiz-theme-icon-color) !important;
  border-color: var(--quiz-theme-icon-border) !important;
}

html[data-theme-accent] #tab-quiz .quiz-include-card.is-code-groups .quiz-small-icon {
  background: var(--quiz-theme-icon-bg-strong) !important;
  color: var(--quiz-theme-icon-color) !important;
}

html[data-theme-accent] #tab-quiz .quiz-include-card.is-saved-groups .quiz-small-icon {
  background: var(--quiz-theme-saved-bg) !important;
  color: var(--quiz-theme-saved-color) !important;
  border-color: var(--quiz-theme-saved-border) !important;
  box-shadow: inset 0 0 0 1px var(--quiz-theme-saved-border) !important;
}

html[data-theme-accent="white"] #tab-quiz {
  --quiz-icon-cube-bg: color-mix(in srgb, #2563eb 10%, var(--surface-elevated) 90%);
  --quiz-icon-cube-color: #2563eb;
  --quiz-icon-cube-border: color-mix(in srgb, #2563eb 24%, var(--line) 76%);
  --quiz-icon-code-bg: color-mix(in srgb, #7c3aed 9%, var(--surface-elevated) 91%);
  --quiz-icon-code-color: #6d28d9;
  --quiz-icon-code-border: color-mix(in srgb, #7c3aed 24%, var(--line) 76%);
  --quiz-icon-saved-bg: color-mix(in srgb, #f59e0b 12%, var(--surface-elevated) 88%);
  --quiz-icon-saved-color: #92400e;
  --quiz-icon-saved-border: color-mix(in srgb, #f59e0b 28%, var(--line) 72%);
  --quiz-icon-stack-bg: color-mix(in srgb, #64748b 10%, var(--surface-elevated) 90%);
  --quiz-icon-stack-color: #475569;
  --quiz-icon-stack-border: color-mix(in srgb, #64748b 22%, var(--line) 78%);
  --quiz-icon-rocket-bg: color-mix(in srgb, #ef4444 9%, var(--surface-elevated) 91%);
  --quiz-icon-rocket-color: #dc2626;
  --quiz-icon-rocket-border: color-mix(in srgb, #ef4444 24%, var(--line) 76%);
}

html[data-theme="dark"][data-theme-accent="white"] #tab-quiz {
  --quiz-icon-cube-bg: color-mix(in srgb, #60a5fa 14%, var(--surface-elevated) 86%);
  --quiz-icon-cube-color: #bfdbfe;
  --quiz-icon-cube-border: color-mix(in srgb, #60a5fa 28%, var(--line) 72%);
  --quiz-icon-code-bg: color-mix(in srgb, #a78bfa 13%, var(--surface-elevated) 87%);
  --quiz-icon-code-color: #ddd6fe;
  --quiz-icon-code-border: color-mix(in srgb, #a78bfa 28%, var(--line) 72%);
  --quiz-icon-saved-bg: color-mix(in srgb, #fbbf24 14%, var(--surface-elevated) 86%);
  --quiz-icon-saved-color: #fde68a;
  --quiz-icon-saved-border: color-mix(in srgb, #fbbf24 30%, var(--line) 70%);
  --quiz-icon-stack-bg: color-mix(in srgb, #cbd5e1 12%, var(--surface-elevated) 88%);
  --quiz-icon-stack-color: #e2e8f0;
  --quiz-icon-stack-border: color-mix(in srgb, #cbd5e1 24%, var(--line) 76%);
  --quiz-icon-rocket-bg: color-mix(in srgb, #f87171 13%, var(--surface-elevated) 87%);
  --quiz-icon-rocket-color: #fecaca;
  --quiz-icon-rocket-border: color-mix(in srgb, #f87171 28%, var(--line) 72%);
}

html[data-theme-accent="white"] #tab-quiz .quiz-panel-icon-cube {
  background: var(--quiz-icon-cube-bg) !important;
  color: var(--quiz-icon-cube-color) !important;
  border-color: var(--quiz-icon-cube-border) !important;
  box-shadow: inset 0 0 0 1px var(--quiz-icon-cube-border) !important;
}

html[data-theme-accent="white"] #tab-quiz .quiz-include-card.is-code-groups .quiz-small-icon {
  background: var(--quiz-icon-code-bg) !important;
  color: var(--quiz-icon-code-color) !important;
  border-color: var(--quiz-icon-code-border) !important;
  box-shadow: inset 0 0 0 1px var(--quiz-icon-code-border) !important;
}

html[data-theme-accent="white"] #tab-quiz .quiz-include-card.is-saved-groups .quiz-small-icon {
  background: var(--quiz-icon-saved-bg) !important;
  color: var(--quiz-icon-saved-color) !important;
  border-color: var(--quiz-icon-saved-border) !important;
  box-shadow: inset 0 0 0 1px var(--quiz-icon-saved-border) !important;
}

html[data-theme-accent="white"] #tab-quiz .quiz-stack-line-icon {
  background: var(--quiz-icon-stack-bg) !important;
  color: var(--quiz-icon-stack-color) !important;
  border-color: var(--quiz-icon-stack-border) !important;
  box-shadow: inset 0 0 0 1px var(--quiz-icon-stack-border) !important;
}

html[data-theme-accent="white"] #tab-quiz .quiz-panel-icon-rocket {
  background: var(--quiz-icon-rocket-bg) !important;
  color: var(--quiz-icon-rocket-color) !important;
  border-color: var(--quiz-icon-rocket-border) !important;
  box-shadow: inset 0 0 0 1px var(--quiz-icon-rocket-border) !important;
}

/* White-theme correction: keep the entry Excalidraw editor neutral in light and dark mode. */
html[data-theme-accent="white"] .entry-study-canvas-editor,
html[data-theme-accent="white"] .entry-study-canvas-preview {
  --entry-canvas-ui-bg: #ffffff;
  --entry-canvas-ui-raised: color-mix(in srgb, #0f172a 4%, #ffffff 96%);
  --entry-canvas-ui-hover: color-mix(in srgb, #0f172a 7%, transparent);
  --entry-canvas-ui-selected: color-mix(in srgb, #0f172a 10%, #ffffff 90%);
  --entry-canvas-ui-border: color-mix(in srgb, #0f172a 14%, var(--line) 86%);
  --entry-canvas-ui-text: color-mix(in srgb, #0f172a 92%, var(--muted) 8%);
  --entry-canvas-ui-muted: color-mix(in srgb, #64748b 84%, var(--text) 16%);
  --entry-canvas-accent: #64748b;
  --entry-canvas-accent-strong: #475569;
  border-color: var(--entry-canvas-ui-border) !important;
  background: var(--entry-canvas-ui-bg) !important;
  color: var(--entry-canvas-ui-text) !important;
}

html[data-theme="dark"][data-theme-accent="white"] .entry-study-canvas-editor,
html[data-theme="dark"][data-theme-accent="white"] .entry-study-canvas-preview {
  --entry-canvas-ui-bg: color-mix(in srgb, var(--surface-elevated) 90%, #f8fafc 10%);
  --entry-canvas-ui-raised: color-mix(in srgb, var(--surface-elevated) 82%, #f8fafc 18%);
  --entry-canvas-ui-hover: color-mix(in srgb, #f8fafc 12%, transparent);
  --entry-canvas-ui-selected: color-mix(in srgb, #f8fafc 18%, var(--surface-elevated) 82%);
  --entry-canvas-ui-border: color-mix(in srgb, #f8fafc 22%, var(--line) 78%);
  --entry-canvas-ui-text: #f8fafc;
  --entry-canvas-ui-muted: color-mix(in srgb, #cbd5e1 86%, var(--text) 14%);
  --entry-canvas-accent: #cbd5e1;
  --entry-canvas-accent-strong: #f8fafc;
}

html[data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw {
  --color-primary: var(--entry-canvas-accent) !important;
  --color-primary-darker: var(--entry-canvas-accent-strong) !important;
  --color-primary-darkest: var(--entry-canvas-ui-text) !important;
  --color-primary-light: var(--entry-canvas-ui-selected) !important;
  --default-button-size: 2.35rem;
  color-scheme: light;
  color: var(--entry-canvas-ui-text) !important;
}

html[data-theme="dark"][data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw {
  color-scheme: dark;
}

html[data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw :is(
  .Island,
  .App-toolbar,
  .App-toolbar-container,
  .FixedSideContainer_side_top .Island,
  .FixedSideContainer_side_left .Island,
  .dropdown-menu,
  .popover,
  .color-picker,
  .panelColumn
) {
  border-color: var(--entry-canvas-ui-border) !important;
  background: color-mix(in srgb, var(--entry-canvas-ui-bg) 94%, transparent) !important;
  color: var(--entry-canvas-ui-text) !important;
  box-shadow: none !important;
}

html[data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw :is(button, [role="button"]) {
  background-image: none !important;
  box-shadow: none !important;
  color: var(--entry-canvas-ui-text) !important;
  font-weight: inherit !important;
}

html[data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw :is(
  .ToolIcon__icon,
  .ToolIcon_type_button
) {
  border-color: transparent !important;
  background-color: transparent !important;
  color: var(--entry-canvas-ui-text) !important;
}

html[data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw :is(
  .ToolIcon__icon:hover,
  .ToolIcon_type_button:hover
) {
  background-color: var(--entry-canvas-ui-hover) !important;
  color: var(--entry-canvas-ui-text) !important;
}

html[data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw :is(
  .ToolIcon__icon[aria-pressed="true"],
  .ToolIcon__icon[aria-selected="true"],
  .ToolIcon__icon--selected,
  .ToolIcon_type_button--show
) {
  border-color: var(--entry-canvas-ui-border) !important;
  background-color: var(--entry-canvas-ui-selected) !important;
  color: var(--entry-canvas-ui-text) !important;
  box-shadow: inset 0 0 0 1px var(--entry-canvas-ui-border) !important;
}

html[data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw :is(
  label,
  legend,
  .label,
  .panelColumn,
  .color-picker__label,
  .ToolIcon__keybinding
) {
  color: var(--entry-canvas-ui-muted) !important;
}

html[data-theme-accent="white"] :is(.entry-study-canvas-editor, .entry-study-canvas-viewer) .excalidraw :is(input, select, textarea) {
  border-color: var(--entry-canvas-ui-border) !important;
  background-color: var(--entry-canvas-ui-raised) !important;
  color: var(--entry-canvas-ui-text) !important;
}

/* Theme study-action color: every real study/practice button matches Library Study Mode. */
html[data-theme-accent] {
  --theme-study-button-bg: var(--study-accent);
  --theme-study-button-hover: var(--button-study-hover, color-mix(in srgb, var(--study-accent) 78%, white 22%));
  --theme-study-button-text: var(--study-text);
}

html[data-theme-accent="white"] {
  --theme-study-button-bg: var(--study-action-bg, var(--study-accent));
  --theme-study-button-hover: var(--study-action-hover, var(--button-study-hover, color-mix(in srgb, var(--study-accent) 78%, white 22%)));
  --theme-study-button-text: var(--study-action-text, var(--study-text));
}

html[data-theme-accent="black"] {
  --theme-study-button-bg: #666666;
  --theme-study-button-hover: #535353;
  --theme-study-button-text: #ffffff;
}

html[data-theme="dark"][data-theme-accent="black"] {
  --theme-study-button-bg: #a6a6a6;
  --theme-study-button-hover: #c4c4c4;
  --theme-study-button-text: #050505;
}

html[data-theme-accent] :is(
  #libraryStudyModeBtn.btn-study,
  #startStudyTimerBtn.btn-study,
  #repeatWrongQuizBtn.btn-study,
  #anatomyQuizRightBtn.btn-study
),
html[data-theme-accent] #tab-quiz .quiz-setup-buttons #quizSetupStudyBtn.btn-study.quiz-action-button,
html[data-theme-accent] #tab-quiz .quiz-toolbar-actions #quizStudySetBtn.btn-study.quiz-action-button {
  background: var(--theme-study-button-bg) !important;
  border-color: var(--theme-study-button-bg) !important;
  color: var(--theme-study-button-text) !important;
  box-shadow: none !important;
}

html[data-theme-accent] :is(
  #libraryStudyModeBtn.btn-study,
  #startStudyTimerBtn.btn-study,
  #repeatWrongQuizBtn.btn-study,
  #anatomyQuizRightBtn.btn-study
):hover,
html[data-theme-accent] :is(
  #libraryStudyModeBtn.btn-study,
  #startStudyTimerBtn.btn-study,
  #repeatWrongQuizBtn.btn-study,
  #anatomyQuizRightBtn.btn-study
):focus-visible,
html[data-theme-accent] #tab-quiz .quiz-setup-buttons #quizSetupStudyBtn.btn-study.quiz-action-button:hover,
html[data-theme-accent] #tab-quiz .quiz-setup-buttons #quizSetupStudyBtn.btn-study.quiz-action-button:focus-visible,
html[data-theme-accent] #tab-quiz .quiz-toolbar-actions #quizStudySetBtn.btn-study.quiz-action-button:hover,
html[data-theme-accent] #tab-quiz .quiz-toolbar-actions #quizStudySetBtn.btn-study.quiz-action-button:focus-visible {
  background: var(--theme-study-button-hover) !important;
  border-color: var(--theme-study-button-hover) !important;
  color: var(--theme-study-button-text) !important;
}

html[data-theme-accent] #tab-quiz :is(
  #quizSetupStudyBtn.btn-study.quiz-action-button,
  #quizStudySetBtn.btn-study.quiz-action-button
) .quiz-button-icon {
  color: currentColor !important;
}

html[data-theme-accent] #tab-quiz .quiz-setup-buttons #quizSetupStudyBtn.btn-study.quiz-action-button {
  justify-content: center !important;
  gap: 8px !important;
  min-width: 176px !important;
  padding-inline: clamp(16px, 1.4vw, 22px) !important;
  overflow: visible !important;
}

html[data-theme-accent] #tab-quiz .quiz-setup-buttons #quizSetupStudyBtn.btn-study.quiz-action-button > span {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Official Google marks: keep product marks in their original colors across themes. */
.google-drive-logo-mark,
.google-g-logo-mark,
.google-oauth-icon svg,
.import-card-icon-drive svg,
.save-action-icon-drive svg,
.drive-libraries-logo svg,
.drive-chooser-logo svg {
  color: initial !important;
  filter: none !important;
  opacity: 1 !important;
  forced-color-adjust: none;
}

.google-drive-logo-mark .drive-mark-yellow,
.import-card-icon-drive .drive-mark-yellow,
.save-action-icon-drive .drive-mark-yellow,
.drive-libraries-logo .drive-mark-yellow,
.drive-chooser-logo .drive-mark-yellow {
  fill: #fbbc04 !important;
}

.google-drive-logo-mark .drive-mark-green,
.import-card-icon-drive .drive-mark-green,
.save-action-icon-drive .drive-mark-green,
.drive-libraries-logo .drive-mark-green,
.drive-chooser-logo .drive-mark-green {
  fill: #34a853 !important;
}

.google-drive-logo-mark .drive-mark-blue,
.import-card-icon-drive .drive-mark-blue,
.save-action-icon-drive .drive-mark-blue,
.drive-libraries-logo .drive-mark-blue,
.drive-chooser-logo .drive-mark-blue {
  fill: #4285f4 !important;
}

.google-drive-logo-mark .drive-mark-core,
.import-card-icon-drive .drive-mark-core,
.save-action-icon-drive .drive-mark-core,
.drive-libraries-logo .drive-mark-core,
.drive-chooser-logo .drive-mark-core {
  fill: #ffffff !important;
}

.drive-chooser-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.drive-chooser-logo {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  border: 1px solid var(--theme-ui-panel-border, var(--line));
  background: var(--theme-ui-icon-bg, var(--surface-elevated));
}

.drive-chooser-logo svg {
  width: 30px;
  height: 30px;
}