/* The trading board reuses the inventory page's shell (.inv-*) for state
   panels, toolbar controls and buttons; everything specific to trading is
   scoped under .trd-* so it can never restyle the inventory page. */
.trd-main { max-width: 1440px; }
.trd-header { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.trd-header h1 { margin: 0; color: var(--text); font: 600 clamp(24px, 3vw, 34px)/1.2 "Inter", sans-serif; }
.trd-primary { border-color: #c6ee78; background: #c6ee78; color: var(--text); }
.trd-primary:hover { background: #d7f79a; border-color: #d7f79a; }

.trd-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.trd-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 4px; margin-right: 16px; color: var(--muted); font: 600 13px Inter, sans-serif; cursor: pointer; }
.trd-tab[aria-selected="true"] { color: var(--text); border-bottom-color: #c6ee78; }
.trd-badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #c6ee78; color: var(--text); font: 600 11px "IBM Plex Mono", monospace; }

.trd-toolbar { grid-template-columns: minmax(200px, 2fr) repeat(6, minmax(110px, 1fr)); margin-top: 0; }
.trd-toolbar :is(input, select) { width: 100%; min-width: 0; height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--theme-raised, rgb(247, 247, 247)); color: var(--text); font: 13px Inter, sans-serif; color-scheme: var(--theme-color-scheme, light); }

.trd-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.trd-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--theme-surface, rgb(255, 255, 255)); text-align: left; color: inherit; font: inherit; cursor: pointer; }
.trd-card:hover { border-color: var(--border); }
.trd-card:focus-visible { outline: 2px solid #c6ee78; outline-offset: 3px; }
.trd-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trd-card h3 { margin: 0; color: var(--text); font: 600 15px/1.4 Inter, sans-serif; overflow-wrap: anywhere; }
.trd-card-value { flex: none; color: rgb(109, 131, 66); font: 600 16px "Inter", sans-serif; white-space: nowrap; }
.trd-card-wants { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.trd-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: var(--muted); font-size: 11px; }
.trd-owner { display: inline-flex; align-items: center; gap: 7px; }
.trd-owner img { width: 20px; height: 20px; border-radius: 50%; }

.trd-items { display: flex; flex-wrap: wrap; gap: 8px; }
.trd-chip { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-left: 3px solid var(--rarity, var(--border)); border-radius: 6px; background: var(--theme-raised, rgb(247, 247, 247)); }
.trd-chip img { width: 42px; height: 32px; object-fit: contain; flex: none; }
.trd-chip-text { min-width: 0; }
.trd-chip strong { display: block; color: var(--text); font: 500 11px/1.35 Inter, sans-serif; overflow-wrap: anywhere; }
.trd-chip span { color: var(--muted); font-size: 10px; }

.trd-pager { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.trd-section-title { margin: 34px 0 14px; color: var(--text); font: 600 17px "Inter", sans-serif; }
.trd-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.trd-note.is-error { color: rgb(128, 93, 93); }
.trd-note.is-ok { color: rgb(109, 131, 66); }

.trd-trade-url { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--theme-surface, rgb(255, 255, 255)); }
.trd-trade-url label { display: block; color: var(--text); font: 600 13px Inter, sans-serif; }
.trd-trade-url > p { margin: 6px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 70ch; }
.trd-trade-url-row { display: flex; flex-wrap: wrap; gap: 10px; }
.trd-trade-url-row input { flex: 1 1 320px; min-width: 0; height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--theme-raised, rgb(247, 247, 247)); color: var(--text); font: 13px Inter, sans-serif; color-scheme: var(--theme-color-scheme, light); }

.trd-dialog { width: min(920px, 94vw); max-height: 88vh; padding: 26px; border: 1px solid var(--border); border-radius: 12px; background: var(--theme-surface, rgb(255, 255, 255)); color: var(--text); overflow: auto; }
.trd-dialog::backdrop { background: rgba(var(--theme-surface-rgb, 255, 255, 255), 0.72); }
.trd-dialog h2 { margin: 0 0 6px; color: var(--text); font: 600 20px "Inter", sans-serif; }
.trd-dialog-close { display: flex; justify-content: flex-end; }
.trd-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.trd-field :is(input, textarea) { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--theme-raised, rgb(247, 247, 247)); color: var(--text); font: 13px/1.5 Inter, sans-serif; color-scheme: var(--theme-color-scheme, light); resize: vertical; }
.trd-dialog :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #c6ee78; outline-offset: 3px; }

.trd-picker { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.trd-picker-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.trd-picker-head .inv-search { display: flex; flex-direction: column; gap: 7px; flex: 1 1 260px; color: var(--muted); font-size: 11px; }
.trd-picker-head input { width: 100%; height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--theme-raised, rgb(247, 247, 247)); color: var(--text); font: 13px Inter, sans-serif; color-scheme: var(--theme-color-scheme, light); }
.trd-picker-head p { margin: 0; color: rgb(109, 131, 66); font: 600 12px "IBM Plex Mono", monospace; }
.trd-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.trd-pick { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-top: 2px solid var(--rarity, var(--border)); border-radius: 7px; background: var(--theme-raised, rgb(247, 247, 247)); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.trd-pick img { width: 100%; height: 66px; object-fit: contain; }
.trd-pick strong { color: var(--text); font: 500 11px/1.4 Inter, sans-serif; overflow-wrap: anywhere; }
.trd-pick span { color: var(--muted); font-size: 10px; }
.trd-pick[aria-pressed="true"] { border-color: #c6ee78; background: var(--theme-raised, rgb(247, 247, 247)); }
.trd-pick[disabled] { opacity: .45; cursor: not-allowed; }
.trd-picker-label { color: var(--text); font: 600 13px Inter, sans-serif; }
.trd-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.trd-kind legend { margin-bottom: 8px; padding: 0; color: var(--muted); font-size: 12px; }
.trd-kind-option { display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--theme-raised, rgb(247, 247, 247)); cursor: pointer; }
.trd-kind-option:has(input:checked) { border-color: #c6ee78; background: var(--theme-raised, rgb(247, 247, 247)); }
.trd-kind-option input { margin-top: 3px; accent-color: #c6ee78; }
/* The page's shared label rules are uppercase monospace; these options set their own type. */
.trd-kind legend, .trd-kind-option, .trd-kind-option * { font-family: Inter, sans-serif; text-transform: none; letter-spacing: normal; }
.trd-kind-option span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trd-kind-option strong { color: var(--text); font: 600 13px Inter, sans-serif; }
.trd-kind-option small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.trd-open-badge { align-self: flex-start; padding: 3px 8px; border: 1px solid #3a5a8a; border-radius: 999px; color: rgb(87, 107, 132); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0; }
.trd-pick .trd-pick-listed { color: rgb(109, 131, 66); font-weight: 600; }
.trd-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.trd-url-banner { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; margin-bottom: 22px; padding: 14px 18px; border: 1px solid #5c4e2c; border-radius: 8px; background: var(--theme-raised, rgb(247, 247, 247)); }
.trd-url-banner p { margin: 0; color: rgb(127, 118, 94); font-size: 13px; line-height: 1.6; }
.trd-url-banner strong { color: rgb(134, 127, 105); }
.trd-urlgate { width: min(640px, 94vw); }
.trd-steps { margin: 18px 0 6px; padding: 0; list-style: none; counter-reset: trd-step; }
.trd-steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 0 0 16px 40px; counter-increment: trd-step; color: var(--muted); font-size: 13px; line-height: 1.6; }
.trd-steps li::before { content: counter(trd-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #55702f; border-radius: 50%; color: rgb(109, 131, 66); font: 600 12px "IBM Plex Mono", monospace; }
.trd-steps strong { color: var(--text); font-weight: 600; }
.trd-steps .inv-button { margin-top: 6px; padding: 9px 14px; font-size: 12px; }
.trd-steps code { color: var(--text); font: 11px "IBM Plex Mono", monospace; overflow-wrap: anywhere; }

.trd-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.trd-side { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--theme-raised, rgb(247, 247, 247)); }
.trd-side h4 { margin: 0 0 10px; color: var(--muted); font: 600 11px Inter, sans-serif; text-transform: none; letter-spacing: 0; }
.trd-diff { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--theme-raised, rgb(247, 247, 247)); color: var(--text); font-size: 12px; line-height: 1.6; }
.trd-diff strong { color: var(--text); }
.trd-offer { padding: 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--theme-surface, rgb(255, 255, 255)); margin-top: 12px; }
.trd-offer-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.trd-status { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0; }
.trd-status.is-live { border-color: #55702f; color: rgb(109, 131, 66); }
.trd-status.is-done { border-color: #3a5a8a; color: rgb(87, 107, 132); }
.trd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.trd-actions .inv-button { padding: 9px 14px; font-size: 12px; }
.trd-history { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.trd-history li { padding: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.trd-handoff { margin-top: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: radial-gradient(ellipse at top right, var(--theme-raised, rgb(247, 247, 247)) 0, var(--theme-surface, rgb(255, 255, 255)) 70%); }
.trd-handoff h3 { margin: 0 0 8px; color: var(--text); font: 600 16px "Inter", sans-serif; }
.trd-handoff p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Trade fairness analyzer (public/cs2-trade-fairness.js). */
.trd-pick-lock { color: rgb(128, 93, 93) !important; font-weight: 600; }
.trd-fair { margin-top: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--theme-surface, rgb(255, 255, 255)); }
.trd-fair-head { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: baseline; }
.trd-fair-head h3 { margin: 0; color: var(--text); font: 600 16px "Inter", sans-serif; }
.trd-fair-head .trd-note { margin: 0; }
.trd-fair-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.trd-fair-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--theme-raised, rgb(247, 247, 247)); }
.trd-fair-stat > span { color: var(--muted); font: 600 10px Inter, sans-serif; text-transform: none; letter-spacing: 0; }
.trd-fair-stat strong { color: var(--text); font: 600 20px "Inter", sans-serif; overflow-wrap: anywhere; }
.trd-fair-stat small { color: var(--muted); font-size: 11px; }
.trd-fair-diff.is-gain { border-color: #55702f; }
.trd-fair-diff.is-gain strong, .trd-fair-cash .is-gain { color: rgb(109, 131, 66); }
.trd-fair-diff.is-loss { border-color: #7a3b3b; }
.trd-fair-diff.is-loss strong, .trd-fair-cash .is-loss { color: rgb(132, 90, 90); }
.trd-fair-cash { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.trd-fair-cash strong { color: var(--text); }
.trd-fair-warnings, .trd-fair-item-warnings { margin: 12px 0 0; padding: 0; list-style: none; }
.trd-fair-warnings li { position: relative; margin-top: 6px; padding: 9px 12px 9px 32px; border: 1px solid #5c4e2c; border-radius: 7px; background: var(--theme-raised, rgb(247, 247, 247)); color: rgb(127, 118, 94); font-size: 12px; line-height: 1.5; }
.trd-fair-warnings li::before, .trd-fair-item-warnings li::before { content: "!"; position: absolute; left: 11px; top: 9px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #b59a4e; color: var(--text); font: 700 10px/1 Inter, sans-serif; }
.trd-fair-warnings li.is-high { border-color: #7a3b3b; background: var(--theme-raised, rgb(247, 247, 247)); color: var(--text); }
.trd-fair-warnings li.is-high::before, .trd-fair-item-warnings li.is-high::before { background: #d97a7a; }
.trd-fair-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.trd-fair-side { min-width: 0; }
.trd-fair-side h4 { margin: 0 0 8px; color: var(--muted); font: 600 11px Inter, sans-serif; text-transform: none; letter-spacing: 0; }
.trd-fair-items { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trd-fair-item { padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--rarity, var(--border)); border-radius: 7px; background: var(--theme-raised, rgb(247, 247, 247)); }
.trd-fair-item-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trd-fair-item-name img { width: 44px; height: 32px; object-fit: contain; flex: none; }
.trd-fair-item-name strong { display: block; color: var(--text); font: 500 12px/1.35 Inter, sans-serif; overflow-wrap: anywhere; }
.trd-fair-item-name span { color: var(--muted); font-size: 10px; }
.trd-fair-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px 10px; margin-top: 10px; }
.trd-fair-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.trd-fair-cell-label { color: var(--muted); font: 600 9px Inter, sans-serif; text-transform: none; letter-spacing: 0; }
.trd-fair-cell strong { color: var(--text); font: 600 13px "Inter", sans-serif; }
.trd-fair-cell small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.trd-fair-pill { padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font: 600 10px "IBM Plex Mono", monospace; white-space: nowrap; }
.trd-fair-pill.is-good { border-color: #55702f; color: rgb(109, 131, 66); }
.trd-fair-pill.is-ok { border-color: #3a5a8a; color: rgb(87, 107, 132); }
.trd-fair-pill.is-warn { border-color: #7a6532; color: rgb(128, 114, 76); }
.trd-fair-pill.is-bad { border-color: #7a3b3b; color: rgb(132, 90, 90); }
.trd-fair-item-warnings li { position: relative; margin-top: 4px; padding-left: 22px; color: rgb(119, 109, 85); font-size: 11px; line-height: 1.5; }
.trd-fair-item-warnings li::before { left: 0; top: 2px; }
.trd-fair-item-warnings li.is-high { color: var(--text); }
.trd-fair-foot { margin-top: 14px; }
.trd-review { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--border); }
.trd-review-title { margin: 12px 0 0; color: var(--text); font: 600 13px Inter, sans-serif; }
.trd-review .trd-fair { margin-top: 10px; }

/* Promoted trades (public/cs2-trade-promotions.js). Featured placement is a
   quiet outline and a small badge — the same lime accent the board already
   uses for live states — never a banner or a flashing call to action. */
.trd-featured { margin: 24px 0 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, var(--theme-surface, rgb(255, 255, 255)) 0, var(--theme-surface, rgb(255, 255, 255)) 100%); }
.trd-featured-head { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.trd-featured-head h2 { margin: 0; color: var(--text); font: 600 16px "Inter", sans-serif; }
.trd-featured-head p { margin: 0; color: var(--muted); font-size: 12px; }
.trd-card.is-featured { border-color: var(--border); }
.trd-card.is-featured:hover { border-color: #55702f; }
.trd-featured-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 8px; border: 1px solid #55702f; border-radius: 999px; color: rgb(109, 131, 66); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0; white-space: nowrap; }
.trd-featured-dot { width: 6px; height: 6px; border-radius: 50%; background: #c6ee78; }
.trd-featured-left { color: var(--muted); font-weight: 500; }
.trd-card-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trd-card-wrap > .trd-card { flex: 1; }
.trd-promote-link { align-self: flex-end; padding: 2px 4px; color: rgb(109, 131, 66); font-size: 12px; }

/* The promotion modal sets its own type on every element: the page's shared
   label/strong rules would otherwise leak uppercase monospace into it. */
.trd-promo-dialog { width: min(540px, 94vw); padding: 24px; }
.trd-promo-dialog h2 { margin: 0; padding-right: 44px; font: 600 22px/1.25 "Inter", sans-serif; text-transform: none; letter-spacing: 0; }
.trd-promo-dialog .trd-dialog-close { position: absolute; top: 16px; right: 16px; }
.trd-promo-dialog .trd-dialog-close button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 8px; color: var(--muted); font: 400 20px/1 Inter, sans-serif; }
.trd-promo-dialog .trd-dialog-close button:hover { background: var(--theme-raised, rgb(247, 247, 247)); color: var(--text); }
.trd-pm, .trd-pm * { font-family: Inter, sans-serif; text-transform: none; letter-spacing: normal; }
.trd-pm { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; font: 400 13px/1.5 Inter, sans-serif; }
.trd-pm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.trd-pm-listing { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.trd-pm-live { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--theme-surface, rgb(255, 255, 255)); color: rgb(109, 131, 66); font: 500 12px Inter, sans-serif; white-space: nowrap; }

.trd-pm-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.trd-pm-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.trd-pm-section-head h3 { margin: 0; color: var(--text); font: 600 14px Inter, sans-serif; }
.trd-pm-section-head p, .trd-pm-muted { margin: 0; color: var(--muted); font-size: 12px; }

.trd-pm-choice { position: relative; display: flex; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--theme-raised, rgb(247, 247, 247)); color: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.trd-pm-choice:hover { border-color: var(--border); }
.trd-pm-choice:has(input:checked) { border-color: #c6ee78; background: var(--theme-surface, rgb(255, 255, 255)); box-shadow: inset 0 0 0 1px #c6ee78; }
.trd-pm-choice:has(input:focus-visible) { outline: 2px solid #c6ee78; outline-offset: 2px; }
.trd-pm-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.trd-pm-choice.is-disabled:hover { border-color: var(--border); }
.trd-pm-radio { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

.trd-pm-durations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trd-pm-duration { flex-direction: column; align-items: flex-start; gap: 0; padding: 16px; }
.trd-pm-duration-name { color: var(--muted); font: 600 13px Inter, sans-serif; }
.trd-pm-duration-price { margin-top: 8px; color: var(--text); font: 600 28px/1.1 "Inter", sans-serif; }
.trd-pm-duration-alt { margin-top: 2px; color: var(--muted); font-size: 12px; }
.trd-pm-duration-until { align-self: stretch; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.trd-pm-tag { position: absolute; top: 14px; right: 14px; padding: 2px 8px; border-radius: 999px; background: var(--theme-raised, rgb(247, 247, 247)); color: rgb(109, 131, 66); font: 600 11px Inter, sans-serif; }

.trd-pm-methods { display: flex; flex-direction: column; gap: 8px; }
.trd-pm-method { align-items: center; gap: 12px; padding: 12px 16px 12px 14px; }
.trd-pm-dot { flex: none; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 50%; }
.trd-pm-choice:has(input:checked) .trd-pm-dot { border-color: #c6ee78; background: radial-gradient(circle, #c6ee78 0 4px, transparent 4.5px); }
.trd-pm-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--theme-raised, rgb(247, 247, 247)); color: var(--text); }
.trd-pm-icon svg { width: 18px; height: 18px; }
.trd-pm-choice:has(input:checked) .trd-pm-icon { background: var(--theme-raised, rgb(247, 247, 247)); color: rgb(109, 131, 66); }
.trd-pm-method-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.trd-pm-method-text strong { color: var(--text); font: 600 14px Inter, sans-serif; overflow-wrap: anywhere; }
.trd-pm-method-text span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.trd-pm-method-price { flex: none; color: var(--text); font: 600 15px "Inter", sans-serif; white-space: nowrap; }

.trd-pm-info { border: 1px solid var(--border); border-radius: 10px; background: var(--theme-surface, rgb(255, 255, 255)); }
.trd-pm-info summary { display: flex; justify-content: space-between; padding: 11px 14px; color: var(--muted); font: 500 13px Inter, sans-serif; cursor: pointer; list-style: none; }
.trd-pm-info summary::-webkit-details-marker { display: none; }
.trd-pm-info summary::after { content: "+"; color: var(--muted); }
.trd-pm-info[open] summary::after { content: "−"; }
.trd-pm-info ul { margin: 0; padding: 0 14px 12px 32px; color: var(--muted); font-size: 12px; line-height: 1.7; }

.trd-pm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--border); }
.trd-pm-total { display: flex; flex-direction: column; min-width: 0; }
.trd-pm-total span { color: var(--muted); font-size: 12px; }
.trd-pm-total strong { color: var(--text); font: 600 24px/1.2 "Inter", sans-serif; }
.trd-pm-foot .trd-dialog-actions, .trd-pm > .trd-dialog-actions { margin: 0; }

.trd-pm-summary { margin: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--theme-raised, rgb(247, 247, 247)); }
.trd-pm-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--border); }
.trd-pm-summary > div:first-child { border-top: 0; }
.trd-pm-summary dt { flex: none; color: var(--muted); }
.trd-pm-summary dd { margin: 0; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.trd-pm-summary > .is-total { align-items: baseline; background: var(--theme-surface, rgb(255, 255, 255)); border-radius: 0 0 11px 11px; }
.trd-pm-summary > .is-total dt { color: var(--text); font-weight: 600; }
.trd-pm-summary > .is-total dd { color: rgb(109, 131, 66); font: 600 20px "Inter", sans-serif; }
.trd-pm-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.trd-promo-step { margin: 4px 0 12px; color: var(--text); font: 600 15px "Inter", sans-serif; }
.trd-promo-done { text-align: center; }
.trd-promo-done .trd-dialog-actions { justify-content: center; }
.trd-promo-check { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: 6px; border: 1px solid #55702f; border-radius: 50%; color: rgb(109, 131, 66); font-size: 20px; }
.trd-promo-until { color: var(--muted); font-size: 13px; }
.trd-promo-until strong { color: var(--text); }

.trd-promotions { margin-top: 8px; }
.trd-promo-section { margin-top: 12px; }
.trd-promo-section h3, .trd-promo-section summary { margin: 0 0 8px; color: var(--muted); font: 600 11px Inter, sans-serif; text-transform: none; letter-spacing: 0; cursor: default; }
.trd-promo-section summary { cursor: pointer; }
.trd-promo-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trd-promo-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--theme-surface, rgb(255, 255, 255)); }
.trd-promo-row.is-active { border-color: var(--border); }
.trd-promo-row-head { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.trd-promo-row-head :is(a, strong) { color: var(--text); font: 600 13px Inter, sans-serif; overflow-wrap: anywhere; }
.trd-promo-row-head a:hover { color: rgb(109, 131, 66); }

@media (max-width: 900px) {
  .trd-toolbar { grid-template-columns: 1fr 1fr; }
  .trd-kind { grid-template-columns: 1fr; }
  .trd-sides, .trd-fair-sides { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .trd-board { grid-template-columns: 1fr; }
  .trd-dialog { padding: 18px; }
  .trd-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trd-fair-stats { gap: 6px; }
  .trd-fair-stat { padding: 10px 8px; }
  .trd-fair-stat strong { font-size: 15px; }
  .trd-fair-stat small { font-size: 10px; }
  .trd-fair { padding: 14px; }
  .trd-featured { padding: 12px; }
  .trd-promo-dialog { padding: 18px; }
  .trd-pm-durations { grid-template-columns: 1fr; }
  .trd-pm-method-price { font-size: 13px; }
  .trd-pm-foot .trd-dialog-actions { flex: 1 1 100%; }
  .trd-pm-foot .trd-dialog-actions .inv-button { flex: 1; }
}