/* update 118: the Costs panel (client/js/panels/costs.js). Same dark HUD look as the Quick trade ticker (.xt-*), own classes so nothing else is touched. */
.cs-top .cs-note { margin-top: 6px; }
.cs-note { font-size: 11px; line-height: 1.45; }
.cs-sort { margin-left: auto; align-items: center; }
.cs-wrap { container-type: inline-size; }
.cs-list { display: flex; flex-direction: column; gap: 3px; }
.cs-item { position: relative; background: linear-gradient(90deg, rgba(14,28,48,.92), rgba(9,18,32,.9)); border: 1px solid var(--line); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.cs-item::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--fam, var(--cyan)); box-shadow: 0 0 8px var(--fam, var(--cyan)); opacity: .85; }
.cs-item:hover { border-color: var(--line2); }
.cs-item.open { border-color: var(--cyan); background: linear-gradient(90deg, rgba(20,40,66,.97), rgba(12,24,42,.95)); }
.cs-row { display: grid; grid-template-columns: minmax(130px, 1.6fr) 98px 98px 74px; align-items: center; gap: 8px; padding: 5px 10px 5px 12px; cursor: pointer; }
.cs-row .n { text-align: right; }
.cs-head { cursor: default; background: var(--panel); padding: 0 10px 2px 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); position: sticky; top: -1px; z-index: 2; }
.cs-good { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cs-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-name small { font-size: 10px; } .cs-tag { text-transform: uppercase; letter-spacing: .05em; font-size: 9px; }
.cs-good:hover b { color: var(--cyan); }
.cs-c, .cs-p { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.cs-c b, .cs-p b { font-size: 14px; } .cs-c small, .cs-p small { font-size: 10px; min-height: 12px; }
.cs-m { font-size: 14px; font-weight: 600; } .cs-m.ref { opacity: .55; font-weight: 400; font-style: italic; }
.cs-det { padding: 6px 12px 10px 14px; border-top: 1px dashed var(--line2); }
.cs-dh { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.cs-parts { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.cs-part { display: grid; grid-template-columns: minmax(120px, 1.5fr) 110px 70px minmax(40px, 80px); align-items: center; gap: 8px; font-size: 12px; padding: 1px 0; }
.cs-pn { display: flex; align-items: center; gap: 6px; min-width: 0; } .cs-pn small { font-size: 10px; }
.cs-pq, .cs-pv { text-align: right; }
.cs-dot { display: inline-block; width: 8px; height: 8px; margin: 0 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); flex: none; }
.cs-bar { height: 5px; background: rgba(79,209,255,.1); position: relative; } .cs-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--cyan), #2a7fa8); }
.cs-act { margin-top: 6px; align-items: center; } .cs-mu { width: 60px; background: rgba(6,13,24,.9); border: 1px solid var(--line2); color: var(--text); padding: 3px 6px; text-align: right; font-family: var(--mono); }
.cs-mu:focus { outline: none; border-color: var(--cyan); }
@container (max-width: 560px) { .cs-row { grid-template-columns: minmax(96px, 1.4fr) 78px 74px 62px; gap: 6px; } .cs-name small { display: none; } .cs-part { grid-template-columns: minmax(100px, 1.5fr) 90px 60px; } .cs-bar { display: none; } }
@container (max-width: 400px) { .cs-row { grid-template-columns: minmax(80px, 1fr) 72px 58px; } .cs-row > .cs-p, .cs-head > span:nth-child(3) { display: none; } .cs-part { grid-template-columns: 1fr 70px 56px; } .cs-pq { display: none; } }