/* the dark terminal: the same brand on warm ink. Dense rows, hairlines, mono numbers, honey for focus only. */
.app {
  --bg: #0E0B08; --bg-2: #120F0B; --panel: #16120E; --raise: #1E1914; --raise-2: #26201A;
  --hair: rgba(255, 244, 223, .075); --hair-2: rgba(255, 244, 223, .14);
  --txt: #F4EAD8; --mute: rgba(244, 234, 216, .58); --dim: rgba(244, 234, 216, .36);
  color-scheme: dark;
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg); color: var(--txt); font-size: 14px;
}
.app ::selection { background: var(--honey); color: var(--ink); }
.app :focus-visible { outline-color: var(--honey); }
.app .status { background: #070605; border-bottom: 1px solid var(--hair); }
.app kbd { background: var(--raise); border-color: var(--hair-2); color: var(--txt); }
.app .flag.risk { background: rgba(229, 72, 77, .15); color: #FF8A8D; }
.app .flag.warn { background: rgba(243, 154, 34, .15); color: #F7B456; }
.app .flag.ok { background: rgba(34, 160, 107, .16); color: #5FD3A0; }
.app .flag.info { background: rgba(255, 244, 223, .07); color: rgba(244, 234, 216, .78); }
.app .flag.wait { background: rgba(255, 244, 223, .05); color: var(--dim); }
.app .ph { background: linear-gradient(90deg, rgba(255, 244, 223, .05), rgba(255, 244, 223, .1), rgba(255, 244, 223, .05)); background-size: 200% 100%; }
.app .tick { animation: tickd .7s var(--ease); }
@keyframes tickd { 0% { background: rgba(243, 154, 34, .35); } 100% { background: transparent; } }
.app .lock .wm { font-size: 24px; color: var(--cream); }
.app .lock .tld { color: var(--cream); padding-bottom: 3px; }
.app a:hover { color: #fff; }
.btn.honey { background: var(--honey); color: var(--ink); } .btn.honey:hover { background: var(--honey-lite); }
.btn.line { box-shadow: inset 0 0 0 1.5px var(--hair-2); color: var(--txt); } .btn.line:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 244, 223, .3); }

/* the top bar */
.top { flex: none; height: 60px; display: flex; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--hair); background: var(--bg-2); }
.find { flex: 0 1 380px; min-width: 200px; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; border-radius: 10px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); color: var(--mute); transition: box-shadow var(--fast); }
.find:focus-within { box-shadow: inset 0 0 0 1.5px var(--honey); color: var(--txt); }
.find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 14px var(--text); color: var(--txt); }
.find input::placeholder { color: var(--dim); }
.find input::-webkit-search-cancel-button { display: none; }
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.app .chip { background: transparent; border-color: var(--hair-2); color: var(--mute); padding: 7px 11px; }
.app button.chip:hover:not(.on) { color: var(--txt); border-color: rgba(255, 244, 223, .26); }
.app .chip.on { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.app .chip .n { opacity: .55; }
.tools { margin-left: auto; display: flex; gap: 8px; flex: none; }
.tbtn { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--hair-2); font: 600 13px/1 var(--text); color: var(--mute); transition: color var(--fast), box-shadow var(--fast), background var(--fast); }
.tbtn:hover { color: var(--txt); box-shadow: inset 0 0 0 1px rgba(255, 244, 223, .26); }
.tbtn .pz { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .16); }
.tbtn.paused .pz { border-radius: 1px; background: none; box-shadow: none; width: 9px; height: 10px; border-left: 3px solid var(--honey); border-right: 3px solid var(--honey); }
.tbtn.paused { color: var(--honey); }
.tbtn .bell { width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v3.6l-1.7 3.3A1 1 0 0 0 5.2 16.4h13.6a1 1 0 0 0 .9-1.5L18 11.6V8a6 6 0 0 0-6-6zm-2.6 16a2.7 2.7 0 0 0 5.2 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v3.6l-1.7 3.3A1 1 0 0 0 5.2 16.4h13.6a1 1 0 0 0 .9-1.5L18 11.6V8a6 6 0 0 0-6-6zm-2.6 16a2.7 2.7 0 0 0 5.2 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tbtn.alerts.on { background: rgba(243, 154, 34, .14); color: var(--honey); box-shadow: inset 0 0 0 1px rgba(243, 154, 34, .45); }

/* the split: feed and panel */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 30vw, 560px); }
.feed { position: relative; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--hair); }
.thead, .tr { display: grid; grid-template-columns: 30px minmax(170px, 1.5fr) 58px 76px minmax(96px, .9fr) 66px minmax(108px, 1fr) minmax(170px, 2fr) 84px; align-items: center; gap: 12px; padding: 0 16px 0 10px; }
.thead { flex: none; height: 34px; border-bottom: 1px solid var(--hair); font: 600 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.r { text-align: right; justify-self: end; }
.tbody { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; outline: 0; scrollbar-width: thin; scrollbar-color: rgba(255, 244, 223, .14) transparent; }
.tr { height: 46px; border-bottom: 1px solid var(--hair); cursor: pointer; position: relative; transition: background 900ms var(--ease); }
.tr:hover { background: rgba(255, 244, 223, .028); }
.tr.sel { background: rgba(243, 154, 34, .09); }
.tr.sel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--honey); }
.tr.new { background: rgba(255, 180, 42, .14); }
.tr.in { animation: rowin 260ms var(--ease) both; }
@keyframes rowin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.tr.in .coin { animation: dripd 480ms var(--ease) both; }
@keyframes dripd { 0% { transform: translateY(-20px) scale(.6, .75); opacity: 0; } 60% { transform: translateY(1px) scale(1.05, .93); opacity: 1; } 100% { transform: none; } }
.tr .star { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--dim); font-size: 15px; line-height: 1; }
.tr .star:hover { color: var(--txt); background: var(--raise); }
.tr .star.on { color: var(--honey); }
.tr .c { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tr .coin { width: 30px; height: 30px; }
.tr .c div { min-width: 0; }
.tr .c b { display: block; font: 700 13.5px/1.15 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt); }
.tr .c small { display: block; font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .m { font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); white-space: nowrap; }
.tr .m.hi { color: var(--txt); }
.tr .m.bad { color: #FF8A8D; }
.tr .m.good { color: #5FD3A0; }
.tr .fl { display: flex; gap: 5px; overflow: hidden; }
.tr .fl .flag { height: 22px; font-size: 11.5px; padding: 0 7px; }
.app .curve { display: flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--mono); color: var(--mute); white-space: nowrap; }
.app .curve i { flex: 1; min-width: 24px; height: 4px; border-radius: 2px; background: rgba(255, 244, 223, .1); position: relative; overflow: hidden; }
.app .curve i::after { content: ''; position: absolute; inset: 0; width: var(--p); background: var(--honey); border-radius: 2px; transition: width 600ms var(--ease); }
.app .curve.grad { color: #5FD3A0; } .app .curve.grad i::after { background: var(--clean); }
.rd { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--text); color: var(--dim); white-space: nowrap; }
.rd i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rd.clean { color: #5FD3A0; } .rd.risky { color: #FF8A8D; } .rd.mixed, .rd.partial { color: #F7B456; }
.rd.reading i { animation: blinkdot 1.1s steps(2) infinite; } .rd.reading { color: var(--mute); }
.rd.none i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.empty-feed { padding: 48px 24px; text-align: center; color: var(--mute); }
.empty-feed b { display: block; color: var(--txt); font-size: 15px; margin-bottom: 6px; }
.newpill { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 8px 14px; border-radius: 99px; background: var(--honey); color: var(--ink); font: 700 12.5px/1 var(--text); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); animation: rowin 200ms var(--ease); }
.feed-foot { flex: none; height: 34px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.feed-foot span { display: inline-flex; align-items: center; gap: 4px; }
.feed-foot kbd { padding: 3px 5px; min-width: 16px; font-size: 10px; }
.feed-foot .sp { margin-left: auto; }

/* the Feed / Jar switch */
.seg { flex: none; display: flex; padding: 3px; border-radius: 10px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.seg button { height: 30px; padding: 0 14px; border-radius: 7px; font: 600 13px/1 var(--text); color: var(--mute); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.seg button:hover:not(.on) { color: var(--txt); }
.seg button.on { background: var(--cream); color: var(--ink); }

/* the Jar */
.jar { display: none; position: relative; flex: 1; min-height: 0; overflow: hidden; background: #1C140B; }
.feed.jar-on .jar { display: block; }
.feed.jar-on .thead, .feed.jar-on .tbody, .feed.jar-on .newpill, .feed.jar-on .feed-foot:not(.jar-foot) { display: none !important; }
.feed .jar-foot { display: none; } .feed.jar-on .jar-foot { display: flex; }
.jar-cv { position: absolute; inset: 0; display: block; touch-action: pan-y; }
.jar-count { position: absolute; left: 78px; right: 96px; top: 16px; z-index: 2; font: 600 12px/1 var(--mono); color: var(--mute); pointer-events: none; display: flex; gap: 14px; flex-wrap: wrap; }
.jar-count b { color: var(--cream); font-weight: 700; }
.jar-count .g { color: #FFCD5A; } .jar-count .s { color: rgba(244, 234, 216, .45); }
.jar-mascot { position: absolute; right: 16px; top: 6px; width: 64px; height: 64px; z-index: 2; pointer-events: none; transform-origin: 50% 90%; }
.jar-mascot.hop { animation: hop .32s var(--ease); }
@keyframes hop { 40% { transform: translateY(-5px) scaleY(1.03); } }
.jar-bubble { position: absolute; right: 88px; top: 16px; z-index: 2; max-width: 340px; padding: 9px 13px; border-radius: 13px 13px 4px 13px; background: var(--cream); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease); pointer-events: none; }
.jar-bubble.on { opacity: 1; transform: none; }
.jar-bubble em { font: 700 12.5px/1 var(--mono); font-style: normal; color: #B4232A; }
.jar-tip { position: absolute; z-index: 4; width: 250px; padding: 12px 14px; border-radius: 12px; background: rgba(30, 25, 20, .96); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--hair-2); pointer-events: none; backdrop-filter: blur(4px); }
.jar-tip b { display: block; font: 700 14.5px/1.2 var(--mono); color: var(--cream); }
.jar-tip > span { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-row { display: flex; gap: 12px; margin-top: 9px; }
.jt-row em { font: 600 12px/1 var(--mono); font-style: normal; color: var(--txt); }
.jt-life { margin-top: 9px; font: 700 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.jt-life.grad { color: #FFCD5A; } .jt-life.rising { color: var(--honey); } .jt-life.fresh { color: var(--mute); } .jt-life.fossil { color: rgba(244, 234, 216, .45); }
.jt-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.jt-flags .flag { height: 22px; font-size: 11.5px; }
.jar-tip small { display: block; margin-top: 9px; font-size: 11px; color: var(--dim); }
.jar-foot .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; }
.lg.up { background: var(--amber); } .lg.new { background: linear-gradient(90deg, rgba(255,180,42,.3), var(--amber)); }
.lg.gold { background: #FFCD5A; box-shadow: 0 0 6px rgba(255, 205, 90, .8); } .lg.stone { background: #6E655C; }
.lg.crack { background: var(--amber); box-shadow: inset 0 0 0 2px #FF5A5F; }

/* the coin panel */
.panel { min-width: 0; overflow-y: auto; background: var(--panel); scrollbar-width: thin; scrollbar-color: rgba(255, 244, 223, .14) transparent; }
.p-sec { padding: 18px 22px; border-bottom: 1px solid var(--hair); }
.p-sec:last-child { border-bottom: 0; }
.p-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.p-h h4 { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.p-h .aside { font: 500 11.5px/1 var(--mono); color: var(--dim); }
.p-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 22px 22px 18px; }
.p-head .coin { width: 76px; height: 76px; }
.p-head h2 { font: 800 28px/1.02 var(--display); letter-spacing: -0.03em; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-head .nm { color: var(--mute); font-size: 13.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); font: 600 11.5px/1 var(--mono); color: var(--mute); white-space: nowrap; }
a.pill:hover, button.pill:hover { color: var(--txt); box-shadow: inset 0 0 0 1px var(--hair-2); }
.p-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.p-actions .btn { min-height: 40px; font-size: 14px; flex: 1; }
.btn.starbtn.on { background: rgba(243, 154, 34, .16); color: var(--honey); box-shadow: inset 0 0 0 1.5px rgba(243, 154, 34, .5); }
.verdict { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 22px 18px; padding: 14px 16px; border-radius: 14px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.verdict .face { width: 52px; height: 52px; }
.verdict b { display: block; font: 800 19px/1.1 var(--display); letter-spacing: -0.02em; }
.verdict p { font-size: 13px; color: var(--mute); margin-top: 3px; line-height: 1.45; }
.verdict.clean { background: rgba(34, 160, 107, .1); box-shadow: inset 0 0 0 1px rgba(34, 160, 107, .35); } .verdict.clean b { color: #5FD3A0; }
.verdict.risky { background: rgba(229, 72, 77, .1); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .35); } .verdict.risky b { color: #FF8A8D; }
.verdict.mixed, .verdict.partial { background: rgba(243, 154, 34, .08); box-shadow: inset 0 0 0 1px rgba(243, 154, 34, .3); } .verdict.mixed b, .verdict.partial b { color: #F7B456; }
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.nums div { padding: 11px 12px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.nums div:nth-child(4n) { border-right: 0; }
.nums div:nth-last-child(-n+4) { border-bottom: 0; }
.nums span { display: block; font-size: 11px; color: var(--dim); margin-bottom: 5px; }
.nums b { font: 700 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--txt); }
.flist { display: grid; gap: 8px; }
.fi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 11px; background: var(--raise); }
.fi p { font-size: 13px; line-height: 1.45; color: var(--mute); }
.fi a { font: 600 11px/1 var(--mono); color: var(--dim); white-space: nowrap; padding-top: 6px; }
.fi a:hover { color: var(--honey); }
.notes { margin-top: 10px; display: grid; gap: 6px; }
.notes p { font-size: 12.5px; color: var(--mute); line-height: 1.45; padding-left: 14px; position: relative; }
.notes p::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.notes p.warn::before { background: var(--honey); } .notes p.risk::before { background: var(--risk); }
.bag { margin-top: 2px; }
.bag-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 244, 223, .08); overflow: hidden; margin: 10px 0 8px; }
.bag-bar i { position: absolute; inset: 0 auto 0 0; width: var(--k); background: var(--cream); border-radius: 5px; transition: width 500ms var(--ease); }
.bag-bar.sold i { background: #FF8A8D; }
.bag-bar b { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(255, 244, 223, .3); }
.bag-row { display: flex; justify-content: space-between; gap: 10px; font: 500 12px/1.3 var(--mono); color: var(--mute); }
.bag-row b { color: var(--txt); font-weight: 700; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--mono); color: #5FD3A0; }
.live-dot i { width: 6px; height: 6px; border-radius: 50%; background: #3DDC84; animation: pulse 2.4s var(--ease) infinite; }
.live-dot.off { color: var(--dim); } .live-dot.off i { background: var(--dim); animation: none; }
.dh-say { font-size: 13.5px; line-height: 1.5; color: var(--txt); }
.dh-list { margin-top: 10px; display: grid; }
.dh-list a, .dh-list div { display: grid; grid-template-columns: minmax(0, 1fr) 54px 92px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hair); font: 500 12px/1 var(--mono); color: var(--mute); }
.dh-list .st { justify-self: end; }
.dh-list .st.g { color: #5FD3A0; } .dh-list .st.d { color: #FF8A8D; } .dh-list .st.y { color: #F7B456; }
.map { border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--hair); padding: 6px; }
.map .bubbles a:hover circle { stroke: var(--honey); stroke-width: 2; }
.map-note { margin-top: 8px; font: 500 11.5px/1.45 var(--mono); color: var(--dim); }
.app .legend { color: var(--mute); }
.eb { width: 100%; border-collapse: collapse; margin-top: 12px; font: 500 12px/1 var(--mono); }
.eb th { text-align: left; font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 0 0 8px; }
.eb td { padding: 7px 0; border-top: 1px solid var(--hair); color: var(--mute); white-space: nowrap; }
.eb td:first-child a { color: var(--txt); }
.eb .k-bundle { color: #FF8A8D; } .eb .k-sniper { color: #F7B456; }
.eb .r, .eb th.r { text-align: right; }
.p-foot { font: 500 11.5px/1.6 var(--mono); color: var(--dim); }

/* the panel with no coin open */
.p-empty { padding: 34px 22px 10px; text-align: center; }
.p-empty .face { width: 120px; height: 120px; margin: 0 auto 10px; }
.p-empty h3 { font: 800 26px/1.05 var(--display); letter-spacing: -0.03em; color: var(--cream); }
.p-empty p { color: var(--mute); font-size: 13.5px; margin: 8px auto 0; max-width: 330px; line-height: 1.5; }
.ev { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); cursor: pointer; }
.ev .coin { width: 30px; height: 30px; }
.ev b { font: 700 13px/1.2 var(--mono); color: var(--txt); }
.ev small { display: block; font-size: 11.5px; color: var(--dim); }
.ev .t { font: 500 11px/1 var(--mono); color: var(--dim); }
.ev.fresh { animation: evfresh 1.4s var(--ease); }
@keyframes evfresh { 0% { background: rgba(229, 72, 77, .18); } 100% { background: transparent; } }
.ev-none { padding: 12px 0; border-top: 1px solid var(--hair); color: var(--dim); font-size: 12.5px; }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: grid; gap: 10px; width: 360px; }
.toast { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--raise-2); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--hair-2); animation: toastin 260ms var(--ease); cursor: pointer; }
.toast .coin { width: 36px; height: 36px; }
.toast b { display: block; font-size: 13.5px; color: var(--txt); }
.toast p { font-size: 12.5px; color: var(--mute); margin-top: 2px; line-height: 1.35; }
.toast .x { color: var(--dim); font-size: 16px; padding: 4px; }
.toast.risk { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(229, 72, 77, .5); }
.toast.out { opacity: 0; transform: translateX(16px); transition: all 200ms var(--ease); }
@keyframes toastin { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* the alerts dialog */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(7, 6, 5, .62); backdrop-filter: blur(3px); animation: fade 160ms var(--ease); }
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(460px, calc(100vw - 32px)); padding: 28px; border-radius: 20px; background: var(--panel); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--hair-2); animation: sheetin 220ms var(--ease); }
@keyframes sheetin { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.am-drop { width: 84px; height: 84px; margin-bottom: 8px; }
.sheet h2 { font: 800 28px/1.05 var(--display); letter-spacing: -0.03em; color: var(--cream); margin-bottom: 10px; }
.sheet > p { color: var(--mute); line-height: 1.55; font-size: 14px; }
.sheet ul { margin: 14px 0 0; padding: 0 0 0 18px; color: var(--mute); font-size: 13.5px; line-height: 1.6; }
.am-row { display: flex; gap: 10px; margin-top: 22px; } .am-row .btn { flex: 1; }
.am-err { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(229, 72, 77, .12); color: #FF8A8D; font-size: 13px; line-height: 1.45; }

/* narrower screens */
@media (max-width: 1500px) {
  .thead, .tr { grid-template-columns: 30px minmax(150px, 1.4fr) 52px 70px minmax(84px, .8fr) 60px minmax(96px, 1fr) minmax(150px, 1.8fr) 78px; gap: 10px; }
}
@media (max-width: 1240px) {
  .thead span:nth-child(7), .tr > :nth-child(7) { display: none; }
  .thead, .tr { grid-template-columns: 30px minmax(140px, 1.4fr) 50px 66px minmax(80px, .8fr) 58px minmax(140px, 1.8fr) 74px; }
  .status .hide-s { display: none; }
}
@media (max-width: 980px) {
  .app { height: auto; min-height: 100vh; overflow: auto; }
  .top { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .find { order: 3; flex: 1 1 100%; }
  .filters { order: 4; flex: 1 1 100%; }
  .split { display: block; }
  .feed { border-right: 0; height: calc(100vh - 170px); }
  .thead { display: none; }
  .tr { grid-template-columns: 26px minmax(0, 1fr) 46px 66px 74px; height: 54px; }
  .tr > :nth-child(5), .tr > :nth-child(6), .tr > :nth-child(7), .tr > :nth-child(8) { display: none; }
  .feed-foot { display: none; }
  .panel { position: fixed; inset: 0; z-index: 20; transform: translateY(100%); transition: transform 240ms var(--ease); }
  .panel.open { transform: none; }
  .p-close { display: inline-flex !important; }
  .toasts { left: 12px; right: 12px; width: auto; }
  .status .sp span, .status > span:nth-child(5) { display: none; }
}
.p-close { display: none; }