.history-wrapper {
  --history-surface: #ffffff;
  --history-surface-soft: #f3f9ff;
  --history-plate: rgba(255, 255, 255, 0.9);
  --history-line: #c5d9ea;
  --history-line-strong: #8eb3d2;
  --history-ink: #10293f;
  --history-muted: #4f6d84;
  --history-muted-strong: #3a5a73;
  --history-primary: #d77728;
  --history-primary-strong: #ad5615;
  --history-secondary: #1f3f61;
  --history-secondary-soft: rgba(31, 63, 97, 0.18);
  --history-primary-soft: rgba(215, 119, 40, 0.16);
  --history-danger: #b84f61;
  --history-danger-soft: rgba(184, 79, 97, 0.15);
  --history-shadow-lg: 0 20px 42px rgba(10, 30, 47, 0.14);
  --history-shadow-md: 0 12px 28px rgba(11, 35, 54, 0.11);
  --history-shadow-sm: 0 8px 18px rgba(8, 28, 45, 0.09);

  position: relative;
  isolation: isolate;
  width: min(100%, 1260px);
  margin: 1rem auto 2.4rem;
  display: grid;
  gap: 0.95rem;
  color: var(--history-ink);
}

.history-wrapper::before,
.history-wrapper::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(52px);
}

.history-wrapper::before {
  width: min(46vw, 540px);
  height: min(34vw, 380px);
  left: -8%;
  top: 4%;
  background: radial-gradient(circle, rgba(215, 119, 40, 0.18), transparent 72%);
}

.history-wrapper::after {
  width: min(38vw, 420px);
  height: min(30vw, 340px);
  right: -9%;
  bottom: 10%;
  background: radial-gradient(circle, rgba(31, 63, 97, 0.2), transparent 72%);
}

.history-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 0.9rem;
  border: 1px solid var(--history-line);
  border-radius: 22px;
  padding: 1.02rem;
  background:
    radial-gradient(circle at 8% -16%, rgba(215, 119, 40, 0.18), transparent 42%),
    radial-gradient(circle at 96% 120%, rgba(31, 63, 97, 0.16), transparent 46%),
    linear-gradient(156deg, #ffffff 0%, #f4f9ff 56%, #edf5fc 100%);
  box-shadow: var(--history-shadow-lg);
}

.history-hero-main {
  display: grid;
  align-content: start;
  gap: 0.48rem;
}

.history-kicker {
  margin: 0;
  display: inline-flex;
  width: fit-content;
  padding: 0.26rem 0.52rem;
  border-radius: 999px;
  border: 1px solid rgba(116, 167, 203, 0.48);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.68rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--history-muted-strong);
}

.history-title {
  margin: 0;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(1.44rem, 2.6vw, 2.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--history-ink);
}

.history-lead {
  margin: 0;
  max-width: 68ch;
  color: var(--history-muted);
  font-size: 0.95rem;
  line-height: 1.56;
}

.history-hero-tags {
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.history-hero-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.33rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(128, 176, 209, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 247, 255, 0.9));
  color: var(--history-muted-strong);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  font-weight: 760;
}

.history-metrics {
  display: grid;
  gap: 0.54rem;
  align-content: start;
}

.history-metric-card {
  border: 1px solid var(--history-line);
  border-radius: 14px;
  padding: 0.68rem 0.76rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 248, 255, 0.9)),
    var(--history-plate);
  box-shadow: var(--history-shadow-sm);
  display: grid;
  gap: 0.25rem;
}

.metric-label {
  font-size: 0.67rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 820;
  color: #53748d;
}

.metric-value {
  margin: 0;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1.11rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 760;
  color: var(--history-ink);
}

.metric-value--small {
  font-size: 0.86rem;
  word-break: break-word;
}

.history-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  border: 1px solid var(--history-line);
  border-radius: 16px;
  padding: 0.68rem 0.8rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(243, 249, 255, 0.89)),
    var(--history-plate);
  box-shadow: var(--history-shadow-sm);
}

.history-search {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(140, 181, 210, 0.62);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 248, 255, 0.94));
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  padding: 0 0.66rem;
  color: #4f6f87;
}

.history-search i {
  font-size: 0.79rem;
}

.history-search input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--history-ink);
  font-size: 0.84rem;
  font-weight: 670;
  outline: none;
}

.history-search input::placeholder {
  color: #6e8aa0;
}

.history-toolbar-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
}

.history-toolbar-note {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  color: var(--history-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.note-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.24rem 0.54rem;
  border-radius: 999px;
  border: 1px solid rgba(129, 176, 208, 0.52);
  background: rgba(255, 255, 255, 0.72);
  color: #2d6187;
  font-size: 0.71rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.clear-history-button {
  min-height: 40px;
  padding: 0.5rem 0.82rem;
  border-radius: 11px;
  border: 1px solid rgba(188, 108, 123, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 249, 250, 0.99), rgba(250, 238, 241, 0.99)),
    var(--history-danger-soft);
  color: #7f3543;
  box-shadow: var(--history-shadow-sm);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.clear-history-button:hover {
  transform: translateY(-1px);
  border-color: rgba(194, 92, 111, 0.74);
  box-shadow: 0 12px 22px rgba(111, 46, 58, 0.16);
  filter: saturate(1.03);
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 0.84rem;
}

.history-tile {
  position: relative;
  border: 1px solid var(--history-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% -20%, var(--history-secondary-soft), transparent 52%),
    radial-gradient(circle at 8% 120%, var(--history-primary-soft), transparent 48%),
    linear-gradient(168deg, var(--history-surface) 0%, var(--history-surface-soft) 100%);
  box-shadow: var(--history-shadow-md);
  padding: 0.8rem;
  display: grid;
  gap: 0.62rem;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.history-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.56);
  opacity: 0.45;
}

.history-tile:hover {
  transform: translateY(-2px);
  border-color: var(--history-line-strong);
  box-shadow: 0 16px 30px rgba(8, 29, 45, 0.17);
}

.history-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 130, 198, 0.24), 0 16px 30px rgba(8, 29, 45, 0.2);
}

.history-tile[hidden] {
  display: none;
}

.history-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.history-index {
  font-size: 0.65rem;
  line-height: 1;
  font-weight: 810;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a6489;
  border: 1px solid rgba(124, 167, 198, 0.52);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0.24rem 0.46rem;
}

.history-time {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: #608098;
  font-size: 0.7rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  font-weight: 760;
}

.history-word {
  margin: 0;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  color: var(--history-ink);
  font-size: 1.06rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}

.history-word-meta {
  display: flex;
  align-items: center;
}

.word-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.18rem 0.46rem;
  border-radius: 999px;
  border: 1px solid rgba(128, 175, 207, 0.44);
  background: rgba(255, 255, 255, 0.7);
  color: #456a85;
  font-size: 0.67rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 760;
}

.history-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.52rem;
}

.open-history-link {
  min-height: 34px;
  padding: 0.4rem 0.73rem;
  border-radius: 10px;
  border: 1px solid rgba(126, 178, 212, 0.68);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 248, 255, 0.94));
  color: #0d5a8d;
  font-size: 0.76rem;
  font-weight: 790;
  letter-spacing: 0.012em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

.open-history-link:hover {
  transform: translateY(-1px);
  border-color: #79b5dd;
  box-shadow: 0 10px 18px rgba(11, 74, 111, 0.14);
  filter: saturate(1.04);
}

.delete-history-button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(172, 202, 223, 0.58);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 255, 0.96));
  color: #5f7b91;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.delete-history-button:hover {
  transform: translateY(-1px);
  border-color: rgba(195, 111, 125, 0.72);
  background: linear-gradient(180deg, rgba(255, 245, 247, 0.98), rgba(250, 235, 239, 0.98));
  color: #9a3d4f;
}

.history-filter-empty {
  border: 1px solid var(--history-line);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 250, 255, 0.92)),
    var(--history-plate);
  box-shadow: var(--history-shadow-sm);
  padding: 0.96rem;
  text-align: center;
  display: grid;
  gap: 0.34rem;
}

.history-filter-empty h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--history-ink);
}

.history-filter-empty p {
  margin: 0;
  color: var(--history-muted);
  font-size: 0.86rem;
}

.empty-history {
  border: 1px solid var(--history-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% -16%, rgba(14, 113, 175, 0.17), transparent 50%),
    radial-gradient(circle at 90% 116%, rgba(24, 154, 143, 0.14), transparent 54%),
    linear-gradient(162deg, #ffffff 0%, #f4f9ff 56%, #ebf4fc 100%);
  box-shadow: var(--history-shadow-lg);
  padding: 1.3rem 1rem;
  text-align: center;
  display: grid;
  gap: 0.56rem;
  justify-items: center;
}

.empty-history h2 {
  margin: 0;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  color: var(--history-ink);
  font-size: clamp(1.2rem, 2vw, 1.56rem);
}

.empty-history p {
  margin: 0;
  color: var(--history-muted);
  font-size: 0.95rem;
  max-width: 56ch;
}

.start-search-link {
  min-height: 40px;
  padding: 0.55rem 0.92rem;
  border-radius: 11px;
  border: 1px solid rgba(138, 185, 214, 0.72);
  background: linear-gradient(180deg, #ffffff, #edf6fd);
  color: #0f5f93;
  text-decoration: none;
  font-size: 0.81rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.start-search-link:hover {
  transform: translateY(-1px);
  border-color: #79b5dd;
  box-shadow: 0 10px 20px rgba(12, 74, 112, 0.16);
}

.history-toast {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  max-width: min(360px, calc(100vw - 1.6rem));
  border-radius: 12px;
  border: 1px solid rgba(111, 165, 201, 0.46);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(243, 251, 255, 0.98));
  color: #164666;
  box-shadow: 0 14px 24px rgba(9, 27, 43, 0.18);
  padding: 0.62rem 0.74rem;
  font-size: 0.82rem;
  font-weight: 760;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 4500;
}

.history-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.history-toast.is-success {
  border-color: rgba(46, 164, 120, 0.5);
  color: #1b6b4b;
  background: linear-gradient(160deg, rgba(245, 255, 250, 0.99), rgba(235, 252, 244, 0.99));
}

.history-toast.is-error {
  border-color: rgba(191, 88, 88, 0.52);
  color: #7e2f35;
  background: linear-gradient(160deg, rgba(255, 246, 248, 0.99), rgba(255, 238, 241, 0.99));
}

html.dark-mode .history-wrapper,
body.dark-mode .history-wrapper {
  --history-surface: #121f2f;
  --history-surface-soft: #0f1a27;
  --history-plate: rgba(14, 29, 44, 0.9);
  --history-line: #3a5e7b;
  --history-line-strong: #5f90b8;
  --history-ink: #eaf4ff;
  --history-muted: #a5bfd7;
  --history-muted-strong: #b8d2ea;
  --history-primary: #63b7ff;
  --history-primary-strong: #3b8ecd;
  --history-secondary: #8fd2ff;
  --history-secondary-soft: rgba(99, 183, 255, 0.2);
  --history-primary-soft: rgba(99, 183, 255, 0.2);
  --history-danger: #e7a0ac;
  --history-danger-soft: rgba(231, 160, 172, 0.14);
  --history-shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.42);
  --history-shadow-md: 0 14px 30px rgba(0, 0, 0, 0.33);
  --history-shadow-sm: 0 10px 22px rgba(0, 0, 0, 0.28);
}

html.dark-mode .history-wrapper::before,
body.dark-mode .history-wrapper::before {
  background: radial-gradient(circle, rgba(99, 183, 255, 0.24), transparent 72%);
}

html.dark-mode .history-wrapper::after,
body.dark-mode .history-wrapper::after {
  background: radial-gradient(circle, rgba(99, 183, 255, 0.2), transparent 72%);
}

html.dark-mode .history-hero,
body.dark-mode .history-hero {
  background:
    radial-gradient(circle at 8% -16%, rgba(99, 183, 255, 0.24), transparent 42%),
    radial-gradient(circle at 96% 120%, rgba(99, 183, 255, 0.16), transparent 46%),
    linear-gradient(156deg, #16263a 0%, #101e2f 56%, #0c1826 100%);
}

html.dark-mode .history-kicker,
body.dark-mode .history-kicker {
  border-color: rgba(108, 167, 208, 0.48);
  background: rgba(18, 36, 54, 0.68);
  color: #cfe6fa;
}

html.dark-mode .history-hero-tag,
body.dark-mode .history-hero-tag {
  border-color: rgba(98, 156, 199, 0.52);
  background: linear-gradient(180deg, rgba(18, 34, 50, 0.94), rgba(14, 29, 44, 0.92));
  color: #d1e8fc;
}

html.dark-mode .history-metric-card,
body.dark-mode .history-metric-card {
  background: linear-gradient(180deg, rgba(24, 43, 61, 0.95), rgba(17, 34, 50, 0.94));
}

html.dark-mode .metric-label,
body.dark-mode .metric-label {
  color: #9cbad4;
}

html.dark-mode .history-toolbar,
body.dark-mode .history-toolbar {
  background: linear-gradient(180deg, rgba(22, 41, 59, 0.92), rgba(14, 28, 42, 0.9));
}

html.dark-mode .history-search,
body.dark-mode .history-search {
  border-color: rgba(95, 151, 192, 0.64);
  background: linear-gradient(180deg, rgba(20, 37, 54, 0.96), rgba(14, 30, 45, 0.94));
  color: #c8dff3;
}

html.dark-mode .history-search input,
body.dark-mode .history-search input {
  color: var(--history-ink);
}

html.dark-mode .history-search input::placeholder,
body.dark-mode .history-search input::placeholder {
  color: #8eafca;
}

html.dark-mode .note-chip,
body.dark-mode .note-chip {
  border-color: rgba(90, 145, 184, 0.58);
  background: rgba(19, 36, 54, 0.72);
  color: #c6def2;
}

html.dark-mode .clear-history-button,
body.dark-mode .clear-history-button {
  border-color: rgba(208, 133, 147, 0.54);
  background: linear-gradient(180deg, rgba(88, 52, 59, 0.95), rgba(71, 42, 47, 0.95));
  color: #ffe9ed;
}

html.dark-mode .history-tile,
body.dark-mode .history-tile {
  background:
    radial-gradient(circle at 92% -20%, rgba(99, 183, 255, 0.2), transparent 52%),
    radial-gradient(circle at 8% 120%, rgba(240, 154, 71, 0.15), transparent 48%),
    linear-gradient(168deg, #18283a 0%, #16130f 100%);
}

html.dark-mode .history-tile::after,
body.dark-mode .history-tile::after {
  border-color: rgba(164, 205, 233, 0.11);
}

html.dark-mode .history-index,
body.dark-mode .history-index {
  border-color: rgba(90, 145, 184, 0.6);
  color: #f2e1cd;
  background: rgba(19, 36, 54, 0.72);
}

html.dark-mode .history-time,
body.dark-mode .history-time {
  color: #9dbdd7;
}

html.dark-mode .word-meta-chip,
body.dark-mode .word-meta-chip {
  border-color: rgba(90, 145, 184, 0.56);
  background: rgba(20, 38, 56, 0.7);
  color: #cde2f5;
}

html.dark-mode .open-history-link,
body.dark-mode .open-history-link {
  border-color: rgba(95, 151, 192, 0.64);
  background: linear-gradient(180deg, rgba(18, 36, 53, 0.96), rgba(12, 27, 42, 0.95));
  color: #ecf6ff;
}

html.dark-mode .open-history-link:hover,
body.dark-mode .open-history-link:hover {
  border-color: rgba(128, 198, 236, 0.72);
  box-shadow: 0 10px 18px rgba(4, 20, 33, 0.34);
}

html.dark-mode .delete-history-button,
body.dark-mode .delete-history-button {
  border-color: rgba(93, 154, 196, 0.56);
  background: linear-gradient(180deg, rgba(17, 35, 52, 0.96), rgba(12, 27, 42, 0.96));
  color: #d6ebff;
}

html.dark-mode .delete-history-button:hover,
body.dark-mode .delete-history-button:hover {
  border-color: rgba(203, 131, 143, 0.72);
  background: linear-gradient(180deg, rgba(75, 45, 51, 0.96), rgba(61, 35, 41, 0.96));
  color: #ffd8de;
}

html.dark-mode .history-filter-empty,
body.dark-mode .history-filter-empty {
  background: linear-gradient(180deg, rgba(16, 33, 50, 0.94), rgba(11, 24, 38, 0.92));
}

html.dark-mode .empty-history,
body.dark-mode .empty-history {
  background:
    radial-gradient(circle at 10% -16%, rgba(99, 183, 255, 0.24), transparent 50%),
    radial-gradient(circle at 90% 116%, rgba(99, 183, 255, 0.2), transparent 54%),
    linear-gradient(162deg, #15283d 0%, #102033 56%, #0c1826 100%);
  backdrop-filter: blur(12px) saturate(128%);
}

html.dark-mode .start-search-link,
body.dark-mode .start-search-link {
  border-color: rgba(123, 193, 236, 0.68);
  background: linear-gradient(180deg, rgba(102, 189, 242, 0.95), rgba(53, 139, 198, 0.95));
  color: #fff8f1;
}

html.dark-mode .history-toast,
body.dark-mode .history-toast {
  border-color: rgba(90, 145, 184, 0.5);
  background: linear-gradient(160deg, rgba(31, 26, 22, 0.99), rgba(23, 20, 17, 0.99));
  color: #f7eadc;
}

@media (max-width: 980px) {
  .history-hero {
    grid-template-columns: 1fr;
  }

  .history-toolbar {
    grid-template-columns: 1fr;
  }

  .history-toolbar-right {
    flex-direction: column;
    align-items: stretch;
  }

  .history-toolbar-note {
    justify-content: center;
    text-align: center;
  }

  .clear-history-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .history-wrapper {
    margin-top: 0.9rem;
    gap: 0.78rem;
  }

  .history-hero,
  .history-toolbar,
  .history-tile,
  .empty-history,
  .history-filter-empty {
    border-radius: 14px;
  }

  .history-grid {
    grid-template-columns: 1fr;
  }

  .history-toolbar-note {
    font-size: 0.76rem;
  }
}

/* Keep history controls independent from global button system */
.history-wrapper .clear-history-button {
  border-radius: 11px !important;
}

.history-wrapper .delete-history-button {
  border-radius: 10px !important;
}

/* ==========================================================================
   History Glass Refresh
   Index-inspired glassmorphism pass
   ========================================================================== */
.history-wrapper {
  width: min(100%, 1120px);
  margin: 1rem auto 2.5rem;
  gap: 1rem;
}

.history-wrapper::before {
  width: min(58vw, 620px);
  height: min(48vw, 520px);
  left: -15%;
  top: -6%;
  filter: blur(66px);
  background: radial-gradient(circle at 44% 35%, rgba(217, 120, 36, 0.24), rgba(217, 120, 36, 0));
}

.history-wrapper::after {
  width: min(52vw, 560px);
  height: min(46vw, 500px);
  right: -14%;
  bottom: -10%;
  filter: blur(68px);
  background: radial-gradient(circle at 58% 42%, rgba(31, 63, 97, 0.24), rgba(31, 63, 97, 0));
}

.history-hero,
.history-toolbar,
.history-tile,
.history-filter-empty,
.empty-history,
.history-metric-card {
  border-color: rgba(165, 194, 216, 0.48);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(245, 250, 255, 0.64)),
    rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 18px 34px rgba(8, 30, 47, 0.14);
  backdrop-filter: blur(14px) saturate(118%);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
}

.history-hero {
  border-radius: 26px;
  padding: 1.14rem;
  background:
    radial-gradient(circle at 9% -18%, rgba(217, 120, 36, 0.16), transparent 44%),
    radial-gradient(circle at 98% 130%, rgba(31, 63, 97, 0.16), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(243, 250, 255, 0.66)),
    rgba(255, 255, 255, 0.6);
}

.history-title {
  letter-spacing: -0.025em;
}

.history-kicker {
  border-color: rgba(140, 178, 204, 0.56);
  background: rgba(255, 255, 255, 0.62);
}

.history-lead {
  max-width: 64ch;
}

.history-hero-tag {
  border-color: rgba(132, 176, 205, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(239, 248, 255, 0.64));
}

.history-metric-card {
  border-radius: 15px;
  padding: 0.72rem 0.8rem;
}

.history-toolbar {
  border-radius: 18px;
  grid-template-columns: minmax(250px, 420px) minmax(0, 1fr);
  padding: 0.72rem 0.88rem;
}

.history-search {
  min-height: 44px;
  border-color: rgba(131, 174, 205, 0.58);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(242, 249, 255, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.history-search input {
  font-weight: 640;
}

.note-chip {
  border-color: rgba(127, 175, 207, 0.56);
  background: rgba(255, 255, 255, 0.66);
}

.history-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.92rem;
}

.history-tile {
  border-radius: 18px;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 94% -20%, rgba(217, 120, 36, 0.16), transparent 52%),
    radial-gradient(circle at 8% 122%, rgba(31, 63, 97, 0.14), transparent 50%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(242, 249, 255, 0.68)),
    rgba(255, 255, 255, 0.56);
}

.history-tile::after {
  border-color: rgba(255, 255, 255, 0.72);
}

.history-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 171, 205, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 22px 38px rgba(8, 29, 46, 0.18);
}

.history-index,
.word-meta-chip {
  background: rgba(255, 255, 255, 0.62);
}

.clear-history-button {
  min-height: 42px;
  border-color: rgba(196, 109, 125, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 252, 253, 0.94), rgba(248, 240, 243, 0.84)),
    rgba(255, 255, 255, 0.62);
}

.open-history-link,
.start-search-link {
  min-height: 36px;
  border-color: rgba(126, 179, 213, 0.68);
  background:
    linear-gradient(122deg, #e58b35, #d47526 52%, #b95d1c 100%),
    rgba(255, 255, 255, 0.8);
  color: #fff;
  box-shadow: 0 12px 22px rgba(112, 60, 22, 0.22);
}

.open-history-link:hover,
.start-search-link:hover {
  border-color: rgba(158, 98, 54, 0.68);
  box-shadow: 0 14px 26px rgba(106, 53, 17, 0.28);
}

.delete-history-button {
  width: 36px;
  height: 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(243, 249, 255, 0.82));
}

.history-toast {
  border-color: rgba(121, 169, 201, 0.52);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(243, 250, 255, 0.84)),
    rgba(255, 255, 255, 0.68);
  box-shadow: 0 16px 28px rgba(8, 27, 43, 0.2);
  backdrop-filter: blur(12px);
}

html.dark-mode .history-wrapper::before,
body.dark-mode .history-wrapper::before {
  background: radial-gradient(circle at 45% 35%, rgba(48, 169, 198, 0.26), rgba(48, 169, 198, 0));
}

html.dark-mode .history-wrapper::after,
body.dark-mode .history-wrapper::after {
  background: radial-gradient(circle at 56% 44%, rgba(30, 180, 146, 0.24), rgba(30, 180, 146, 0));
}

html.dark-mode .history-hero,
body.dark-mode .history-hero,
html.dark-mode .history-toolbar,
body.dark-mode .history-toolbar,
html.dark-mode .history-tile,
body.dark-mode .history-tile,
html.dark-mode .history-filter-empty,
body.dark-mode .history-filter-empty,
html.dark-mode .empty-history,
body.dark-mode .empty-history,
html.dark-mode .history-metric-card,
body.dark-mode .history-metric-card {
  border-color: rgba(92, 146, 177, 0.52);
  background:
    linear-gradient(145deg, rgba(8, 33, 48, 0.8), rgba(8, 28, 41, 0.68)),
    rgba(8, 30, 44, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(166, 215, 240, 0.12),
    0 22px 40px rgba(0, 0, 0, 0.35);
}

html.dark-mode .history-kicker,
body.dark-mode .history-kicker,
html.dark-mode .history-hero-tag,
body.dark-mode .history-hero-tag,
html.dark-mode .note-chip,
body.dark-mode .note-chip,
html.dark-mode .history-index,
body.dark-mode .history-index,
html.dark-mode .word-meta-chip,
body.dark-mode .word-meta-chip {
  border-color: rgba(97, 156, 188, 0.6);
  background: rgba(9, 40, 58, 0.62);
  color: #d9edf9;
}

html.dark-mode .history-search,
body.dark-mode .history-search {
  border-color: rgba(96, 156, 188, 0.62);
  background: linear-gradient(180deg, rgba(10, 44, 64, 0.76), rgba(9, 37, 54, 0.72));
}

html.dark-mode .clear-history-button,
body.dark-mode .clear-history-button {
  border-color: rgba(201, 117, 133, 0.6);
  background: linear-gradient(180deg, rgba(88, 45, 58, 0.84), rgba(67, 35, 46, 0.8));
}

html.dark-mode .open-history-link,
body.dark-mode .open-history-link,
html.dark-mode .start-search-link,
body.dark-mode .start-search-link {
  border-color: rgba(81, 177, 199, 0.72);
  background:
    linear-gradient(125deg, rgba(36, 177, 170, 0.92), rgba(33, 143, 201, 0.9)),
    rgba(8, 39, 56, 0.84);
  color: #eefaff;
  box-shadow: 0 12px 24px rgba(6, 35, 48, 0.36);
}

html.dark-mode .delete-history-button,
body.dark-mode .delete-history-button {
  border-color: rgba(84, 140, 171, 0.6);
  background: linear-gradient(180deg, rgba(11, 45, 65, 0.78), rgba(10, 36, 53, 0.72));
  color: #d6edf9;
}

html.dark-mode .history-toast,
body.dark-mode .history-toast {
  border-color: rgba(87, 150, 183, 0.56);
  background:
    linear-gradient(145deg, rgba(8, 34, 49, 0.92), rgba(8, 29, 43, 0.84)),
    rgba(8, 28, 42, 0.68);
  color: #e3f2fb;
}

@media (max-width: 980px) {
  .history-hero,
  .history-toolbar {
    border-radius: 20px;
  }
}

@media (max-width: 760px) {
  .history-wrapper {
    gap: 0.82rem;
  }

  .history-hero,
  .history-toolbar,
  .history-tile,
  .empty-history,
  .history-filter-empty {
    border-radius: 16px;
    padding: 0.82rem;
  }

  .history-toolbar {
    grid-template-columns: 1fr;
  }
}