:root {
  --bg: #dff1e7;
  --bg-2: #c8e7d7;
  --card: #fffdf8;
  --ink: #2e2418;
  --muted: #6c6257;
  --accent: #1f7a5a;
  --accent-2: #2aa674;
  --accent-deep: #12533d;
  --secondary: #f3d38f;
  --secondary-deep: #c8943d;
  --tile: #f3d18a;
  --tile-2: #e8bb64;
  --tile-border: #9a6b24;
  --line: #e9dcc5;
  --danger: #cc4b61;
  --success: #2b9160;
  --shadow: 0 16px 40px rgba(17, 65, 48, 0.14);
  --bonus-dl: #bae6f6;
  --bonus-tl: #65b8de;
  --bonus-dw: #f7c6d8;
  --bonus-tw: #ef7188;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-size: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, #f8fffb 0, rgba(248, 255, 251, 0.8) 18%, transparent 40%),
    radial-gradient(circle at bottom right, #fbe7ad 0, rgba(251, 231, 173, 0.45) 14%, transparent 38%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--ink);
  min-height: 100vh;
}

button, input, select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: white;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--accent-deep);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease, filter 120ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.06);
}
button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--accent-deep); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondary {
  background: linear-gradient(180deg, #fae4b3, var(--secondary));
  color: var(--ink);
  box-shadow: 0 6px 0 var(--secondary-deep);
}
button.secondary:active:not(:disabled) { box-shadow: 0 2px 0 var(--secondary-deep); }

input, select {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem;
  background: white;
  color: var(--ink);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

input:focus, select:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(42, 166, 116, 0.13);
}

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 700;
}

h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 3vw, 3.7rem); line-height: 0.95; margin-bottom: 0.8rem; }
h2 { margin-bottom: 0.65rem; font-size: 1.05rem; }

.app-shell { width: min(1900px, 98vw); margin: 0 auto; padding: 1rem 0; }
.hidden { display: none !important; }
.card {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid rgba(31, 122, 90, 0.12);
  border-radius: 18px;
  padding: 0.95rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.join-card {
  max-width: 620px;
  margin: 7vh auto;
  padding: 2rem;
  border: 2px solid rgba(31, 122, 90, 0.12);
}
.intro { color: var(--muted); font-size: 1.05rem; }
.eyebrow {
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.3rem; font-weight: 700; }
.join-form { display: grid; gap: 1rem; }

.game { display: grid; gap: 0.75rem; padding-bottom: 10.5rem; }
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(242, 252, 246, 0.96));
}
.topbar h1 { font-size: clamp(1.4rem, 2.2vw, 2.4rem); margin-bottom: 0.2rem; }
.top-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; align-items: end; }
.score-start-label { width: 120px; font-size: 0.72rem; }
.turn-banner {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 2vw, 2rem);
  line-height: 1.1;
  font-weight: 950;
  color: var(--accent-deep);
  padding: 0.45rem 0.75rem;
  margin: 0 auto;
  width: min(860px, 100%);
}
.turn-banner.voting {
  color: #8f3450;
  background: linear-gradient(135deg, #fff7fa, #ffe1e9);
}
.layout { display: grid; grid-template-columns: minmax(230px, 270px) minmax(620px, 820px) minmax(250px, 300px); gap: 0.75rem; align-items: start; justify-content: center; }
.left-column, .right-column { display: grid; gap: 0.75rem; }
.section-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.pill {
  border: 1px solid rgba(31, 122, 90, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  color: var(--accent);
  font-weight: 800;
  background: #f4fff9;
  white-space: nowrap;
}

.players-list { display: grid; gap: 0.6rem; }
.player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff9ec, #fff2d4);
  border: 1px solid #ebd39d;
}
.player-row.active {
  outline: 3px solid rgba(42, 166, 116, 0.22);
  background: linear-gradient(180deg, #f5fff9, #ecfff3);
  border-color: #a9dfc4;
}
.player-name { font-weight: 900; }
.player-meta { color: var(--muted); font-size: 0.85rem; }
.score { font-size: 1.5rem; font-weight: 950; color: var(--accent); }

.rack-dock {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(1280px, calc(100vw - 2rem));
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "header actions"
    "rack actions";
  gap: 0.75rem;
  align-items: center;
  border: 2px solid rgba(31, 122, 90, 0.18);
}

.rack-dock-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}
.rack-dock-header h2 { margin-bottom: 0.25rem; }
.rack-actions {
  grid-area: actions;
  justify-content: flex-end;
  align-content: center;
  max-width: 330px;
}

.rack {
  grid-area: rack;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3.2rem;
  margin: 0;
  padding: 0.6rem;
  border-radius: 18px;
  overflow-x: auto;
  background: linear-gradient(180deg, #d08b43, #b57634);
  box-shadow: inset 0 -4px rgba(87, 47, 14, 0.2);
}
.tile {
  width: 42px;
  height: 48px;
  min-width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ffe9ae, var(--tile));
  border: 2px solid var(--tile-border);
  border-radius: 10px;
  box-shadow: 0 4px 0 #8a5b1f;
  font-weight: 950;
  font-size: 1.35rem;
  color: #342613;
}
.rack-tile {
  cursor: grab;
}
.rack-tile:active {
  cursor: grabbing;
}
.rack-tile.selected {
  outline: 3px solid #2aa674;
  outline-offset: 2px;
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #8a5b1f;
}
.rack-tile.swap-source {
  outline: 3px dashed #cc4b61;
  outline-offset: 3px;
  transform: translateY(-4px) rotate(-2deg);
}
.rack-tile.dragging {
  opacity: 0.45;
  transform: scale(0.96);
}
.rack-tile.drop-before {
  border-left: 5px solid var(--accent-2);
}
.rack-tile.drop-after {
  border-right: 5px solid var(--accent-2);
}
.button-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.board-card {
  min-width: 0;
  overflow: auto;
  background: linear-gradient(180deg, rgba(250, 254, 252, 0.96), rgba(240, 250, 244, 0.94));
}
.board {
  width: 820px;
  max-width: 100%;
  min-width: 620px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(15, minmax(32px, 1fr));
  gap: 3px;
  user-select: none;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #178e6b, #157353);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15), 0 10px 24px rgba(16, 75, 57, 0.18);
}
.square {
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid #d6c3a4;
  background: #fdf7ea;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  min-width: 0;
  font-weight: 950;
  font-size: 1.05rem;
  color: var(--ink);
  transition: transform 100ms ease, outline-color 100ms ease, box-shadow 100ms ease;
}
.square:hover {
  outline: 2px solid rgba(42, 166, 116, 0.45);
  transform: translateY(-1px);
}
.square::before {
  content: attr(data-label);
  position: absolute;
  top: 2px;
  left: 4px;
  color: rgba(69, 62, 52, 0.5);
  font-size: clamp(0.42rem, 0.75vw, 0.58rem);
  font-weight: 700;
}
.square.bonus-dl { background: linear-gradient(180deg, #d9f3fb, var(--bonus-dl)); border-color: #8ec8de; }
.square.bonus-tl { background: linear-gradient(180deg, #8fd2ee, var(--bonus-tl)); border-color: #4a9cc3; color: #10394b; }
.square.bonus-dw { background: linear-gradient(180deg, #fde0ea, var(--bonus-dw)); border-color: #e9a7bf; }
.square.bonus-tw { background: linear-gradient(180deg, #f59aae, var(--bonus-tw)); border-color: #cf5773; color: #511827; }
.square.filled {
  background: linear-gradient(145deg, #ffe3a2, #f0c46b);
  border-color: #95651f;
  box-shadow: inset 0 -3px rgba(138, 91, 31, 0.2);
}
.square.proposed {
  background: linear-gradient(180deg, #e5f7d7, #caedab);
  border-color: #70a559;
  color: #2d4d1e;
}
.square.center {
  background: linear-gradient(180deg, #fde3ed, #f5bfd1);
  border-color: #d58ba7;
}
.square.center::after {
  content: '★';
  color: #b34767;
  font-size: 0.62rem;
  opacity: 0.68;
  position: absolute;
  bottom: 2px;
  right: 4px;
}

.word-form { display: grid; gap: 0.8rem; }
.two-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: end; }
.trade-panel { margin-top: 0.8rem; line-height: 1.5; }
.log { display: grid; gap: 0.45rem; max-height: 240px; overflow: auto; padding-right: 0.25rem; }
.log-entry {
  border-left: 4px solid #e3c898;
  padding-left: 0.65rem;
  color: var(--muted);
}

.trade-panel {
  display: grid;
  gap: 0.8rem;
}
.trade-request-item {
  display: grid;
  gap: 0.65rem;
  border: 1px solid #ead8b8;
  border-radius: 16px;
  background: #fff8e9;
  padding: 0.8rem;
}
.trade-request-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: start;
}
.trade-small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.trade-note {
  margin-bottom: 0;
}
.trade-offer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  border-radius: 12px;
  background: #f7f0df;
  padding: 0.55rem;
}
.trade-counter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: end;
}

.chat-card {
  position: sticky;
  bottom: 1rem;
}
.chat-log {
  display: grid;
  gap: 0.45rem;
  max-height: 190px;
  overflow: auto;
  padding-right: 0.25rem;
}
.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: end;
  margin-top: 0.8rem;
}
.chat-message {
  border-radius: 14px;
  background: #f7f0df;
  border: 1px solid #ead8b8;
  padding: 0.6rem;
}
.chat-message.mine {
  background: #eaf9f0;
  border-color: #b7e3c9;
}
.chat-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}
.chat-text {
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.chat-empty {
  border: 1px dashed #d9c6a8;
  border-radius: 14px;
  padding: 0.75rem;
  text-align: center;
}

.vote-buttons { display: grid; gap: 0.6rem; }
.vote.retry { background: linear-gradient(180deg, #ef7c8c, #cf5870); box-shadow: 0 6px 0 #8f3450; }
.vote.okayish { background: linear-gradient(180deg, #f4d178, #dfa943); box-shadow: 0 6px 0 #a97827; color: #31210d; }
.vote.good { background: linear-gradient(180deg, #73c6ef, #3c96c4); box-shadow: 0 6px 0 #21668b; }
.vote.amazing { background: linear-gradient(180deg, #3dc58a, #248f61); box-shadow: 0 6px 0 #176143; }

.winner {
  background: linear-gradient(135deg, #1b7858, #26a06f);
  color: white;
  border-radius: 18px;
  padding: 1.2rem;
  font-weight: 900;
  box-shadow: var(--shadow);
}


.winner-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 244, 186, 0.36), transparent 30%),
    radial-gradient(circle at 18% 18%, rgba(83, 203, 148, 0.28), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(255, 120, 148, 0.28), transparent 28%),
    rgba(18, 27, 24, 0.74);
  backdrop-filter: blur(5px);
}
.winner-overlay.hidden { display: none; }
.winner-overlay-card {
  position: relative;
  z-index: 2;
  width: min(780px, 92vw);
  text-align: center;
  border-radius: 34px;
  padding: clamp(2rem, 7vw, 4.75rem);
  color: #fff;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.32), transparent 36%),
    linear-gradient(135deg, rgba(31, 122, 90, 0.97), rgba(38, 160, 111, 0.97) 48%, rgba(240, 183, 79, 0.97));
  border: 3px solid rgba(255, 255, 255, 0.46);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255,255,255,0.18);
  animation: winner-pop 780ms cubic-bezier(.16, 1.4, .35, 1) both;
  pointer-events: auto;
}
.winner-kicker {
  margin: 0 0 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  font-weight: 950;
  color: #fff3b8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
}
.winner-overlay-card h2 {
  margin: 0;
  line-height: 0.88;
  font-size: clamp(3.3rem, 11vw, 8.7rem);
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  overflow-wrap: anywhere;
}
.winner-overlay-card p:not(.winner-kicker) {
  margin: 1.25rem 0 1.6rem;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 900;
}
.winner-overlay-card button {
  box-shadow: 0 6px 0 rgba(91, 65, 18, 0.75);
}
.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  left: var(--x);
  top: -18px;
  width: var(--size);
  height: calc(var(--size) * 1.45);
  border-radius: 3px;
  background: hsl(var(--hue), 92%, 58%);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg);
  animation: confetti-fall var(--duration) linear var(--delay) forwards;
}
.confetti-piece.round { border-radius: 999px; }
.confetti-piece.wide { width: calc(var(--size) * 1.7); height: calc(var(--size) * 0.72); }
.firework-spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: hsl(var(--hue), 98%, 63%);
  box-shadow: 0 0 16px hsl(var(--hue), 98%, 63%);
  opacity: 0;
  animation: firework-burst 1.25s ease-out var(--delay) forwards;
}
@keyframes confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -8vh, 0) rotate(0deg); }
  8% { opacity: 1; }
  100% { opacity: 0.95; transform: translate3d(var(--drift), 112vh, 0) rotate(var(--spin)); }
}
@keyframes firework-burst {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(0.15); }
}
@keyframes winner-pop {
  0% { opacity: 0; transform: translateY(22px) scale(0.84) rotate(-1deg); }
  62% { opacity: 1; transform: translateY(0) scale(1.035) rotate(0.4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .winner-overlay-card,
  .confetti-piece,
  .firework-spark {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 1250px) {
  .layout { grid-template-columns: 1fr; }
  .left-column, .right-column { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .rack-dock {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "rack"
      "actions";
  }
  .rack-actions { max-width: none; justify-content: center; }
}

@media (max-width: 640px) {
  .app-shell { width: 100%; padding: 0.75rem; }
  .game { padding-bottom: 15.5rem; }
  .card { border-radius: 18px; padding: 1rem; }
  .topbar { flex-direction: column; align-items: stretch; }
  .top-actions { justify-content: stretch; }
  .top-actions button { flex: 1; }
  .board { gap: 2px; padding: 6px; min-width: 0; width: min(100%, 620px); }
  .square { border-radius: 4px; }
  .tile { width: 36px; min-width: 36px; height: 42px; }
  .rack-dock {
    width: calc(100vw - 1rem);
    bottom: 0.5rem;
    gap: 0.55rem;
  }
  .rack-dock-header {
    display: grid;
    gap: 0.35rem;
  }
  .rack { justify-content: flex-start; }
  .rack-actions button { flex: 1; }
  .chat-card { position: static; }
  .trade-offer-row, .trade-counter-form { grid-template-columns: 1fr; }
}



.admin-shell {
  width: min(1300px, 96vw);
  margin: 0 auto;
  padding: 1rem 0 2rem;
  display: grid;
  gap: 1rem;
}
.admin-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 1rem;
  align-items: start;
}
.admin-events {
  display: grid;
  gap: 0.45rem;
  max-height: 76vh;
  overflow: auto;
  padding-right: 0.25rem;
}
.admin-event {
  border-left: 5px solid var(--accent-2);
  background: #fffaf0;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
}
.admin-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-event-message {
  font-weight: 800;
}
.admin-event pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.room-summary {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.75rem;
  background: #fafffc;
  margin-bottom: 0.6rem;
}
.room-summary strong {
  color: var(--accent-deep);
}
.admin-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
}
.admin-controls input {
  max-width: 260px;
}
@media (max-width: 850px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-top { flex-direction: column; align-items: stretch; }
}


.admin-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: white;
  font-weight: 800;
  box-shadow: 0 6px 0 var(--accent-deep);
}


.admin-game-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, #fae4b3, var(--secondary));
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 6px 0 var(--secondary-deep);
}

.language-switch {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 50;
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(31, 122, 90, 0.18);
  box-shadow: 0 10px 24px rgba(17, 65, 48, 0.12);
  backdrop-filter: blur(10px);
}
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.45rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1;
  box-shadow: none;
  background: transparent;
  color: var(--muted);
}
.lang-button:hover:not(:disabled) {
  transform: none;
  background: #f2f9f5;
}
.lang-button.active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: white;
  box-shadow: 0 3px 0 var(--accent-deep);
}
.lang-button span {
  font-weight: 950;
}

.admin-sidebar {
  display: grid;
  gap: 1rem;
}
.storage-note {
  max-width: 820px;
  margin-bottom: 0;
  font-size: 0.82rem;
}
.history-list {
  display: grid;
  gap: 0.6rem;
  max-height: 42vh;
  overflow: auto;
  padding-right: 0.25rem;
}
.history-summary {
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent-2);
  border-radius: 14px;
  padding: 0.75rem;
  background: #fafffc;
}
.history-summary.status-finished { border-left-color: var(--success); }
.history-summary.status-reset { border-left-color: var(--secondary-deep); }
.history-summary.status-abandoned,
.history-summary.status-archived { border-left-color: var(--danger); }
.history-title {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.25rem;
}
.history-title span {
  color: var(--accent-deep);
  font-weight: 900;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-empty {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
}

@media (max-width: 640px) {
  .language-switch {
    position: static;
    width: fit-content;
    margin: 0.5rem 0.75rem 0 auto;
  }
}

.first-action {
  border: 2px solid rgba(42, 166, 116, 0.28);
  border-left: 7px solid var(--accent-2);
  border-radius: 16px;
  background: linear-gradient(180deg, #f5fff9, #eafff2);
  padding: 0.85rem 1rem;
  color: var(--accent-deep);
  font-weight: 900;
  line-height: 1.45;
}

button.start-highlight {
  animation: scroublePulse 1.25s ease-in-out infinite;
  outline: 3px solid rgba(42, 166, 116, 0.32);
  outline-offset: 3px;
}

@keyframes scroublePulse {
  0%, 100% { filter: saturate(1); transform: translateY(0); }
  50% { filter: saturate(1.25); transform: translateY(-2px); }
}