/* Liquid Glass v2: visible environmental refraction, spectral edges and pointer light. */
:root {
  --glass-x: 50%;
  --glass-y: 12%;
  --glass-shine: .12;
  --glass-edge:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, .98) 0%,
      rgba(255, 255, 255, .36) 26%,
      rgba(110, 210, 255, .5) 48%,
      rgba(255, 142, 207, .28) 68%,
      rgba(255, 255, 255, .86) 100%
    );
}

body {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -15%, rgba(255, 255, 255, .88), transparent 38rem),
    linear-gradient(145deg, #eef5ff 0%, #f7f3ff 38%, #fff6f2 72%, #edf8ff 100%);
}

.ambient-scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.ambient-scene__orb,
.ambient-scene__ribbon {
  position: absolute;
  display: block;
  will-change: transform;
}

.ambient-scene__orb {
  border-radius: 48% 52% 62% 38% / 55% 44% 56% 45%;
  filter: blur(1.1rem);
  opacity: .82;
}

.ambient-scene__orb--blue {
  top: -7rem;
  left: -8rem;
  width: clamp(25rem, 46vw, 46rem);
  height: clamp(23rem, 41vw, 41rem);
  background:
    radial-gradient(circle at 62% 62%, rgba(120, 202, 255, .92), transparent 48%),
    linear-gradient(135deg, #0a84ff, #5e5ce6);
  transform: rotate(-18deg);
}

.ambient-scene__orb--cyan {
  top: 24rem;
  right: -12rem;
  width: clamp(24rem, 43vw, 43rem);
  height: clamp(22rem, 38vw, 38rem);
  background:
    radial-gradient(circle at 35% 34%, rgba(195, 255, 249, .88), transparent 27%),
    linear-gradient(145deg, #64d2ff, #30d5c8 68%, #0a84ff);
  transform: rotate(21deg);
}

.ambient-scene__orb--coral {
  top: 7rem;
  right: 4%;
  width: clamp(18rem, 31vw, 33rem);
  height: clamp(16rem, 27vw, 29rem);
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 240, 220, .9), transparent 27%),
    linear-gradient(145deg, #ff9f0a, #ff6482 66%, #bf5af2);
  opacity: .68;
  transform: rotate(34deg);
}

.ambient-scene__orb--violet {
  top: 65rem;
  left: 4%;
  width: clamp(20rem, 37vw, 38rem);
  height: clamp(20rem, 34vw, 35rem);
  background:
    radial-gradient(circle at 38% 30%, rgba(235, 218, 255, .9), transparent 30%),
    linear-gradient(145deg, #bf5af2, #5e5ce6 58%, #64d2ff);
  opacity: .58;
  transform: rotate(-26deg);
}

.ambient-scene__ribbon {
  top: 15rem;
  left: 17%;
  width: 68%;
  height: 8rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .76), rgba(126, 213, 255, .58), rgba(255, 255, 255, 0));
  filter: blur(1.8rem);
  opacity: .72;
  transform: rotate(-11deg);
}

.liquid-surface,
.filters,
.filter,
.history-item,
.metric,
.action {
  position: relative;
  isolation: isolate;
}

.liquid-surface::before,
.filters::before,
.filter::before,
.history-item::before,
.metric::before,
.action::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.liquid-surface::after,
.filters::after,
.filter::after,
.history-item::after,
.metric::after,
.action::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(
      circle 10rem at var(--glass-x) var(--glass-y),
      rgba(255, 255, 255, .44),
      rgba(154, 222, 255, .1) 32%,
      transparent 68%
    );
  mix-blend-mode: screen;
  opacity: var(--glass-shine);
  transition: opacity 220ms ease;
}

.topbar {
  backdrop-filter: blur(2.25rem) saturate(205%) contrast(1.06);
  -webkit-backdrop-filter: blur(2.25rem) saturate(205%) contrast(1.06);
}

.panel {
  border-color: rgba(255, 255, 255, .25);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .2)),
    rgba(255, 255, 255, .14);
  box-shadow:
    0 1.2rem 3.3rem rgba(41, 65, 101, .14),
    inset 0 1.5px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(70, 104, 151, .16);
  backdrop-filter: blur(2rem) saturate(195%) contrast(1.05);
  -webkit-backdrop-filter: blur(2rem) saturate(195%) contrast(1.05);
}

.review-panel {
  border-color: rgba(255, 255, 255, .3);
  box-shadow:
    0 1.7rem 4.8rem rgba(41, 65, 101, .15),
    inset 0 1.5px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(70, 104, 151, .14);
  backdrop-filter: blur(1.6rem) saturate(180%);
  -webkit-backdrop-filter: blur(1.6rem) saturate(180%);
}

.review-toolbar {
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .61), rgba(255, 255, 255, .25) 64%, rgba(210, 239, 255, .32)),
    rgba(255, 255, 255, .12);
  box-shadow:
    0 .8rem 2rem rgba(48, 71, 105, .1),
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(83, 116, 160, .12);
  backdrop-filter: blur(2.3rem) saturate(205%) contrast(1.06);
  -webkit-backdrop-filter: blur(2.3rem) saturate(205%) contrast(1.06);
}

.metric {
  border-color: rgba(255, 255, 255, .3);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .34)),
    rgba(255, 255, 255, .2);
  box-shadow:
    0 .45rem 1.35rem rgba(44, 65, 96, .09),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(73, 112, 165, .14);
  backdrop-filter: blur(1rem) saturate(180%);
  -webkit-backdrop-filter: blur(1rem) saturate(180%);
}

.history-item {
  border-color: rgba(255, 255, 255, .27);
  background: rgba(255, 255, 255, .43);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74);
  backdrop-filter: blur(.9rem) saturate(160%);
  -webkit-backdrop-filter: blur(.9rem) saturate(160%);
}

.history-item:hover {
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .64);
}

.filters {
  border: 1px solid rgba(255, 255, 255, .32);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .31), rgba(222, 239, 255, .16)),
    rgba(88, 111, 150, .1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(67, 99, 142, .11);
  backdrop-filter: blur(1.5rem) saturate(190%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(190%);
}

.filter:hover {
  background: rgba(255, 255, 255, .34);
}

.filter[aria-pressed="true"] {
  border: 1px solid rgba(255, 255, 255, .72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(237, 247, 255, .48)),
    rgba(255, 255, 255, .38);
  box-shadow:
    0 .28rem .82rem rgba(46, 67, 99, .15),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(92, 129, 181, .16);
  backdrop-filter: blur(1.2rem) saturate(185%);
  -webkit-backdrop-filter: blur(1.2rem) saturate(185%);
}

.link-button,
.action {
  border-color: rgba(255, 255, 255, .42);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .3)),
    rgba(255, 255, 255, .16);
  box-shadow:
    0 .45rem 1.2rem rgba(41, 62, 94, .11),
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(62, 101, 151, .16);
  backdrop-filter: blur(1.3rem) saturate(190%);
  -webkit-backdrop-filter: blur(1.3rem) saturate(190%);
}

.link-button--primary,
.action--primary {
  border-color: rgba(255, 255, 255, .45);
  background:
    linear-gradient(135deg, rgba(0, 122, 255, .88), rgba(70, 176, 255, .62) 62%, rgba(94, 92, 230, .64)),
    rgba(0, 122, 255, .66);
  color: #fff;
  box-shadow:
    0 .65rem 1.6rem rgba(0, 92, 210, .25),
    inset 0 1px 0 rgba(255, 255, 255, .66),
    inset 0 -1px 0 rgba(0, 62, 152, .32);
}

.card {
  border-color: rgba(255, 255, 255, .62);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .79)),
    rgba(255, 255, 255, .8);
  backdrop-filter: blur(.8rem) saturate(135%);
  -webkit-backdrop-filter: blur(.8rem) saturate(135%);
}

@media (max-width: 39rem) {
  .ambient-scene__orb--blue {
    top: -7rem;
    left: -12rem;
  }

  .ambient-scene__orb--coral {
    top: 13rem;
    right: -10rem;
  }

  .ambient-scene__orb--cyan {
    top: 46rem;
    right: -15rem;
  }

  .ambient-scene__ribbon {
    top: 29rem;
    left: -20%;
    width: 140%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ambient-scene {
    opacity: .26;
  }

  .topbar,
  .panel,
  .review-panel,
  .review-toolbar,
  .card,
  .filters,
  .filter,
  .history-item,
  .metric,
  .link-button,
  .action {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-surface::after,
  .filters::after,
  .filter::after,
  .history-item::after,
  .metric::after,
  .action::after {
    transition: none;
  }
}

/* Liquid Glass v4: calm action hierarchy and lightweight scrolling chrome. */
body {
  overflow-x: clip;
}

.topbar {
  top: auto;
  z-index: 1;
}

.review-toolbar {
  position: relative;
  top: auto;
}

.action {
  color: #203047;
  font-weight: 720;
  text-shadow: none;
}

.action--primary,
.action--confirm,
.action--feedback {
  border-color: rgba(255, 255, 255, .58);
  background:
    linear-gradient(135deg, #087cff 0%, #2d91f5 62%, #5b7ee8 100%);
  color: #fff;
  box-shadow:
    0 .58rem 1.4rem rgba(0, 95, 205, .22),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(0, 58, 145, .34);
  text-shadow: 0 1px 1px rgba(0, 48, 116, .2);
}

.action--primary:hover,
.action--confirm:hover,
.action--feedback:hover {
  background:
    linear-gradient(135deg, #006fe8 0%, #1b84e5 62%, #4c6fd7 100%);
  color: #fff;
}

.action--secondary {
  border-color: rgba(77, 103, 140, .18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(231, 239, 250, .68));
  color: #1f5f9f;
  box-shadow:
    0 .35rem .95rem rgba(48, 69, 101, .09),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(74, 104, 148, .1);
}

.action--secondary:hover {
  border-color: rgba(56, 94, 145, .28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(219, 231, 247, .76));
  color: #174f88;
}

.action--danger {
  border-color: rgba(255, 255, 255, .6);
  background:
    linear-gradient(135deg, #e5332c 0%, #ff453a 58%, #ff6961 100%);
  color: #fff;
  box-shadow:
    0 .58rem 1.4rem rgba(205, 40, 33, .23),
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(145, 20, 16, .28);
  text-shadow: 0 1px 1px rgba(116, 12, 8, .25);
}

.card__actions > .action:not(.action--primary):not([aria-disabled="true"]) {
  border-color: rgba(77, 103, 140, .18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(228, 236, 248, .7));
  color: #31435d;
  box-shadow:
    0 .36rem .95rem rgba(48, 69, 101, .09),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(74, 104, 148, .1);
  text-shadow: none;
}

.card__actions > .action[aria-disabled="true"] {
  border-color: rgba(84, 102, 128, .14);
  background: rgba(226, 233, 243, .74);
  color: #778397;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.action:disabled {
  opacity: .62;
  filter: saturate(.7);
}

@media (min-width: 54rem) {
  .side-panel {
    position: sticky;
    top: 1rem;
    align-self: start;
  }

  .history-list {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
  }
}

@media (prefers-contrast: more) {
  .action--primary,
  .action--confirm,
  .action--feedback,
  .action--danger,
  .card__actions > .action:not(.action--primary):not([aria-disabled="true"]) {
    border-color: #fff;
  }
}

/* Liquid Glass v5: readable dense controls and low-distraction reflection. */
#batch-directions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .38rem;
}

.batch-direction {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  min-height: 1.85rem;
  padding: .25rem .48rem;
  border: 1px solid rgba(67, 101, 147, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  color: #4d5c70;
  font-size: .76rem;
  line-height: 1.2;
  white-space: nowrap;
}

.batch-direction strong {
  color: #087cff;
  font-size: .78rem;
  font-weight: 760;
}

.image-feedback__composer {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.image-feedback__composer textarea {
  min-width: 0;
}

.image-feedback__composer .action--feedback {
  width: 100%;
  min-width: 0;
}

.filters {
  padding-bottom: .28rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Liquid Glass v6: the review controls stay in document flow.
   Sticky translucent chrome allowed card copy to remain visible underneath it,
   which made the three-column reading order look interleaved while scrolling. */
@media (min-width: 54rem) {
  .review-toolbar {
    position: relative;
    top: auto;
    z-index: 1;
  }
}

/* Liquid Glass v7: iOS-style light and dark appearances. */
.theme-toggle {
  position: relative;
  isolation: isolate;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(225, 236, 250, .55)),
    rgba(255, 255, 255, .4);
  color: #d36a00;
  box-shadow:
    0 .42rem 1.1rem rgba(47, 69, 102, .12),
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(67, 101, 148, .12);
  cursor: pointer;
  backdrop-filter: blur(1.3rem) saturate(185%);
  -webkit-backdrop-filter: blur(1.3rem) saturate(185%);
}

.theme-toggle:hover {
  box-shadow:
    0 .58rem 1.35rem rgba(47, 69, 102, .17),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(67, 101, 148, .14);
}

.theme-toggle__icon {
  position: absolute;
  inset: .65rem;
  z-index: 4;
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: opacity 240ms ease, transform 300ms cubic-bezier(.2, .8, .2, 1);
}

.theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(-28deg) scale(.72);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090b11;
  --panel: rgba(20, 24, 33, .66);
  --panel-strong: rgba(19, 22, 30, .92);
  --line: rgba(218, 229, 255, .1);
  --line-strong: rgba(218, 229, 255, .18);
  --text: #f5f5f7;
  --muted: #9898a1;
  --soft: #d5d5dc;
  --cyan: #64d2ff;
  --green: #32d74b;
  --amber: #ff9f0a;
  --red: #ff453a;
  --blue: #0a84ff;
  --shadow:
    0 1.35rem 4rem rgba(0, 0, 0, .34),
    0 .16rem .8rem rgba(0, 0, 0, .22);
  --shadow-raised:
    0 1.6rem 4.8rem rgba(0, 0, 0, .42),
    0 .25rem 1rem rgba(0, 0, 0, .28);
  --glass-edge:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, .58) 0%,
      rgba(255, 255, 255, .12) 27%,
      rgba(100, 210, 255, .42) 49%,
      rgba(191, 90, 242, .24) 69%,
      rgba(255, 255, 255, .34) 100%
    );
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% -4%, rgba(10, 132, 255, .22), transparent 30rem),
    radial-gradient(circle at 88% 10%, rgba(255, 104, 77, .13), transparent 28rem),
    radial-gradient(circle at 58% 52%, rgba(94, 92, 230, .1), transparent 38rem),
    linear-gradient(150deg, #080a0f 0%, #101522 52%, #090d14 100%);
  color: var(--text);
}

:root[data-theme="dark"] body::before {
  background-image: radial-gradient(rgba(178, 205, 255, .52) .6px, transparent .6px);
  opacity: .11;
}

:root[data-theme="dark"] .ambient-scene {
  opacity: .56;
  filter: saturate(.88) brightness(.66);
}

:root[data-theme="dark"] .topbar {
  box-shadow:
    0 1.45rem 4rem rgba(0, 0, 0, .34),
    0 .2rem .8rem rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .42);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] .review-toolbar h2 {
  color: #f7f7fa;
}

:root[data-theme="dark"] .topbar__subtitle {
  color: #a7a7b0;
}

:root[data-theme="dark"] .panel {
  border-color: rgba(213, 232, 255, .14);
  background:
    linear-gradient(145deg, rgba(39, 49, 68, .66), rgba(17, 22, 31, .42)),
    rgba(10, 14, 21, .48);
  box-shadow:
    0 1.2rem 3.3rem rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .42);
}

:root[data-theme="dark"] .review-panel {
  border-color: rgba(213, 232, 255, .13);
  box-shadow:
    0 1.7rem 4.8rem rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 0, 0, .46);
}

:root[data-theme="dark"] .review-toolbar {
  border-bottom-color: rgba(213, 232, 255, .1);
  background:
    linear-gradient(120deg, rgba(39, 49, 67, .64), rgba(18, 23, 33, .42) 64%, rgba(20, 49, 68, .46)),
    rgba(10, 13, 19, .46);
  box-shadow:
    0 .8rem 2rem rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .34);
}

:root[data-theme="dark"] .metric {
  border-color: rgba(213, 232, 255, .13);
  background:
    linear-gradient(145deg, rgba(52, 65, 88, .7), rgba(22, 28, 39, .52)),
    rgba(16, 21, 30, .48);
  box-shadow:
    0 .5rem 1.4rem rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .17),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
}

:root[data-theme="dark"] .metric strong,
:root[data-theme="dark"] .history-item strong,
:root[data-theme="dark"] .batch-direction strong {
  color: #4aa3ff;
}

:root[data-theme="dark"] .batch-facts dd,
:root[data-theme="dark"] .card__facts dd {
  color: var(--soft);
}

:root[data-theme="dark"] .batch-direction {
  border-color: rgba(135, 185, 255, .14);
  background: rgba(89, 116, 153, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #c2cad7;
}

:root[data-theme="dark"] .history-item {
  border-color: rgba(213, 232, 255, .1);
  background: rgba(31, 39, 53, .58);
  color: var(--soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .history-item:hover {
  border-color: rgba(100, 185, 255, .25);
  background: rgba(41, 52, 70, .72);
}

:root[data-theme="dark"] .history-item[aria-pressed="true"] {
  border-color: rgba(10, 132, 255, .4);
  background: rgba(10, 132, 255, .19);
  box-shadow: inset 0 0 0 1px rgba(121, 196, 255, .08);
}

:root[data-theme="dark"] .history-list {
  scrollbar-color: rgba(100, 210, 255, .42) rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .filters {
  border-color: rgba(213, 232, 255, .12);
  background:
    linear-gradient(145deg, rgba(48, 61, 82, .4), rgba(24, 31, 44, .32)),
    rgba(8, 11, 17, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -1px 0 rgba(0, 0, 0, .34);
}

:root[data-theme="dark"] .filter {
  color: #b9bec8;
}

:root[data-theme="dark"] .filter:hover {
  background: rgba(255, 255, 255, .07);
}

:root[data-theme="dark"] .filter[aria-pressed="true"] {
  border-color: rgba(188, 222, 255, .2);
  background:
    linear-gradient(145deg, rgba(86, 105, 137, .72), rgba(43, 54, 75, .76)),
    rgba(55, 69, 94, .68);
  color: #fff;
  box-shadow:
    0 .28rem .82rem rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .4);
}

:root[data-theme="dark"] .card {
  border-color: rgba(213, 232, 255, .12);
  background:
    linear-gradient(155deg, rgba(31, 37, 49, .96), rgba(18, 22, 30, .93)),
    rgba(17, 20, 28, .92);
  box-shadow:
    0 .85rem 2.8rem rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}

:root[data-theme="dark"] .copy-display__title,
:root[data-theme="dark"] .copy-display__body,
:root[data-theme="dark"] .copy-display__tags {
  border-color: rgba(213, 232, 255, .08);
  background: rgba(255, 255, 255, .052);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

:root[data-theme="dark"] .tag {
  border-color: rgba(10, 132, 255, .18);
  background: rgba(10, 132, 255, .15);
  color: #8dc8ff;
}

:root[data-theme="dark"] .editor__field input,
:root[data-theme="dark"] .editor__field textarea,
:root[data-theme="dark"] .image-feedback__composer textarea {
  border-color: rgba(213, 232, 255, .13);
  background: rgba(7, 10, 16, .58);
  color: var(--text);
}

:root[data-theme="dark"] .editor__field input:focus,
:root[data-theme="dark"] .editor__field textarea:focus,
:root[data-theme="dark"] .image-feedback__composer textarea:focus {
  border-color: rgba(10, 132, 255, .58);
  background: rgba(8, 12, 19, .88);
  box-shadow: 0 0 0 .23rem rgba(10, 132, 255, .14);
}

:root[data-theme="dark"] .editor__field input:disabled,
:root[data-theme="dark"] .editor__field textarea:disabled {
  border-color: rgba(50, 215, 75, .12);
  background: rgba(50, 215, 75, .045);
  color: #d1d5da;
  -webkit-text-fill-color: #d1d5da;
}

:root[data-theme="dark"] .card__media,
:root[data-theme="dark"] .image-feedback {
  border-color: rgba(213, 232, 255, .08);
  background: rgba(7, 10, 16, .34);
}

:root[data-theme="dark"] .gallery__item {
  border-color: rgba(213, 232, 255, .1);
  background: #111620;
  box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .24);
}

:root[data-theme="dark"] .gallery__item img {
  background: #0e1219;
}

:root[data-theme="dark"] .image-feedback__list li {
  border-left-color: rgba(255, 159, 10, .64);
  background: rgba(255, 159, 10, .09);
}

:root[data-theme="dark"] .image-feedback__list p {
  color: #f2d6ad;
}

:root[data-theme="dark"] .review-state {
  border-color: rgba(255, 159, 10, .18);
  background: rgba(255, 159, 10, .1);
  color: #ffc46b;
}

:root[data-theme="dark"] .review-state--locked {
  border-color: rgba(50, 215, 75, .18);
  background: rgba(50, 215, 75, .09);
  color: #7ee38e;
}

:root[data-theme="dark"] .card__delete {
  background: rgba(255, 69, 58, .13);
  color: #ff8179;
}

:root[data-theme="dark"] .action--secondary,
:root[data-theme="dark"] .card__actions > .action:not(.action--primary):not([aria-disabled="true"]) {
  border-color: rgba(213, 232, 255, .14);
  background:
    linear-gradient(145deg, rgba(58, 72, 97, .72), rgba(30, 38, 53, .74));
  color: #dbe8fa;
  box-shadow:
    0 .38rem 1rem rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 0, 0, .32);
}

:root[data-theme="dark"] .card__actions > .action[aria-disabled="true"] {
  border-color: rgba(213, 232, 255, .08);
  background: rgba(62, 70, 84, .42);
  color: #858b96;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

:root[data-theme="dark"] .theme-toggle {
  border-color: rgba(213, 232, 255, .18);
  background:
    linear-gradient(145deg, rgba(58, 72, 98, .78), rgba(25, 31, 44, .72)),
    rgba(17, 21, 30, .64);
  color: #a8cfff;
  box-shadow:
    0 .5rem 1.25rem rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .42);
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(30deg) scale(.72);
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

:root[data-theme="dark"] .toast {
  border-color: rgba(213, 232, 255, .16);
  background: rgba(19, 24, 34, .94);
  color: var(--text);
}

:root.theme-transitioning body,
:root.theme-transitioning .topbar,
:root.theme-transitioning .panel,
:root.theme-transitioning .review-panel,
:root.theme-transitioning .review-toolbar,
:root.theme-transitioning .card,
:root.theme-transitioning .metric,
:root.theme-transitioning .history-item,
:root.theme-transitioning .filters,
:root.theme-transitioning .filter,
:root.theme-transitioning .copy-display__title,
:root.theme-transitioning .copy-display__body,
:root.theme-transitioning .copy-display__tags,
:root.theme-transitioning .image-feedback,
:root.theme-transitioning .theme-toggle {
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    color 220ms ease,
    box-shadow 260ms ease,
    opacity 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon,
  :root.theme-transitioning body,
  :root.theme-transitioning .topbar,
  :root.theme-transitioning .panel,
  :root.theme-transitioning .review-panel,
  :root.theme-transitioning .review-toolbar,
  :root.theme-transitioning .card {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"] .topbar,
  :root[data-theme="dark"] .panel,
  :root[data-theme="dark"] .review-panel,
  :root[data-theme="dark"] .review-toolbar,
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .filters,
  :root[data-theme="dark"] .history-item,
  :root[data-theme="dark"] .metric,
  :root[data-theme="dark"] .theme-toggle {
    background: #171b24;
  }
}

/* V11 · compact aligned batch metrics + content-sized history picker */
.metrics {
  container-type: inline-size;
  align-items: stretch;
}

.metric {
  display: grid;
  min-width: 0;
  min-height: 4.25rem;
  padding: .5rem .55rem;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  row-gap: .35rem;
}

.metric span {
  min-height: 1.35em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.metric strong {
  align-self: center;
  min-width: 0;
  margin-top: 0;
  font-size: clamp(1.6rem, 8cqi, 1.85rem);
  font-variant-numeric: tabular-nums;
  line-height: .96;
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
}

#image-count {
  font-size: clamp(1.6rem, 8cqi, 1.85rem);
  letter-spacing: -.06em;
}

.panel--history {
  align-self: start;
  height: auto;
  min-height: 0;
  max-height: none;
  padding-bottom: 1rem;
  overflow: visible;
}

.panel--history .panel__head {
  margin-bottom: .75rem;
}

@media (min-width: 54rem) {
  .side-panel {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto;
  }

  .panel--history {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}