/* ===== Tables ===== */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.t th { text-align: left; padding: 10px 16px 9px; font: 600 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); background: var(--panel); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.t td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr { transition: background .12s; }
table.t tbody tr:hover { background: var(--hover); }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.t td.r, table.t th.r { text-align: right; }
table.t td.shrink, table.t th.shrink { width: 1%; white-space: nowrap; }
table.t tr.group td { background: var(--panel-2); font: 600 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--sub); padding-top: 8px; padding-bottom: 8px; }
table.t td.label { font: 600 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--sub); }
table.t.compact td { padding-top: 7px; padding-bottom: 7px; }
table.t.compact th { padding-top: 8px; padding-bottom: 7px; }
table.t td.money, table.t td.price { font: 500 12.5px var(--mono); color: var(--green); white-space: nowrap; }
.panel > .table-wrap:first-child table.t thead th:first-child, .panel-body.flush:first-child > .table-wrap:first-child table.t thead th:first-child { border-top-left-radius: var(--radius-lg); }
.panel > .table-wrap:first-child table.t thead th:last-child, .panel-body.flush:first-child > .table-wrap:first-child table.t thead th:last-child { border-top-right-radius: var(--radius-lg); }
.table-wrap.scroll { max-height: 70vh; overflow: auto; }
.table-wrap.scroll table.t th { position: sticky; top: 0; z-index: 1; }
/* headers stay on screen while a long table scrolls with the page (ui.js marks wraps whose table fits as .fits;
   a table wider than its box keeps side-scrolling instead) */
.table-wrap.fits:not(.scroll) { overflow: visible; }
.table-wrap.fits:not(.scroll) > table.t > thead th { position: sticky; top: var(--top); z-index: 2; }
@media (max-width: 640px) {
  table.t th, table.t td { padding-left: 12px; padding-right: 12px; }
  .table-wrap > table.t:has(thead) { min-width: 560px; }
}

/* ===== Tabs (the underline slides between tabs; positions set by ui.js) ===== */
.tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a { position: relative; flex: none; height: 40px; padding: 0 12px; background: none; border: 0; color: var(--sub); cursor: pointer; font: 600 13px var(--sans); white-space: nowrap; transition: color .15s; display: inline-flex; align-items: center; }
.tabs button:hover, .tabs a:hover { color: var(--text); }
.tabs .on { color: var(--text); }
.tabs .count { margin-left: 7px; padding: 0 6px; height: 18px; display: inline-flex; align-items: center; border-radius: 9px; background: rgba(255, 236, 214, .05); font: 600 11px var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.tabs .on .count { background: var(--accent-dim); color: var(--accent-hi); }
.tabs::after, .fchips::after, .chips::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; border-radius: 2px 2px 0 0; pointer-events: none;
  width: calc(var(--ind-w, 0px) - 20px); transform: translate(calc(var(--ind-x, 0px) + 10px), calc(var(--ind-b, 0px) - 2px)); opacity: var(--ind-o, 0);
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
}
.tabs.ind-live::after, .fchips.ind-live::after, .chips.ind-live::after { transition: transform .22s var(--ease-out), width .22s var(--ease-out), opacity .15s; }
.tabs:not(.has-ind) .on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }

/* ===== Toasts ===== */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; width: min(370px, calc(100vw - 32px)); }
.toast { background: #191512; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 11px 34px 11px 15px; box-shadow: 0 16px 44px rgba(0, 0, 0, .55); animation: toastIn .22s var(--ease-out); display: grid; gap: 3px; position: relative; overflow: hidden; }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sub); }
.toast.ok::before { background: var(--green); }
.toast.err::before { background: var(--red); }
.toast.pending::before { background: var(--accent); }
.toast.out { animation: toastOut .16s var(--ease) forwards; }
.toast .tt { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.toast .tm { color: var(--sub); font-size: 12.5px; word-break: break-word; }
.toast .pend { width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, .15); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
.toast .x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 5px; background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 16px; line-height: 1; }
.toast .x:hover { color: var(--text); background: rgba(255, 236, 214, .06); }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }

/* ===== Dialogs (confirm, picker) ===== */
.overlay { position: fixed; inset: 0; z-index: 150; background: rgba(6, 4, 3, 0.74); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .14s var(--ease); }
.overlay.out { animation: fadeOut .12s var(--ease) forwards; }
.overlay.out > * { animation: dialogOut .12s var(--ease) forwards; }
.dialog { width: min(450px, 100%); background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--lift), 0 30px 80px rgba(0, 0, 0, .65); animation: dialogIn .18s var(--ease-out); }
@keyframes dialogIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@keyframes dialogOut { to { opacity: 0; transform: scale(.97); } }
.dialog .dbody { padding: 20px 20px 6px; }
.dialog h2 { font: 600 19px/1.25 var(--display); text-transform: none; letter-spacing: .005em; }
.dialog .dsub { color: var(--sub); margin-top: 7px; font-size: 13px; }
.dialog .dextra { margin-top: 12px; }
.dialog .dfoot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 20px 18px; }
.dialog .dfoot .hint { margin-right: auto; color: var(--faint); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.dialog .choices { display: grid; gap: 8px; margin-top: 16px; }
.choice { display: grid; gap: 4px; width: 100%; padding: 12px 14px; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; cursor: pointer; transition: background .12s, border-color .12s, transform .12s; }
.choice:hover { background: var(--raise); border-color: var(--accent); }
.choice:active { transform: scale(.99); }
.choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.choice b { font: 600 13.5px var(--sans); }
.choice span { color: var(--sub); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 520px) { .dialog .dfoot .hint { display: none; } }

/* ===== Command palette ===== */
.palette-wrap { align-items: flex-start; padding-top: 14vh; }
.palette { width: min(600px, 100%); background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65); overflow: hidden; animation: dialogIn .16s var(--ease-out); }
.palette-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.palette-in svg { width: 17px; height: 17px; color: var(--faint); }
.palette input { width: 100%; height: 52px; padding: 0 2px; background: transparent; border: 0; color: var(--text); font: 400 15px var(--sans); }
.palette input:focus { outline: none; }
.palette input::placeholder { color: var(--faint); }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.palette li { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: var(--radius); cursor: pointer; color: var(--sub); }
.palette li.phead { height: 28px; padding-top: 6px; cursor: default; font: 500 11px/1 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--faint); }
.palette li .grp { margin-left: auto; font: 600 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .07em; }
.palette li.sel { background: var(--accent-dim); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.palette li .ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line-2); font: 600 10px var(--display); color: var(--faint); flex: none; overflow: hidden; text-transform: uppercase; }
.palette li .ic img { width: 100%; height: 100%; }
.palette li .ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.palette li.sel .ic { color: var(--accent-hi); border-color: rgba(232, 112, 26, .4); }
.palette li.none { justify-content: center; height: 64px; color: var(--faint); cursor: default; }
.palette .pfoot { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; align-items: center; background: rgba(255, 236, 214, .015); }
.palette .pfoot span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 520px) { .palette-wrap { padding-top: 8vh; } .palette .pfoot { display: none; } }

/* ===== Servers with their players inside ===== */
.lobby { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); align-items: start; }
.lobby.single { grid-template-columns: 1fr; }
.srv { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--lift); transition: border-color .2s; }
.srv:hover { border-color: var(--line-2); }
.srv.enter { animation: stIn .24s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.srv.leave { animation: fadeOut .25s var(--ease) forwards; }
.srv-head { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px 11px; background: linear-gradient(180deg, rgba(232, 112, 26, .05), rgba(232, 112, 26, 0)); }
.srv-title { font: 500 16px/1.3 var(--display); letter-spacing: .02em; transition: color .15s; }
.srv-title:hover { color: var(--accent-hi); }
.srv-title .jid { font: 400 11.5px var(--mono); color: var(--faint); margin-left: 8px; letter-spacing: 0; }
.srv-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: 12px; color: var(--faint); }
.srv-meta b { color: var(--text); font-weight: 600; }
.srv-state { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; }
.srv-state .open, .srv-state .locked { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font: 600 11.5px/1 var(--sans); border: 1px solid; }
.srv-state .open { color: #9EDDB2; background: var(--green-dim); border-color: rgba(91, 197, 125, .26); }
.srv-state .open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.srv-state .locked { color: #F0D586; background: var(--amber-dim); border-color: rgba(235, 194, 79, .28); }
.srv-state .locked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.srv-cap { display: block; height: 3px; background: var(--line); }
.srv-cap i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width .5s var(--ease); }
.srv-list { list-style: none; margin: 0; padding: 6px; }
.srv-empty { padding: 16px 10px; color: var(--faint); font-size: 12.5px; text-align: center; }

.pl { display: grid; grid-template-columns: 30px minmax(0, 1fr) 80px 96px auto; gap: 12px; align-items: center; padding: 6px 10px; border-radius: var(--radius); cursor: pointer; transition: background .12s; }
.pl:hover { background: rgba(255, 236, 214, 0.035); }
.pl.enter { animation: stIn .22s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.pl.leave { animation: fadeOut .25s var(--ease) forwards; pointer-events: none; }
.pl.partial { opacity: .7; }
.pl .nm { min-width: 0; }
.pl .ch { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .ch.none { color: var(--faint); font-weight: 400; }
.pl .un { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .un .held { color: var(--sub); }
.pl .cash { text-align: right; font: 500 12.5px var(--mono); color: var(--green); font-variant-numeric: tabular-nums; }
.pl .flags { display: inline-flex; gap: 6px; margin-left: 6px; }
.pl .flag { font-size: 11px; font-weight: 600; color: var(--accent-hi); }
.pl .flag.muted { color: var(--red); }
.pl .acts { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.pl:hover .acts, .pl:focus-within .acts { opacity: 1; }
@media (hover: none) { .pl .acts { opacity: 1; } }
@media (max-width: 640px) {
  .pl { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .pl .hp, .pl .acts { display: none; }
  .srv-head { flex-wrap: wrap; }
  .srv-state { margin-left: 0; }
}

.quick { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== Event feed ===== */
.feed { list-style: none; margin: 0; padding: 6px 0; }
.feed li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: baseline; padding: 6px 16px; font-size: 13px; }
.feed li.new { animation: feedIn .6s var(--ease); }
@keyframes feedIn { from { background: rgba(232, 112, 26, .1); } to { background: transparent; } }
.feed.scroll { max-height: 540px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2A241F transparent; }
.feed .tm { color: var(--faint); font: 11.5px var(--mono); }
.feed .tx { color: var(--sub); word-break: break-word; }
.feed .tx a.mono { color: var(--faint); }
.feed-link { font-size: 12px; color: var(--accent-hi); }
.feed-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-right: 8px; white-space: nowrap; vertical-align: 1px; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.tag.chat { color: var(--sub); } .tag.chat::before { background: var(--sub); }
.tag.kill, .tag.death { color: #F08A7F; } .tag.kill::before, .tag.death::before { background: var(--red); }
.tag.purchase, .tag.money, .tag.refund, .tag.item { color: #8FD9A6; }
.tag.purchase::before, .tag.money::before, .tag.refund::before, .tag.item::before { background: var(--green); }
.tag.admin, .tag.character { color: #EED27E; } .tag.admin::before, .tag.character::before { background: var(--amber); }
.tag.join, .tag.spawn { color: var(--accent-hi); } .tag.join::before, .tag.spawn::before { background: var(--accent); }

/* ===== Timeline / chat log ===== */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline .day { padding: 8px 16px; position: sticky; top: var(--top); background: var(--panel-2); z-index: 1; border-bottom: 1px solid var(--line); font: 500 11px/1.4 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--sub); }
.timeline li.e { display: grid; grid-template-columns: 70px 110px 1fr auto; gap: 12px; align-items: baseline; padding: 7px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.timeline li.e:hover { background: var(--hover); }
.timeline .tm { font: 11.5px var(--mono); color: var(--faint); }
.timeline .rel { color: var(--faint); font-size: 12px; white-space: nowrap; }
.timeline .tx { word-break: break-word; }
.timeline mark, .chatlog mark { background: rgba(232, 112, 26, .32); color: var(--text); border-radius: 3px; padding: 0 1px; }
.chatlog { list-style: none; margin: 0; padding: 4px 0; font-size: 13px; }
.chatlog li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 6px 16px; }
.chatlog li:hover { background: var(--hover); }
.chatlog .tm { font: 11.5px var(--mono); color: var(--faint); }
@media (max-width: 640px) {
  .timeline li.e { grid-template-columns: 64px 1fr; }
  .timeline li.e .tx { grid-column: 1 / -1; }
  .timeline li.e .rel { display: none; }
  .feed li { grid-template-columns: 40px 1fr; padding: 6px 12px; }
  .chatlog li { grid-template-columns: 1fr; gap: 0; }
}

/* ===== Health bar ===== */
.hp { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hp .bar { flex: 1; height: 4px; background: #241E1A; border-radius: 2px; overflow: hidden; }
.hp .bar i { display: block; height: 100%; background: linear-gradient(90deg, #45AE66, var(--green)); border-radius: 2px; transition: width .4s var(--ease); }
.hp.low .bar i { background: linear-gradient(90deg, #C9362B, #F06A5C); }
.hp .v { font: 11.5px var(--mono); color: var(--faint); width: 26px; text-align: right; }

/* ===== Key/value list ===== */
.kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; }
.kv > div { padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kv > div:nth-child(odd) { color: var(--faint); padding-right: 16px; }
.kv > div:nth-last-child(-n+2) { border-bottom: 0; }

/* ===== Player header ===== */
.phead { position: relative; overflow: hidden; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; padding: 18px 20px; background: radial-gradient(600px 200px at 0 0, rgba(232, 112, 26, .1), transparent 70%), var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--lift); }
.phead .info { flex: 1; min-width: 220px; }
.phead h1 { font-size: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phead .meta { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; margin-top: 4px; color: var(--faint); font-size: 12.5px; }
.phead .meta b { color: var(--sub); font-weight: 600; }
.phead .cash { text-align: right; }
.phead .cash .label { font: 500 11px/1.3 var(--display); text-transform: uppercase; letter-spacing: .13em; }
.phead .cash .v { font: 500 28px var(--display); letter-spacing: .005em; color: var(--green); font-variant-numeric: tabular-nums; margin-top: 2px; }
.phead .acts { display: flex; gap: 6px; align-items: center; }
.phead .av.lg.sk { animation: shimmer 1.4s linear infinite; }
@media (max-width: 640px) { .phead { padding: 14px; } .phead .cash { text-align: left; } }

/* ===== Action groups ===== */
.actions-grid { columns: 3 320px; column-gap: 14px; }
.actions-grid > .panel { break-inside: avoid; margin-bottom: 14px; display: block; }
.act .row > select, .act .row > .input { flex: 1; width: auto; min-width: 140px; }
.act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.act:last-child { border-bottom: 0; }
.act .row .field { flex: 1; min-width: 120px; }
.act-title { font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--sub); }
.act-title .mono { text-transform: none; letter-spacing: 0; color: var(--text); }
@media (max-width: 520px) { .act .row > select, .act .row > .input { min-width: 0; } }

/* ===== Announcement preview (the in-game band, at the game's proportions) ===== */
.preview { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #1a2230; }
.preview .scene { position: absolute; inset: 0; background: linear-gradient(180deg, #2a3442 0%, #46515f 42%, #6f675f 58%, #2a2d33 59%, #1f2227 100%); }
.preview .hud { position: absolute; left: 3%; top: 4%; font: 600 calc(18px * var(--s, 1)) var(--sans); color: rgba(255, 255, 255, .75); }
.preview .aband { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); background: rgba(8, 9, 11, 0.94); border-top: 2px solid #DEB668; padding: calc(26px * var(--s, 1)) calc(48px * var(--s, 1)) calc(28px * var(--s, 1)); text-align: center; transition: opacity .3s; }
.preview .aband .at { font: 700 calc(42px * var(--s, 1))/1.05 "Oswald", "Arial Narrow", var(--sans); text-transform: uppercase; color: #fff; word-break: break-word; }
.preview .aband .ab { margin-top: calc(10px * var(--s, 1)); font: 400 calc(21px * var(--s, 1))/1.3 var(--sans); color: #c8cbd1; word-break: break-word; white-space: pre-wrap; }
.preview-wrap { container-type: inline-size; }
.preview .timer { position: absolute; left: 0; bottom: 0; height: 2px; background: rgba(222, 182, 104, .6); width: 100%; opacity: 0; }
.preview.play .timer { opacity: 1; animation: drain linear forwards; }
@keyframes drain { from { width: 100%; } to { width: 0; } }

/* ===== Catalog ===== */
.swatches { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.swatch { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.swatch i { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.names { display: flex; flex-wrap: wrap; gap: 4px; }
.price { font: 500 12.5px var(--mono); color: var(--green); }

/* ===== JSON ===== */
pre.json { margin: 0; padding: 16px; font: 12px/1.65 var(--mono); color: #CFC7BC; overflow: auto; max-height: 70vh; white-space: pre; }
pre.json .k { color: #D2B48C; } pre.json .s { color: #9BD3A9; } pre.json .n { color: #EBC24F; } pre.json .b { color: #F0897E; }

/* ===== Skeleton / empty / error / notice ===== */
.sk { background: linear-gradient(90deg, var(--panel-2) 0%, #26201B 40%, var(--panel-2) 80%) 0 0 / 300% 100%; border-radius: 5px; animation: shimmer 1.3s linear infinite; }
.sk.line { height: 10px; margin: 10px 0; }
.sk.block { height: 180px; border-radius: var(--radius-lg); }
.sk.stat { height: 80px; border-radius: var(--radius-lg); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes pulse { 50% { opacity: .5; } }
.empty { padding: 40px 16px; text-align: center; color: var(--faint); font-size: 13px; }
.empty h3 { color: var(--text); margin-bottom: 4px; font: 600 14px var(--sans); }
.empty > div { max-width: 420px; margin: 0 auto; }
.empty-ic { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--faint); }
.empty-ic svg { width: 19px; height: 19px; }
.error-box { padding: 11px 14px; border-radius: 8px; background: var(--red-dim); border: 1px solid rgba(229, 72, 59, .28); color: #F4B1A9; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.error-box .grow { flex: 1; }
.error-box b { color: #FAD3CE; }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--sub); font-size: 13px; }
.notice.warn { border-color: rgba(235, 194, 79, .3); background: var(--amber-dim); color: #F0DCA0; }
.notice.info { border-color: rgba(232, 112, 26, .3); background: var(--accent-dim); color: #F3C9A4; }
.notice b { color: var(--text); font-weight: 600; }
.results { display: grid; gap: 6px; }
.result { display: flex; align-items: center; gap: 12px; padding: 8px 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; transition: background .12s, border-color .12s; }
.result:hover { background: var(--raise); border-color: var(--line-3); }
.result:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.result .grow { flex: 1; min-width: 0; }
.results > * { min-width: 0; }
.result .grow > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked { display: flex; align-items: center; gap: 10px; padding: 8px 11px; background: var(--accent-dim); border: 1px solid rgba(232, 112, 26, .3); border-radius: 8px; }
.picked .grow { flex: 1; min-width: 0; }

/* first-load stagger for lists and table rows (classes added by ui.js) */
.st-in { animation: stIn .22s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes stIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }