:root {
  --bg: #2b1f18;
  --bg2: #4e392a;
  --paper: #ead8bb;
  --ink: #2f2117;
  --muted: #7a634f;
  --line: #bb945e;
  --gold-soft: rgba(187, 148, 94, 0.22);
  --gold-mid: rgba(187, 148, 94, 0.5);
  --gold-strong: #c8a26d;
  --btn: #4d3727;
  --btnText: #f7ead5;
  --shadow: 0 34px 72px rgba(0, 0, 0, 0.24);
  --r: 28px;
  --grain: rgba(125, 93, 55, 0.07);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at top, rgba(111, 82, 56, 0.12), transparent 28%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: #f8efdf;
}

.app-shell {
  width: min(100% - 24px, 420px);
  margin: 0 auto;
  padding: 20px 0 28px;
}

.page-counter-wrap {
  display: flex;
  justify-content: center;
  width: min(100% - 24px, 420px);
  margin: 0 auto;
  padding: 2px 0 20px;
  pointer-events: none;
}

.page-counter {
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(43, 31, 24, 0.12);
  color: rgba(248, 239, 223, 0.39);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 600 0.65rem/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
}

.topbar {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.topbar-head {
  width: min(100%, 360px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.topbar-copy {
  text-align: left;
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font: 600 0.72rem/1.2 system-ui;
  color: #dbc19b;
}

h1 {
  margin: 0;
  font-size: clamp(1.58rem, 5.3vw, 2.02rem);
  line-height: 1;
  white-space: nowrap;
}

.search-field {
  display: block;
  position: relative;
  width: min(100%, 360px);
}

.tag-suggestions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0;
  width: min(100%, 360px);
}

.tag-pill {
  appearance: none;
  border: 1px solid rgba(255, 239, 214, 0.26);
  background: rgba(255, 248, 236, 0.11);
  color: #f9e9cf;
  border-radius: 999px;
  padding: 8px 12px;
  font: 500 0.84rem/1.1 system-ui, sans-serif;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tag-pill-meta {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(255, 241, 220, 0.76);
}

.tag-pill:hover,
.tag-pill:focus-visible {
  border-color: rgba(255, 231, 192, 0.52);
  background: rgba(255, 248, 236, 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  outline: none;
}

.tag-pill.is-selected {
  border-color: rgba(236, 198, 133, 0.88);
  background: linear-gradient(135deg, rgba(236, 198, 133, 0.34), rgba(187, 148, 94, 0.3));
  color: #fff7e7;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(255, 244, 219, 0.24);
  transform: translateY(-1px);
}

.tag-pill[data-kind="context-parent"] {
  border-color: rgba(236, 198, 133, 0.54);
  background: rgba(255, 248, 236, 0.12);
  color: #f7ead5;
}

.tag-pill[data-kind="context-parent"] .tag-pill-label {
  opacity: 0.9;
}

.tag-pill[data-kind="mood"] .tag-pill-meta {
  color: rgba(255, 241, 220, 0.64);
}

.tag-pill-clear {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.92rem;
  line-height: 1;
  color: rgba(62, 35, 13, 0.88);
  background: rgba(255, 245, 222, 0.92);
  box-shadow: inset 0 0 0 1px rgba(187, 148, 94, 0.28);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: rgba(255, 238, 209, 0.72);
  pointer-events: none;
}

.search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-field input {
  width: 100%;
  padding: 16px 18px 16px 46px;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 239, 214, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.16), rgba(255, 245, 229, 0.08)),
    rgba(255, 248, 236, 0.1);
  color: #fff6e8;
  font: 500 1rem/1.2 system-ui, sans-serif;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 236, 0.18),
    inset 0 0 0 1px rgba(187, 148, 94, 0.2),
    0 14px 30px rgba(0, 0, 0, 0.16),
    0 3px 10px rgba(0, 0, 0, 0.12);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.search-field input::placeholder {
  color: rgba(255, 241, 220, 0.58);
}

.search-field input:focus {
  border-color: rgba(255, 225, 173, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 236, 0.24),
    inset 0 0 0 1px rgba(187, 148, 94, 0.24),
    0 0 0 4px rgba(187, 148, 94, 0.14),
    0 18px 32px rgba(0, 0, 0, 0.18);
}

.search-field input.is-applied {
  border-color: rgba(239, 203, 144, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 236, 0.24),
    inset 0 0 0 1px rgba(187, 148, 94, 0.24),
    0 0 0 4px rgba(200, 162, 109, 0.18),
    0 18px 34px rgba(0, 0, 0, 0.2);
}

.search-feedback {
  margin: -2px 2px 0;
  font: 500 0.82rem/1.35 system-ui, sans-serif;
  width: min(100%, 360px);
}

.search-feedback {
  color: rgba(245, 224, 188, 0.9);
}

.search-feedback:empty {
  display: none;
}

.topbar-actions {
  display: flex;
  justify-content: flex-end;
}

.saved-toggle {
  appearance: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 239, 214, 0.14);
  background: rgba(255, 248, 236, 0.05);
  color: rgba(255, 244, 223, 0.92);
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  display: grid;
  place-items: center;
  position: relative;
}

.saved-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-toggle.is-active {
  border-color: rgba(236, 198, 133, 0.42);
  background: rgba(255, 248, 236, 0.1);
  color: #fff5e3;
}

.saved-toggle.is-active svg {
  fill: currentColor;
}

.saved-count {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(234, 216, 187, 0.14);
  color: rgba(255, 248, 235, 0.92);
  font: 700 0.62rem/1 system-ui, sans-serif;
  position: absolute;
  right: -2px;
  top: -2px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.saved-toggle.is-has-count .saved-count {
  opacity: 1;
  transform: scale(1);
}

.card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  flex: 0 0 auto;
}

.action-button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font: 600 0.92rem/1.1 system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
}

.action-button.primary {
  background: linear-gradient(135deg, var(--gold-strong), #8b6338);
  border-color: transparent;
  color: var(--btnText);
}

.icon-button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease;
}

.icon-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button.primary svg {
  fill: currentColor;
  stroke: none;
}

.icon-button:active {
  transform: scale(0.96);
}

.icon-button.is-success {
  background: linear-gradient(135deg, var(--gold-strong), #8b6338);
  border-color: transparent;
  color: var(--btnText);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.icon-button.is-active {
  background: linear-gradient(135deg, rgba(200, 162, 109, 0.98), #8b6338);
  border-color: transparent;
  color: var(--btnText);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.icon-button.is-active svg {
  fill: currentColor;
}

.deck-wrap {
  margin-top: 4px;
}

.swipe-hint,
.label {
  color: #dbc8b0;
  font-size: 0.9rem;
  font-family: system-ui, sans-serif;
}

.swipe-hint {
  margin: 0 0 4px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.card-stage {
  position: relative;
  min-height: 74svh;
  display: grid;
  place-items: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack-card,
.sher-card {
  width: min(100%, 360px);
  border-radius: 32px;
}

.stack-card {
  height: 552px;
  position: absolute;
  background: linear-gradient(180deg, #f3e6d0, #debe94);
  opacity: 0.4;
  box-shadow: var(--shadow);
}

.stack-back {
  transform: translateY(18px) scale(0.95);
}

.stack-mid {
  transform: translateY(10px) scale(0.975);
}

.sher-card {
  position: relative;
  min-height: 552px;
  background:
    radial-gradient(circle at top left, rgba(255, 249, 238, 0.78), transparent 28%),
    linear-gradient(180deg, #f6ebd8, #e4ccaa 72%, #dcc098 100%);
  box-shadow: var(--shadow);
  color: var(--ink);
  overflow: hidden;
  touch-action: pan-y;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.sher-card.is-saved-mode {
  background:
    radial-gradient(circle at top left, rgba(255, 249, 238, 0.68), transparent 28%),
    linear-gradient(180deg, #ead6b7, #ddc39f 72%, #d2b186 100%);
}

.sher-card::before,
.sher-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1.5px solid rgba(187, 148, 94, 0.75);
  border-radius: 24px;
  pointer-events: none;
}

.sher-card::after {
  inset: 22px;
  border-style: solid;
  border-color: rgba(187, 148, 94, 0.18);
  opacity: 1;
}

.sher-card .card-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 18%, var(--grain) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 72% 62%, var(--grain) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 38% 80%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 100%);
  background-size: 22px 22px, 28px 28px, 34px 34px;
  opacity: 0.65;
  pointer-events: none;
}

.card-frame::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(var(--line), var(--line)) top left / 28px 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) top left / 1.5px 28px no-repeat,
    linear-gradient(var(--line), var(--line)) top right / 28px 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) top right / 1.5px 28px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom left / 28px 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom left / 1.5px 28px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom right / 28px 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom right / 1.5px 28px no-repeat;
  opacity: 0.38;
}

.page-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 92px;
  z-index: 1;
}

.page-corner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, #d7b98b 49%, #ba915d 50%, #fbf0de 100%);
  clip-path: polygon(100% 0, 6% 0, 100% 94%);
  box-shadow: -10px 10px 24px rgba(80, 52, 27, 0.18);
}

.page-corner::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-top: 2px solid rgba(82, 49, 22, 0.35);
  border-right: 2px solid rgba(82, 49, 22, 0.35);
  border-radius: 0 10px 0 0;
}

.card-frame {
  position: relative;
  z-index: 2;
  min-height: 100%;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
}

.card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 38px;
}

.card-top h2 {
  margin: 0;
  font-size: 0.96rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(62, 42, 27, 0.86);
}

.mode-indicator {
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(187, 148, 94, 0.26);
  background: rgba(187, 148, 94, 0.08);
  color: rgba(85, 58, 33, 0.82);
  font: 600 0.72rem/1 system-ui, sans-serif;
  white-space: nowrap;
}

.card-roman {
  margin: 0;
  font-size: clamp(1.3rem, 4.8vw, 1.72rem);
  line-height: 1.46;
}

.card-original {
  margin: 18px 0 0;
  font-size: clamp(1.15rem, 4.3vw, 1.45rem);
  line-height: 1.7;
}

.card-line {
  display: block;
}

.card-roman.has-breathing-space,
.card-original.has-breathing-space {
  position: relative;
  padding-left: 16px;
}

.card-roman.has-breathing-space::before,
.card-original.has-breathing-space::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(187, 148, 94, 0.22), rgba(187, 148, 94, 0.8));
}

.card-roman.has-breathing-space .card-line + .card-line,
.card-original.has-breathing-space .card-line + .card-line {
  margin-top: 11px;
}

.meaning-box {
  margin-top: 18px;
  border-top: 1px solid var(--gold-soft);
  padding-top: 14px;
  font-family: system-ui, sans-serif;
  flex: 0 0 auto;
}

.label {
  margin: 0;
  color: var(--muted);
}

.meaning-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.card-meaning {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.62;
  overflow: visible;
}

.card-footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: end;
  gap: 12px;
  padding-top: 14px;
  flex: 0 0 auto;
}

.card-counter {
  margin: 0;
  font: 600 0.82rem/1 system-ui, sans-serif;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-right: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.is-swiping {
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.swipe-next {
  transform: translateX(110%) rotate(10deg);
  opacity: 0;
}

.swipe-prev {
  transform: translateX(-110%) rotate(-10deg);
  opacity: 0;
}

.advanced-search{width:min(100%,360px);margin:22px auto 0}.advanced-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;border:1px solid rgba(255,239,214,.24);background:rgba(255,248,236,.08);color:#f8efdf;box-shadow:0 14px 30px rgba(0,0,0,.14)}.advanced-toggle>span{display:grid;justify-items:start;text-align:left;gap:4px}.advanced-toggle strong{font:600 .82rem/1.2 system-ui,sans-serif}.advanced-summary{display:block;color:rgba(245,224,188,.82);font:500 .8rem/1.35 system-ui,sans-serif}.advanced-chevron{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.advanced-toggle[aria-expanded="true"] .advanced-chevron{transform:rotate(-135deg)}.advanced-panel{margin-top:12px;padding:18px;border-radius:24px;border:1px solid rgba(255,239,214,.16);background:rgba(255,248,236,.06)}.advanced-row+.advanced-row{margin-top:18px}.advanced-label{display:flex;justify-content:space-between;color:#fff2da;font:600 .82rem/1.2 system-ui,sans-serif;margin:0 0 9px}.advanced-field input{width:100%;min-height:48px;padding:13px 14px;border-radius:16px;border:1px solid rgba(255,239,214,.22);background:rgba(255,248,236,.08);color:#fff6e8;font:500 .92rem/1.2 system-ui,sans-serif}.advanced-field input::placeholder{color:rgba(255,241,220,.52)}.advanced-field input:focus{outline:none;border-color:rgba(239,203,144,.62);box-shadow:0 0 0 3px rgba(200,162,109,.12)}.advanced-suggestions,.advanced-selected,.advanced-inline-selected{display:flex;flex-wrap:wrap;gap:10px}.advanced-inline-selected{margin-top:10px}.advanced-suggestions{margin-top:12px}.advanced-selected{margin-top:12px}.advanced-chip,.advanced-selected-chip,.advanced-inline-chip,.advanced-clear,.advanced-apply{appearance:none;border-radius:999px;font:600 .82rem/1.1 system-ui,sans-serif;cursor:pointer}.advanced-chip{display:inline-flex;align-items:center;justify-content:center;min-height:42px;gap:8px;padding:11px 14px;border:1px solid rgba(255,239,214,.18);background:rgba(255,248,236,.08);color:#f5e2c3;text-align:left}.advanced-chip-text{display:grid;gap:3px}.advanced-chip-meta{color:rgba(245,224,188,.62);font:500 .68rem/1.15 system-ui,sans-serif}.advanced-chip.is-disabled{opacity:.42}.advanced-selected-chip{display:inline-flex;align-items:center;min-height:40px;padding:10px 13px;border:1px solid rgba(236,198,133,.76);background:linear-gradient(135deg,rgba(236,198,133,.24),rgba(187,148,94,.24));color:#fff7e7}.advanced-inline-chip{display:inline-flex;align-items:center;min-height:34px;padding:7px 10px;border:1px solid rgba(236,198,133,.62);background:rgba(236,198,133,.18);color:#fff4e1;font:600 .72rem/1 system-ui,sans-serif}.advanced-selected-chip span:last-child,.advanced-inline-chip span:last-child{margin-left:6px}.advanced-footer{margin-top:18px;padding-top:2px}.advanced-actions{display:flex;gap:10px;margin-top:14px}.advanced-clear{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid rgba(255,239,214,.18);background:rgba(255,248,236,.08);color:#f8efdf}.advanced-apply{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:0;background:linear-gradient(135deg,var(--gold-strong),#8b6338);color:var(--btnText);margin-left:auto;box-shadow:0 10px 20px rgba(139,99,56,.28);transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,background .14s ease,color .14s ease}.advanced-apply.is-pending{background:linear-gradient(135deg,#f0c982,#9d6f3d)}.advanced-apply.is-applied{background:linear-gradient(135deg,#d9b47a,#8f6335);color:#221407;box-shadow:0 10px 20px rgba(128,85,39,.28)}.advanced-clear:hover,.advanced-clear:focus-visible,.advanced-chip:hover,.advanced-chip:focus-visible,.advanced-inline-chip:hover,.advanced-inline-chip:focus-visible,.advanced-selected-chip:hover,.advanced-selected-chip:focus-visible,.advanced-apply:hover,.advanced-apply:focus-visible{transform:translateY(-1px);outline:none}.advanced-apply:hover,.advanced-apply:focus-visible{box-shadow:0 14px 26px rgba(139,99,56,.34);filter:brightness(1.03)}.advanced-apply:active{transform:translateY(1px) scale(.985);box-shadow:0 6px 12px rgba(139,99,56,.24)}

@media (min-width: 700px) {
  .app-shell {
    max-width: 520px;
  }

  .topbar-head,
  .search-field,
  .tag-suggestions,
  .search-feedback {
    width: 380px;
  }

  .stack-card,
  .sher-card {
    width: 380px;
  }

  .stack-card {
    height: 582px;
  }

  .sher-card {
    min-height: 582px;
  }
}