/* foal stable — the canvas is the world; every piece of UI floats over it.
   Views (body[data-view]):
     landing  signed out: full canvas, a centered hero card
     panel    the stable (home): canvas on the left, your animals docked right
     room     every other page: tiles left, a small live window right
     focus    an activity (training, a race, a climb): full canvas + one bar
     modal    a card over the canvas (results, a new animal) — always closable

   Visual roles (docs/ux-redesign.md). One treatment each, never borrowed:
     you are here   bright text + bright underline + faint fill   (--current)
     selected       lavender ring + faint fill + ✓               (--sel*)
     primary        green fill, ONLY via .primary, one per region (--primary*)
     secondary      outline + ink text (every other button)
     destructive    red outline + text                           (.danger)
     oats           gold text only — never a fill, border or state (--oats)
     status tag     borderless small caps with a glyph            (.tag)
     eyebrow        small caps, dim */
:root {
  --bg: #0a0a0e; --panel: rgba(12, 12, 17, 0.86); --panel-solid: rgba(14, 14, 20, 0.94);
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16);
  --ink: #cfcfd6; --bright: #ececf1; --dim: rgba(207, 207, 214, 0.55);
  --current: var(--bright); --current-bg: rgba(255, 255, 255, 0.07);
  --sel: #aab0e6; --sel-bg: rgba(170, 176, 230, 0.12); --sel-bd: rgba(170, 176, 230, 0.75);
  --primary: #7ac88c; --primary-bg: rgba(120, 200, 140, 0.18); --primary-bd: rgba(120, 200, 140, 0.5);
  --oats: #ffe6a0;
  --danger: #e08585;
  --pw: 372px; --top: 46px;
  --bta-bg: rgba(16, 16, 22, 0.98); --bta-fg: var(--ink); --bta-muted: var(--dim);
  --bta-border: var(--line-2); --bta-active: rgba(255, 255, 255, 0.08);
  --bta-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body { font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
h1, h2, h3 { color: var(--bright); margin: 0 0 6px; line-height: 1.25; letter-spacing: 0.01em; }
h1 { font-size: 17px; } h2 { font-size: 15px; } h3 { font-size: 13px; }
p { margin: 0 0 9px; }
small { font-size: 11px; color: var(--dim); }
strong, b { color: var(--bright); }
.oats-text { color: var(--oats); }

/* ---- controls: secondary is the default button ---- */
button, select, input { font: inherit; color: inherit; }
button {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
button:hover { background: rgba(255, 255, 255, 0.09); color: var(--bright); }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
button.primary { background: var(--primary-bg); border-color: var(--primary-bd); color: var(--bright); font-weight: 700; }
button.primary:hover { background: rgba(120, 200, 140, 0.32); }
button.primary:disabled:hover { background: var(--primary-bg); }
button.danger { background: transparent; border-color: rgba(224, 133, 133, 0.55); color: var(--danger); }
button.danger:hover { background: rgba(224, 133, 133, 0.12); }
button.text { background: none; border: 0; padding: 2px 0; color: var(--dim); }
button.text:hover { color: var(--bright); text-decoration: underline; background: none; }
button.small { padding: 3px 9px; font-size: 11px; }
button.close { position: absolute; top: 10px; right: 10px; background: none; border: 0; color: var(--dim);
  font-size: 16px; line-height: 1; padding: 6px 8px; border-radius: 6px; }
button.close:hover { color: var(--bright); background: rgba(255, 255, 255, 0.08); }
input, select {
  width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2);
  border-radius: 6px; padding: 6px 9px;
}
select option { background: #15151c; }
input::placeholder { color: var(--dim); }
label { display: block; margin-bottom: 5px; color: var(--dim); font-size: 11px; }
.confirm-q { color: var(--bright); margin-right: 4px; }

/* ---- the world ---- */
#world { position: fixed; top: var(--top); left: 0; width: 100vw; height: calc(100vh - var(--top));
  display: block; z-index: 0; background: var(--bg); }
body[data-view=panel] #world { width: calc(100vw - var(--pw)); }

.panel, #panel, .hero-card, #toast {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ---- top bar: brand, a waiting race, oats, the account menu ---- */
#top { position: fixed; top: 0; left: 0; right: 0; height: var(--top); z-index: 20;
  display: flex; align-items: center; gap: 18px; padding: 0 14px;
  background: rgba(10, 10, 14, 0.92); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 15px; color: var(--bright); letter-spacing: 0.02em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
body[data-view=focus] .brand { pointer-events: none; }
.account-bar { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
#balance { color: var(--oats); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
#balance .gain { margin-left: 6px; animation: gain 2.6s ease-out forwards; }
@keyframes gain { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.account { position: relative; }
#who { background: none; border: 1px solid transparent; color: var(--dim); font-size: 12px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; padding: 4px 8px; }
#who:hover, #who[aria-expanded=true] { color: var(--bright); border-color: var(--line-2); }
#account-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 8px;
  background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--bta-shadow);
  display: flex; flex-direction: column; gap: 6px; }
#account-menu small { padding: 0 2px; }
#pending { font-size: 12px; }

/* ---- the dock: the one navigation. Exactly one item is current. ---- */
#dock { display: none; position: fixed; z-index: 14; bottom: 16px; left: 50%; transform: translateX(-50%);
  gap: 6px; padding: 7px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
body[data-view=panel] #dock { display: flex; left: calc((100vw - var(--pw)) / 2); }
body[data-view=room] #dock { display: flex; }
#dock a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px;
  align-items: center; padding: 9px 13px 10px; border-radius: 10px; color: var(--ink);
  border: 1px solid transparent; transition: background 120ms, border-color 120ms; }
#dock a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.035); }   /* faint: never mistaken for current */
#dock a:hover b { color: var(--bright); }
#dock .ic { grid-row: span 2; font-size: 20px; line-height: 1; }
#dock b { font-size: 13px; color: var(--ink); font-weight: 600; white-space: nowrap; }
#dock small { white-space: nowrap; }
#dock a[aria-current=page] { background: var(--current-bg); border-color: var(--line-2); box-shadow: inset 0 -2px 0 var(--current); }
#dock a[aria-current=page] b { color: var(--current); font-weight: 700; }
#dock .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--bright); }
@media (max-width: 1560px) { #dock small { display: none; } #dock .ic { grid-row: auto; } }
@media (max-width: 1060px) and (min-width: 721px) {
  #dock a { grid-template-columns: auto; justify-items: center; padding: 7px 10px 8px; row-gap: 2px; }
  #dock b { font-size: 11px; }
}

/* ---- canvas overlay button (stable only) ---- */
#reset { position: fixed; right: 12px; top: calc(var(--top) + 12px); z-index: 10;
  background: var(--panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body[data-view=panel] #reset { right: calc(var(--pw) + 12px); }

/* ---- hero (landing + empty stable): centered over the canvas sky ---- */
#hero { position: fixed; z-index: 12; top: calc(var(--top) + (100vh - var(--top)) * 0.3); left: 50%;
  transform: translate(-50%, -50%); width: min(400px, calc(100vw - 32px)); text-align: center; }
body[data-view=panel] #hero { left: calc((100vw - var(--pw)) / 2); width: min(360px, calc(100vw - var(--pw) - 32px)); }
.hero-card { padding: 20px 22px 18px; }
.hero-card h1 { font-size: 21px; margin-bottom: 8px; }
.hero-card p { color: var(--dim); }
.hero-card form { display: flex; gap: 6px; margin-top: 14px; text-align: left; }
.hero-card .handle-combo { position: relative; flex: 1; min-width: 0; }
.hero-card .fine { font-size: 11px; color: var(--dim); margin: 12px 0 0; }
.hero-card .error { margin: 10px 0 0; }

/* ---- the panel ---- */
#panel { position: fixed; z-index: 15; display: flex; flex-direction: column; overflow: hidden; }
#heading { position: relative; }
#heading:empty { display: none; }
#content { overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 16px; flex: 1; min-height: 0; }
#content::-webkit-scrollbar { width: 7px; }
#content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.page-heading { padding: 13px 14px 11px; border-bottom: 1px solid var(--line); }
.eyebrow, .page-heading .eyebrow { display: block; font-size: 10px; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; }
.page-heading h1 { margin: 0; }
.page-heading p { margin: 4px 0 0; color: var(--dim); }
.page-heading .hint { font-style: normal; color: var(--dim); font-size: 11px; margin-top: 6px; }
.page-heading .actions { margin-top: 10px; }
.back-link { display: inline-block; margin-bottom: 8px; color: var(--ink); font-size: 12px; padding: 3px 9px 3px 7px;
  border: 1px solid var(--line-2); border-radius: 6px; }
.back-link:hover { color: var(--bright); text-decoration: none; background: rgba(255, 255, 255, 0.07); }

body[data-view=landing] #panel { display: none; }
body[data-view=panel] #panel { top: var(--top); right: 0; bottom: 0; width: var(--pw);
  border-radius: 0; border-width: 0 0 0 1px; background: var(--panel-solid); }
body[data-view=focus] #panel { left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(600px, calc(100vw - 24px)); max-height: 40vh; }
body[data-view=focus] #heading { display: none; }
body[data-view=focus] #content { padding: 12px 14px; }
body[data-view=modal] #panel { left: 50%; top: calc(var(--top) + (100vh - var(--top)) / 2); transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - var(--top) - 24px); }
body[data-view=modal] .page-heading { text-align: center; padding: 16px 40px 12px; }
body[data-view=modal] .page-heading .actions { justify-content: center; }

/* ---- room view: a page, not a dialog. ← stable top-left; tiles left; the
   live window (the canvas, moved into #window-slot) + actions right. ---- */
body[data-view=room] { background: radial-gradient(ellipse at 50% 30%, #161624 0%, var(--bg) 70%); }
body[data-view=room] #panel { top: calc(var(--top) + 14px); left: max(16px, 3vw); right: max(16px, 3vw); bottom: 96px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 36%); grid-template-rows: auto minmax(0, 1fr);
  border-radius: 12px; background: var(--panel-solid); border-color: var(--line); box-shadow: none; }
body[data-view=room] #heading { grid-column: 1; grid-row: 1; }
body[data-view=room] .page-heading { padding: 16px 24px 12px; border: 0; }
body[data-view=room] .page-heading .eyebrow { font-size: 11px; }
body[data-view=room] .page-heading h1 { font-size: 22px; }
body[data-view=room] .page-heading p.sub { font-style: italic; }
body[data-view=room] #content { grid-column: 1; grid-row: 2; padding: 4px 24px 24px; }
body[data-view=room] #reset { display: none !important; }
#side { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 12px; min-height: 0;
  padding: 20px 22px; border-left: 1px solid var(--line); overflow-y: auto; }
#window-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#window-cap b { font-size: 15px; }
#window-cap small { text-align: right; }
#window-slot { flex: none; }
body[data-view=room] #world { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  border-radius: 10px; border: 1px solid var(--line-2); }
#side-body { display: flex; flex-direction: column; gap: 10px; }
#side-body .big { width: 100%; padding: 13px 16px; font-size: 15px; border-radius: 10px; white-space: normal; }
#side-body .note { margin: 0; }
/* a flat, non-interactive panel (never lifts, never rounded like a tile) */
.box { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: rgba(255, 255, 255, 0.02); }
.box h3 { margin-bottom: 4px; }
.box p { color: var(--dim); font-size: 12px; margin-bottom: 8px; }
.box p:last-child { margin-bottom: 0; }
.box .eyebrow { margin-bottom: 6px; }

.room-sub { font-size: 11px; color: var(--dim); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; margin: 14px 0 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
/* a clickable tile: rounded 12, lifts on hover */
.tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left;
  padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025);
  color: inherit; white-space: normal; cursor: pointer; transition: border-color 120ms, background 120ms, transform 120ms; }
button.tile:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-2); transform: translateY(-2px); color: inherit; }
.tile canvas { display: block; width: 100%; height: 96px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); margin-bottom: 4px; }
.tile b { color: var(--bright); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile small { display: block; }
.tile.done { cursor: default; background: rgba(255, 255, 255, 0.01); }
.tile.selected, button.tile.selected:hover { border-color: var(--sel-bd); background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--sel-bd); transform: none; }
.tile.selected::before, .chips button.on::before, .result-list .you::before {
  content: '✓'; color: #14141c; background: var(--sel); font-weight: 700; font-size: 10px; line-height: 16px;
  width: 16px; height: 16px; text-align: center; border-radius: 50%; }
.tile.selected::before { position: absolute; top: 14px; left: 14px; z-index: 1; }
/* status tag: borderless small caps with a glyph — never a pill */
.tag { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.tile .tag { position: absolute; top: 14px; right: 14px; padding: 2px 6px; border-radius: 4px; background: rgba(10, 10, 14, 0.78); }
.tag.price { color: var(--oats); }
.tile .worn-tag { position: absolute; bottom: 10px; right: 10px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.tile .post-text { margin: 0; }
.tile.plain canvas { display: none; }
/* segmented tabs: the current one is "you are here", one level down */
.tabs { display: flex; gap: 6px; margin: 2px 0 10px; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; padding: 9px 12px; font-size: 13px; border-radius: 8px 8px 0 0; background: none; border: 0; color: var(--dim); }
.tabs button:hover { background: rgba(255, 255, 255, 0.04); }
.tabs button.on { color: var(--current); background: var(--current-bg); box-shadow: inset 0 -2px 0 var(--current); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.chips button.on { color: var(--bright); border-color: var(--sel-bd); background: var(--sel-bg); }
/* practice race settings: a label over each row of chips */
.practice-settings { margin: 12px 0; }
.practice-settings .setting { margin: 8px 0 10px; }
.practice-settings .setting-label { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.practice-settings .note { margin: 4px 0 0; }
/* buttons that name an animal ("make X the entrant (replaces Y)") wrap
   instead of pushing the side panel into a sideways scroll */
.box .actions button { white-space: normal; text-align: left; }

/* ---- content blocks ---- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; margin: 10px 0; min-width: 0; background: rgba(255, 255, 255, 0.015); }
.card p:last-child { margin-bottom: 0; }
.card canvas { display: block; width: 100%; height: 96px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.03); border-radius: 5px; }
.card .actions { margin-top: 9px; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 8px; }
.stats small { display: block; font-size: 10px; }
.stat { font-weight: 700; color: var(--bright); font-variant-numeric: tabular-nums; }
.stat-line { font-size: 11px; color: var(--dim); margin: 0 0 6px; }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; color: var(--dim);
  max-height: 4.5em; overflow: hidden; margin: 0 0 4px; }
.note { margin: 10px 0; color: var(--dim); }
.note strong { color: var(--oats); }
.error { color: var(--danger); }
.loading { display: flex; align-items: center; gap: 9px; padding: 14px 0; color: var(--dim); }
.loading::before { content: ''; width: 13px; height: 13px; flex: none; border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--ink); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* animal cards on the stable: name row with a color dot, preview, stats, post text */
.horse-card .nmrow { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.horse-card .nmrow h3 { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

/* ---- activity bar (focus view): title + status left, exit right ---- */
.activity { display: flex; flex-direction: column; gap: 6px; }
.activity-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.activity-row > div:first-child { min-width: 0; flex: 1; }
.activity h3 { margin: 0 0 2px; }
.activity p { margin: 0; color: var(--dim); }
.activity .explain { font-size: 11px; color: var(--dim); }
.timer { font-variant-numeric: tabular-nums; color: var(--dim); margin-left: 8px; font-weight: 400; font-size: 12px; }
.progress-track { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; }
.progress-track div { height: 100%; width: 0; background: var(--ink); transition: width 120ms linear; }
body[data-view=focus] .card, body[data-view=modal] .card { border: 0; padding: 0; margin: 0; background: none; }
body[data-view=modal] .card + .card { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0; }

/* ---- results ---- */
.result-list { padding: 0; margin: 6px 0 8px; list-style: none; }
.result-list li { display: flex; align-items: center; gap: 8px; padding: 4px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.result-list li span:first-of-type { flex: 1; }
.result-list li span:last-child { color: var(--dim); }
.result-list .you { border-color: var(--sel-bd); background: var(--sel-bg); color: var(--bright); font-weight: 700; }
.result-big { font-size: 26px; font-weight: 700; color: var(--bright); margin: 2px 0 4px; }
.result-note { font-size: 11px; color: var(--dim); text-align: center; margin: 0 0 8px; }

/* ---- inbox ---- */
.notification { display: flex; gap: 12px; }
.notification.unread { border-left: 3px solid var(--ink); }
.notification.unread h3::after { content: ' ●'; color: var(--bright); font-size: 9px; vertical-align: 2px; }
.place-number { font-weight: 700; font-size: 18px; color: var(--bright); min-width: 30px; }
.notification p { color: var(--dim); font-size: 12px; margin-bottom: 4px; }
.empty-inbox { text-align: center; padding: 18px 12px; }
.empty-inbox > span { font-size: 22px; display: block; margin-bottom: 4px; }
.empty-inbox p { color: var(--dim); }

/* toast: top-center, never under the focus bar */
#toast { position: fixed; top: calc(var(--top) + 12px); left: 50%; transform: translateX(-50%); z-index: 30;
  padding: 9px 16px; max-width: calc(100vw - 24px); color: var(--bright); }
body[data-view=panel] #toast { left: calc((100vw - var(--pw)) / 2); }

/* ---- phones: the panel becomes a bottom sheet under the canvas ---- */
@media (max-width: 720px) {
  #top { gap: 10px; padding: 0 10px; }
  .brand { font-size: 14px; }
  #who { max-width: 110px; }
  body[data-view=panel] #world { width: 100vw; height: calc(44vh - var(--top)); }
  body[data-view=panel] #panel { top: 44vh; left: 0; width: auto; border-width: 1px 0 0; border-radius: 12px 12px 0 0; }
  body[data-view=panel] #hero, body[data-view=panel] #toast { left: 50%; }
  body[data-view=panel] #hero { top: calc(var(--top) + (44vh - var(--top)) / 2); width: min(360px, calc(100vw - 24px)); }
  body[data-view=panel] #reset { right: 12px; }
  body[data-view=panel] #dock { left: 8px; right: 8px; transform: none; bottom: calc(56vh + 8px); padding: 5px; gap: 3px; }
  #dock a { flex: 1; grid-template-columns: auto; justify-items: center; padding: 6px 2px; min-width: 0; row-gap: 2px; }
  #dock .ic { grid-row: auto; font-size: 18px; }
  #dock b { font-size: 10px; }
  body[data-view=focus] #panel { bottom: 10px; max-height: 46vh; }
}
@media (max-width: 420px) {
  .brand span { display: none; }
}

/* ---- picking animals up (stable-grab.js) ---- */
#world.grabbable { cursor: grab; }
#world.grabbing { cursor: grabbing; touch-action: none; }
/* the trash can: appears on the left while an animal is held. pointer-events
   none — the canvas keeps the pointer; the drop test reads this box's rect */
#trash { position: fixed; z-index: 20; left: 24px; top: calc(var(--top) + (100vh - var(--top)) * 0.42);
  transform: translateY(-50%); width: 104px; padding: 16px 10px 12px; text-align: center; pointer-events: none;
  background: var(--panel); border: 1px dashed var(--line-2); border-radius: 14px; color: var(--dim);
  animation: trash-in 0.16s ease-out; transition: border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.12s; }
#trash svg { width: 54px; height: 60px; display: block; margin: 0 auto 6px; overflow: visible; }
#trash .bin, #trash .lid rect { fill: rgba(255, 255, 255, 0.1); stroke: currentColor; stroke-width: 2.5; }
#trash .ribs { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: 0.6; }
#trash .lid { transform-origin: 6px 13px; transition: transform 0.14s ease-out; }
#trash span { font-size: 11px; letter-spacing: 0.04em; }
#trash.open { color: var(--danger); border-color: var(--danger); border-style: solid;
  box-shadow: 0 0 0 4px rgba(224, 133, 133, 0.18); transform: translateY(-50%) scale(1.06); }
#trash.open .lid { transform: rotate(-28deg); }
@keyframes trash-in { from { opacity: 0; transform: translate(-12px, -50%); } }