/* AnkiDroid web — colours and metrics follow AnkiDroid's theme_light/dark/black.xml */

:root,
:root[data-theme="light"] {
  --appbar: #03a9f4;
  --primary: #03a9f4;
  --accent: #455a64;
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #000000;
  --text-2: #616161;
  --text-disabled: #8f8f8f;
  --divider: #0000001f;
  --new: #303f9f;
  --learn: #d32f2f;
  --review: #2e7d32;
  --zero: #0000001f;
  --buried: #858585;
  --filtered: #2222bb;
  --current-deck: #ececec;
  --again: #d32f2f;
  --again-p: #f44336;
  --hard: #455a64;
  --hard-p: #b0bec5;
  --good: #4caf50;
  --good-p: #a5d6a7;
  --easy: #03a9f4;
  --easy-p: #81d4fa;
  --btn-text: #ffffff;
  --btn-border: transparent;
  --topbar: #b3e5fc;
  --max-timer: #f44336;
  --fab: #0288d1;
  --fab-p: #01579b;
  --drawer-text: #000000de;
  --drawer-checked: #03a9f4;
  --drawer-checked-bg: #e8e8e8;
  --popup-bg: #ffffff;
  --dialog-bg: #ffffff;
  --snackbar-bg: #424242;
  --snackbar-action: #4fc3f7;
  --row-suspended: #ffffb2;
  --row-buried: #ffce7c;
  --row-marked: #d9b2e9;
  --row-selected: #ffbb9999;
  --row-divider: #cccccc;
  --toolbar-format-bg: #d6d7d7;
  --toolbar-format-icon: #000000;
  --input-line: #8f8f8f;
  --ripple: rgba(0, 0, 0, 0.1);
  --scrim: rgba(0, 0, 0, 0.5);
  --card-bg: #ffffff;
  --chip-bg: #eeeeee;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --appbar: #3d3d3d;
  --primary: #42a5f5;
  --accent: #42a5f5;
  --bg: #303030;
  --surface: #303030;
  --text: #ffffff;
  --text-2: #ffffffb2;
  --text-disabled: #ffffff80;
  --divider: #ffffff1f;
  --new: #9fa8da;
  --learn: #ef9a9a;
  --review: #a5d6a7;
  --zero: #404040;
  --buried: #fcfcfc;
  --filtered: #03a9f4;
  --current-deck: #393939;
  --again: #c62828;
  --again-p: #f44336;
  --hard: #37474f;
  --hard-p: #546e7a;
  --good: #2e7d32;
  --good-p: #4caf50;
  --easy: #0277bd;
  --easy-p: #03a9f4;
  --btn-text: #ffffff;
  --btn-border: transparent;
  --topbar: #424242;
  --max-timer: #e57373;
  --fab: #0288d1;
  --fab-p: #01579b;
  --drawer-text: #ffffffde;
  --drawer-checked: #42a5f5;
  --drawer-checked-bg: #99999933;
  --popup-bg: #434343;
  --dialog-bg: #303030;
  --row-suspended: #616161;
  --row-buried: #612b09;
  --row-marked: #7e57c2;
  --row-selected: #55555566;
  --row-divider: #ffffff33;
  --toolbar-format-bg: #616161;
  --toolbar-format-icon: #ffffff;
  --input-line: #ffffffb2;
  --ripple: rgba(255, 255, 255, 0.12);
  --card-bg: #303030;
  --chip-bg: #424242;
  color-scheme: dark;
}

:root[data-theme="black"] {
  --appbar: #000000;
  --primary: #42a5f5;
  --accent: #2196f3;
  --bg: #000000;
  --surface: #000000;
  --text: #ffffff;
  --text-2: #ffffffb2;
  --text-disabled: #ffffff80;
  --divider: #ffffff26;
  --new: #1e88e5;
  --learn: #ef5350;
  --review: #66bb6a;
  --zero: #202020;
  --buried: #fcfcfc;
  --filtered: #03a9f4;
  --current-deck: #1a1a1a;
  --again: #000000;
  --again-p: #444444;
  --hard: #000000;
  --hard-p: #444444;
  --good: #000000;
  --good-p: #444444;
  --easy: #000000;
  --easy-p: #444444;
  --btn-text: #ffffff;
  --btn-border: #505050;
  --again-text: #ef5350;
  --good-text: #66bb6a;
  --easy-text: #1976d2;
  --topbar: #000000;
  --max-timer: #e57373;
  --fab: #303030;
  --fab-p: #303030c8;
  --drawer-text: #ffffffde;
  --drawer-checked: #42a5f5;
  --drawer-checked-bg: #99999933;
  --popup-bg: #252525;
  --dialog-bg: #151515;
  --row-suspended: #616161;
  --row-buried: #612b09;
  --row-marked: #7e57c2;
  --row-selected: #55555566;
  --row-divider: #ffffff33;
  --toolbar-format-bg: #303030;
  --toolbar-format-icon: #ffffff;
  --input-line: #ffffffb2;
  --ripple: rgba(255, 255, 255, 0.14);
  --card-bg: #000000;
  --chip-bg: #252525;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  overscroll-behavior: none;
}

body {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--primary);
}

svg {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
}

[hidden] {
  display: none !important;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------- toolbar */

.toolbar {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 4px 0 4px;
  padding-left: max(4px, env(safe-area-inset-left));
  padding-right: max(4px, env(safe-area-inset-right));
  background: var(--appbar);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 3;
  position: relative;
}

.toolbar .title-wrap {
  flex: 1;
  min-width: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.toolbar .icon-btn + .title-wrap {
  padding-left: 20px;
}

.toolbar .title {
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.toolbar .subtitle {
  font-size: 14px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toolbar .actions {
  display: flex;
  align-items: center;
}

.toolbar input.search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 18px;
  padding: 0 8px;
}

.toolbar input.search::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.icon-btn {
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  padding: 0;
  position: relative;
  flex: none;
}

.icon-btn:active,
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.icon-btn:disabled {
  opacity: 0.4;
}

.surface .icon-btn:hover,
.surface .icon-btn:active {
  background: var(--ripple);
}

.badge-dot::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5722;
}

.spin svg {
  animation: spin 1s linear infinite;
}

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

/* -------------------------------------------------------------- drawer */

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.drawer-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(280px, 85vw);
  background: var(--surface);
  z-index: 21;
  transform: translateX(-105%);
  transition: transform 0.22s ease-out;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
  padding-bottom: env(safe-area-inset-bottom);
}

.drawer.open {
  transform: none;
}

.drawer-header {
  height: calc(150px + env(safe-area-inset-top));
  background: #455a64 url("/static/icons/nav_drawer_logo.png") center / cover no-repeat;
  flex: none;
  position: relative;
}

:root[data-theme="dark"] .drawer-header {
  background-image: url("/static/icons/nav_drawer_logo_dark_theme.png");
}

:root[data-theme="black"] .drawer-header {
  background-image: url("/static/icons/nav_drawer_logo_black_theme.png");
}

.drawer-header .who {
  position: absolute;
  left: 16px;
  bottom: 10px;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.drawer nav {
  padding: 8px 0;
  overflow-y: auto;
}

.drawer-item {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  gap: 32px;
  color: var(--drawer-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.drawer-item svg {
  opacity: 0.7;
}

.drawer-item.checked {
  color: var(--drawer-checked);
  background: var(--drawer-checked-bg);
}

.drawer-item.checked svg {
  opacity: 1;
}

.drawer-item:hover {
  background: var(--ripple);
}

.drawer hr {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 8px 0;
}

/* ---------------------------------------------------------- deck list */

.deck-list {
  padding-bottom: 72px;
}

.deck-row {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline-start: 24px;
  padding-inline-end: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  position: relative;
}

.deck-row.has-subdecks {
  padding-inline-start: 0;
}

.deck-row:active,
.deck-row:hover {
  background: var(--ripple);
}

.deck-row.current {
  background: var(--current-deck);
}

.deck-row .indent {
  flex: none;
}

.deck-row .expander {
  width: 48px;
  height: 48px;
  padding: 12px;
  flex: none;
  border: none;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 50%;
}

.deck-row .expander.invisible {
  visibility: hidden;
}

.deck-row .name {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 48px;
  display: flex;
  align-items: center;
  word-break: break-word;
}

.deck-row .name span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.deck-row.filtered .name {
  color: var(--filtered);
}

.deck-row .counts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 70px;
  min-height: 48px;
  font-size: 14px;
  padding-inline-end: 6px;
  flex: none;
}

.deck-row .counts span {
  padding-inline-end: 5px;
  min-width: 1ch;
  text-align: right;
}

.c-new {
  color: var(--new);
}

.c-learn {
  color: var(--learn);
}

.c-review {
  color: var(--review);
}

.c-zero {
  color: var(--zero);
}

.studied-today {
  text-align: center;
  margin: 8px 8px 4px;
  color: var(--text-2);
  font-size: 14px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  height: 100%;
}

.empty-state img {
  width: 120px;
  margin-bottom: 24px;
}

.empty-state .big {
  font-size: 18px;
  margin-bottom: 8px;
}

.empty-state .small {
  color: var(--text-2);
  white-space: pre-line;
}

.pull-indicator {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  background: var(--popup-bg);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transform: translateY(-80px);
  pointer-events: none;
  opacity: 0;
}

.deck-split {
  flex: 1;
  display: flex;
  min-height: 0;
}

.deck-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

.deck-pane {
  display: none;
}

.deck-split.wide .deck-main {
  flex: 0 0 45%;
  max-width: 520px;
  border-right: 1px solid var(--divider);
}

.deck-split.wide .deck-pane {
  display: flex;
  flex: 1;
  min-width: 0;
  position: relative;
}

.deck-pane > .screen {
  position: relative;
  flex: 1;
}

.pane-toolbar {
  background: var(--bg);
  color: var(--text);
  box-shadow: none;
  height: 56px;
  padding-top: 0;
}

.pane-toolbar .icon-btn:hover {
  background: var(--ripple);
}

/* ----------------------------------------------------------------- FAB */

.fab-wrap {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.fab {
  height: 56px;
  min-width: 56px;
  border-radius: 16px;
  background: var(--fab);
  color: #fff;
  border: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: padding 0.15s;
}

.fab:active {
  background: var(--fab-p);
}

.fab .label {
  display: none;
}

.fab.extended .label {
  display: inline;
}

.fab.extended {
  padding: 0 20px 0 16px;
}

.fab-mini {
  height: 40px;
  border-radius: 12px;
  padding: 0 16px 0 12px;
  gap: 8px;
}

.fab-mini svg {
  width: 20px;
  height: 20px;
}

.fab-mini .label {
  display: inline;
}

.fab-speed {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.fab-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 5;
}

:root[data-theme="light"] .fab-scrim,
:root:not([data-theme]) .fab-scrim {
  background: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------- study options */

.study-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 32px;
  min-height: 100%;
}

.study-options .deck-title {
  font-size: 28px;
  text-align: center;
  margin: 8px 0 16px;
  word-break: break-word;
}

.study-options .grid {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  font-size: 16px;
  margin-bottom: 12px;
}

.study-options .grid .lbl {
  text-align: end;
}

.study-options .totals {
  color: var(--text-2);
  font-size: 14px;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 16px;
}

.study-options .desc {
  margin: 20px 0;
  max-width: 600px;
  width: 100%;
  overflow-wrap: break-word;
  text-align: center;
}

.study-options .desc img {
  max-width: 100%;
}

.study-options .spacer {
  flex: 1;
}

.study-options .congrats {
  text-align: center;
  max-width: 520px;
  margin: 12px 0;
  line-height: 1.5;
}

.study-options .congrats h3 {
  margin: 0 0 8px;
}

.btn {
  min-height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-transform: uppercase;
}

.btn:active {
  filter: brightness(0.9);
}

.btn:disabled {
  opacity: 0.5;
}

.btn.study {
  min-width: 200px;
  min-height: 48px;
  margin-top: 16px;
  font-size: 16px;
}

.btn.text {
  background: none;
  color: var(--primary);
  padding: 0 12px;
  border-radius: 4px;
}

.btn.text:hover {
  background: var(--ripple);
}

.btn.outlined {
  background: none;
  color: var(--primary);
  border: 1px solid var(--divider);
}

/* ------------------------------------------------------------ reviewer */

.reviewer .topbar {
  flex: none;
  background: var(--topbar);
  padding: 2px 16px 3px;
  display: flex;
  align-items: center;
  font-size: 14px;
  min-height: 22px;
  gap: 8px;
}

.reviewer .topbar .counts {
  display: flex;
  gap: 8px;
}

.reviewer .topbar .counts .cur {
  text-decoration: underline;
}

.reviewer .topbar .mid {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.reviewer .topbar .mid svg {
  width: 16px;
  height: 16px;
}

.reviewer .topbar .timer {
  font-variant-numeric: tabular-nums;
}

.reviewer .topbar .timer.max {
  color: var(--max-timer);
}

.reviewer .topbar .eta {
  color: var(--text-2);
}

.card-area {
  flex: 1;
  position: relative;
  background: var(--card-bg);
  overflow: hidden;
}

.card-area iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

.whiteboard {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
}

.answer-area {
  flex: none;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
}

.voice-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-top: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text);
}

.voice-bar .icon-btn.on {
  color: #d32f2f;
}

.type-answer-bar {
  padding: 4px 8px;
}

.type-answer-bar input {
  width: 100%;
  height: 44px;
  border: none;
  border-bottom: 2px solid var(--primary);
  background: transparent;
  outline: none;
  font-size: 18px;
  font-family: "Noto Sans Mono", monospace;
  padding: 0 4px;
}

.show-answer {
  width: 100%;
  height: 48px;
  border: none;
  background: var(--hard);
  color: var(--btn-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-top: 1px solid var(--btn-border);
}

.show-answer:active {
  background: var(--hard-p);
}

.ease-buttons {
  display: flex;
  height: 48px;
}

.ease-buttons button {
  flex: 1;
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 2px;
  min-width: 0;
}

.ease-buttons .ivl {
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ease-buttons .lbl {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.ease-buttons .again {
  background: var(--again);
  color: var(--again-text, var(--btn-text));
}

.ease-buttons .again:active {
  background: var(--again-p);
}

.ease-buttons .hard {
  background: var(--hard);
}

.ease-buttons .hard:active {
  background: var(--hard-p);
}

.ease-buttons .good {
  background: var(--good);
  color: var(--good-text, var(--btn-text));
}

.ease-buttons .good:active {
  background: var(--good-p);
}

.ease-buttons .easy {
  background: var(--easy);
  color: var(--easy-text, var(--btn-text));
}

.ease-buttons .easy:active {
  background: var(--easy-p);
}

.answer-area.top {
  order: -1;
}

.flag-1 {
  color: #ff0000;
}

.flag-2 {
  color: #ff9800;
}

.flag-3 {
  color: #057a05;
}

.flag-4 {
  color: #1976d2;
}

.flag-5 {
  color: #ff82ee;
}

.flag-6 {
  color: #00d1b5;
}

.flag-7 {
  color: #9649dd;
}

.wb-toolbar {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--popup-bg);
  border-radius: 24px;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  color: var(--text);
}

.wb-toolbar .swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin: 10px;
  border: 2px solid var(--divider);
  cursor: pointer;
}

.wb-toolbar .icon-btn.on {
  background: var(--ripple);
  color: var(--primary);
}

/* ------------------------------------------------------------- browser */

.browser-header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--row-divider);
  background: var(--bg);
  flex: none;
  font-size: 14px;
  font-weight: 500;
}

.browser-header .col,
.browser-row .col {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-header .col {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--text-2);
}

.browser-header .col svg {
  width: 16px;
  height: 16px;
}

.browser-header .col.sorted {
  color: var(--text);
}

.browser-header .sel-toggle {
  width: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: pointer;
}

.browser-row {
  font-size: calc(14px * var(--browser-font-scale, 1)) !important;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--row-divider);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  min-height: 48px;
}

.browser-row .col {
  align-self: flex-start;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.browser-row .sel {
  width: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.browser-row.COLOR_SUSPENDED {
  background: var(--row-suspended);
}

.browser-row.COLOR_BURIED {
  background: var(--row-buried);
}

.browser-row.COLOR_MARKED {
  background: var(--row-marked);
}

.browser-row.COLOR_FLAG_RED {
  background: #ff4747;
}

.browser-row.COLOR_FLAG_ORANGE {
  background: #ffb647;
}

.browser-row.COLOR_FLAG_GREEN {
  background: #6ff06f;
}

.browser-row.COLOR_FLAG_BLUE {
  background: #5289ff;
}

.browser-row.COLOR_FLAG_PINK {
  background: #ff99f1;
}

.browser-row.COLOR_FLAG_TURQUOISE {
  background: #85ffef;
}

.browser-row.COLOR_FLAG_PURPLE {
  background: #c398ec;
}

:root[data-theme="dark"] .browser-row[class*="COLOR_FLAG"],
:root[data-theme="black"] .browser-row[class*="COLOR_FLAG"] {
  color: #000;
}

.browser-row.selected {
  box-shadow: inset 0 0 0 999px var(--row-selected);
}

:root[data-theme="light"] .browser-row.selected {
  box-shadow: inset 0 0 0 999px rgba(3, 169, 244, 0.18);
}

.browser-row.deleted {
  opacity: 0.4;
  text-decoration: line-through;
}

.deck-spinner {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  max-width: 100%;
}

.deck-spinner .title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -------------------------------------------------------------- editor */

.editor-body {
  padding: 8px 16px 24px;
}

.editor-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: 8px;
}

.editor-meta .lbl {
  color: var(--text-2);
  font-size: 14px;
}

.spinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border-bottom: 1px solid var(--input-line);
  cursor: pointer;
  padding: 4px 0;
  gap: 4px;
}

.spinner svg {
  color: var(--text-2);
}

.field-row {
  margin-top: 12px;
}

.field-head {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.field-head .fname {
  flex: 1;
  font-size: 13px;
  color: var(--text-2);
}

.field-head .icon-btn {
  width: 36px;
  height: 36px;
  color: var(--text-2);
}

.field-head .icon-btn svg {
  width: 20px;
  height: 20px;
}

.field-head .icon-btn.on {
  color: var(--primary);
}

.field-edit {
  min-height: 44px;
  border-bottom: 1px solid var(--input-line);
  padding: 8px 2px;
  outline: none;
  overflow-wrap: break-word;
  font-size: 18px;
  line-height: 1.4;
}

.field-edit:focus {
  border-bottom: 2px solid var(--primary);
  padding-bottom: 7px;
}

.field-edit img {
  max-width: 100%;
  max-height: 200px;
}

.field-edit.html-mode {
  font-family: "Noto Sans Mono", monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

textarea.field-edit {
  width: 100%;
  resize: vertical;
  border-top: none;
  border-left: none;
  border-right: none;
  background: transparent;
}

.field-edit.dupe {
  background: rgba(255, 0, 0, 0.12);
}

.editor-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  min-height: 44px;
  text-align: left;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-btn:active {
  background: var(--ripple);
}

.format-toolbar {
  flex: none;
  height: calc(52px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--toolbar-format-bg);
  color: var(--toolbar-format-icon);
  display: flex;
  overflow-x: auto;
  align-items: center;
}

.format-toolbar .icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}

.format-toolbar .icon-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.format-toolbar .txt {
  font-weight: bold;
  font-size: 15px;
}

.dupe-warning {
  color: #d32f2f;
  font-size: 13px;
  margin-top: 4px;
}

/* -------------------------------------------------- settings / lists */

.list-item {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 16px;
  gap: 16px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.list-item:hover,
.list-item:active {
  background: var(--ripple);
}

.list-item .li-icon {
  color: var(--text-2);
  width: 40px;
  display: flex;
  justify-content: center;
}

.list-item .li-text {
  flex: 1;
  min-width: 0;
}

.list-item .li-title {
  font-size: 16px;
}

.list-item .li-sub {
  font-size: 14px;
  color: var(--text-2);
  margin-top: 2px;
  overflow-wrap: break-word;
}

.list-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.pref-category {
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  padding: 24px 16px 8px 72px;
}

.switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex: none;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch .track {
  position: absolute;
  inset: 3px 0;
  border-radius: 7px;
  background: var(--text-disabled);
  transition: background 0.15s;
}

.switch .thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fafafa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s;
}

.switch input:checked ~ .track {
  background: color-mix(in srgb, var(--primary) 50%, transparent);
}

.switch input:checked ~ .thumb {
  transform: translateX(16px);
  background: var(--primary);
}

.searchbar {
  margin: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 24px;
  background: var(--chip-bg);
  padding: 0 12px;
  height: 44px;
  color: var(--text-2);
}

.searchbar input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  color: var(--text);
}

/* ------------------------------------------------- dialogs and menus */

.dialog-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade 0.12s ease-out;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.dialog {
  background: var(--dialog-bg);
  border-radius: 8px;
  min-width: min(280px, 100%);
  max-width: 560px;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 11px 15px rgba(0, 0, 0, 0.2), 0 24px 38px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  animation: pop 0.15s ease-out;
}

@keyframes pop {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
}

.dialog .d-title {
  font-size: 20px;
  font-weight: 500;
  padding: 24px 24px 12px;
  overflow-wrap: break-word;
}

.dialog .d-body {
  padding: 0 24px 16px;
  overflow-y: auto;
  color: var(--text-2);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.dialog .d-body.list {
  padding: 0 0 8px;
  color: var(--text);
}

.dialog .d-body.flush {
  padding: 0;
}

.dialog .d-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}

.dialog .d-actions .spacer {
  flex: 1;
}

.dialog .d-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 0 24px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dialog .d-item:hover,
.dialog .d-item:active {
  background: var(--ripple);
}

.dialog .d-item.selected {
  color: var(--primary);
  font-weight: 500;
}

.dialog .d-item .radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--text-2);
  border-radius: 50%;
  flex: none;
  position: relative;
}

.dialog .d-item.selected .radio {
  border-color: var(--primary);
}

.dialog .d-item.selected .radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
}

.dialog .d-item .d-sub {
  font-size: 13px;
  color: var(--text-2);
}

.text-field {
  display: block;
  width: 100%;
  margin: 8px 0;
}

.text-field label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 2px;
}

.text-field input,
.text-field textarea,
.text-field select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--input-line);
  background: transparent;
  padding: 8px 0;
  outline: none;
  font-size: 16px;
  color: var(--text);
}

.text-field select option {
  background: var(--dialog-bg);
}

.text-field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.text-field input:focus,
.text-field textarea:focus,
.text-field select:focus {
  border-bottom: 2px solid var(--primary);
  padding-bottom: 7px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  color: var(--text);
  cursor: pointer;
}

.check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.popup-menu {
  position: fixed;
  z-index: 50;
  background: var(--popup-bg);
  border-radius: 4px;
  min-width: 180px;
  max-width: 300px;
  padding: 8px 0;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  animation: pop 0.12s ease-out;
  transform-origin: top right;
  color: var(--text);
}

.popup-menu .mi {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 16px;
}

.popup-menu .mi:hover {
  background: var(--ripple);
}

.popup-menu .mi.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.popup-menu .mi .sub-arrow {
  margin-left: auto;
  color: var(--text-2);
}

.popup-menu .mi .check {
  margin-left: auto;
  color: var(--primary);
}

.popup-menu .mi-icon {
  color: var(--text-2);
}

.popup-menu .mi-icon.flag-0 {
  color: var(--text-2);
}

.popup-menu .mi-icon.flag-1 { color: #ff0000; }
.popup-menu .mi-icon.flag-2 { color: #ff9800; }
.popup-menu .mi-icon.flag-3 { color: #057a05; }
.popup-menu .mi-icon.flag-4 { color: #1976d2; }
.popup-menu .mi-icon.flag-5 { color: #ff82ee; }
.popup-menu .mi-icon.flag-6 { color: #00d1b5; }
.popup-menu .mi-icon.flag-7 { color: #9649dd; }

.popup-menu hr {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 8px 0;
}

.snackbar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--snackbar-offset, 0px) + env(safe-area-inset-bottom));
  pointer-events: none;
  transform: translateX(-50%);
  background: var(--snackbar-bg, #424242);
  color: #fff;
  border-radius: 8px;
  padding: 6px 8px 6px 16px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 60;
  max-width: min(600px, calc(100% - 16px));
  width: max-content;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  animation: snack 0.2s ease-out;
}

@keyframes snack {
  from {
    transform: translate(-50%, 30px);
    opacity: 0;
  }
}

.snackbar .msg {
  flex: 1;
  padding: 8px 0;
}

.snackbar button {
  pointer-events: auto;
  background: none;
  border: none;
  color: var(--snackbar-action, #4fc3f7);
  font-weight: 500;
  text-transform: uppercase;
  padding: 8px;
  cursor: pointer;
  font-size: 14px;
}

.progress-linear {
  height: 4px;
  background: color-mix(in srgb, var(--primary) 25%, transparent);
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  margin: 12px 0;
}

.progress-linear::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--primary);
  animation: indet 1.2s infinite ease-in-out;
}

@keyframes indet {
  from {
    left: -40%;
  }
  to {
    left: 100%;
  }
}

.circular {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary);
  animation: spin2 0.9s linear infinite;
  margin: 32px auto;
}

@keyframes spin2 {
  to {
    transform: rotate(360deg);
  }
}

.loading-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ------------------------------------------------------------ webpage */

.webpage-frame {
  flex: 1;
  border: none;
  width: 100%;
  background: var(--bg);
}

/* --------------------------------------------------------------- login */

.login {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
}

.login .logo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  display: block;
  margin: 24px auto 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.login h1 {
  font-size: 22px;
  text-align: center;
  font-weight: 500;
  margin: 0 0 8px;
}

.login p.hint {
  color: var(--text-2);
  text-align: center;
  font-size: 14px;
  margin: 0 0 16px;
}

.login .error {
  color: #d32f2f;
  font-size: 14px;
  min-height: 20px;
  margin: 8px 0;
}

.login .btn {
  width: 100%;
  margin-top: 8px;
}

details.advanced summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: 14px;
  margin-top: 12px;
}

/* ------------------------------------------------------------ helpers */

.muted {
  color: var(--text-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: var(--chip-bg);
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--text);
}

.chip.on {
  border-color: var(--primary);
  color: var(--primary);
}

.chip svg {
  width: 18px;
  height: 18px;
}

pre.report {
  white-space: pre-wrap;
  font-size: 13px;
  max-height: 50vh;
  overflow: auto;
  color: var(--text);
}

.code-area {
  width: 100%;
  min-height: 240px;
  font-family: "Noto Sans Mono", ui-monospace, monospace;
  font-size: 13px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: var(--surface);
  padding: 8px;
  resize: vertical;
  color: var(--text);
}

.tabs {
  display: flex;
  background: var(--appbar);
  color: rgba(255, 255, 255, 0.7);
  flex: none;
  overflow-x: auto;
}

.tabs button {
  flex: 1;
  min-width: 90px;
  height: 48px;
  border: none;
  background: none;
  color: inherit;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tabs button.on {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 600px) {
  .deck-row .indent-unit {
    width: 24px;
  }
}

@media (hover: none) {
  .icon-btn:hover,
  .deck-row:hover,
  .list-item:hover,
  .drawer-item:hover,
  .popup-menu .mi:hover,
  .dialog .d-item:hover {
    background: none;
  }
  .drawer-item.checked:hover {
    background: var(--drawer-checked-bg);
  }
  .deck-row.current:hover {
    background: var(--current-deck);
  }
}

/* Accessibility → Remove animations */
.no-animations *,
.no-animations *::before,
.no-animations *::after {
  animation: none !important;
  transition: none !important;
}

/* Appearance → Background (deck list) */
.deck-main.has-background {
  background: var(--bg) center / cover no-repeat var(--deck-bg-image);
}

.deck-main.has-background .deck-row:not(.current) {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.deck-main.has-background .deck-row.current {
  background: color-mix(in srgb, var(--current-deck) 45%, transparent);
}

.kbd-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  color: var(--text);
  font-size: 14px;
}

.kbd-table kbd {
  justify-self: start;
  align-self: start;
  font-family: "Noto Sans Mono", ui-monospace, monospace;
  background: var(--chip-bg);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.kbd-table h4 {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--primary);
  font-size: 13px;
}

.offline-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(56px + env(safe-area-inset-top));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #b00020;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.offline-banner svg {
  width: 20px;
  height: 20px;
}