:root { color-scheme: dark; --orange: #e1632e; --panel: #20231f; --muted: #9b9f97; }
* { box-sizing: border-box; }
body { margin: 0; background: #121410; color: #f2efe7; font-family: Inter, system-ui, sans-serif; }
header, .panel-tabs, main { width: min(1100px, calc(100% - 32px)); margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; padding: 34px 0 22px; }
.panel-tabs { display: flex; gap: 8px; padding-bottom: 18px; }
.panel-tab { border: 1px solid #444941; border-radius: 6px; color: #c8cbc3; padding: 10px 14px; font-weight: 750; text-decoration: none; }
.panel-tab:hover, .panel-tab.tab-current { border-color: var(--orange); background: #2b211b; color: #fff; }
h1 { margin: 5px 0 0; font-size: 38px; } h2 { margin: 0 0 18px; font-size: 21px; }
.badge { color: #d69a66; font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.connect, button { border: 0; border-radius: 5px; background: var(--orange); color: white; padding: 11px 16px; font-weight: 750; text-decoration: none; cursor: pointer; }
main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 50px; }
.card { border: 1px solid #343831; border-radius: 8px; background: var(--panel); padding: 22px; }
.current-card { border-left: 5px solid var(--orange); }
.current-card, .warning-card, .wide { grid-column: 1 / -1; }
.current-name { font-size: 32px; font-weight: 850; } .sub, .empty { color: var(--muted); }
form { display: flex; gap: 9px; flex-wrap: wrap; }
input, select { min-width: 190px; flex: 1; border: 1px solid #444941; border-radius: 5px; background: #151713; color: white; padding: 11px 12px; }
select { cursor: pointer; }
.field-label { display: block; color: #c8cbc3; font-size: 13px; font-weight: 800; letter-spacing: .04em; margin-bottom: 7px; text-transform: uppercase; }
.tank-picker { width: 100%; }
.filter-block { margin-top: 16px; }
.filter-options { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-option { border: 1px solid #4b5048; background: #292c27; color: #c8cbc3; min-width: 45px; padding: 8px 11px; }
.filter-option:hover, .filter-option.selected { border-color: #e88b43; background: #54301f; color: #fff; }
.tier-filter-options .filter-option { min-width: 58px; padding: 11px 14px; font-size: 16px; }
.nation-filter-options { display: grid; grid-template-columns: repeat(6, minmax(68px, 1fr)); gap: 8px; }
.nation-filter-options .filter-option { display: grid; place-items: center; min-height: 70px; padding: 6px; }
.image-filter-option { position: relative; }
.image-filter-option::after {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 8px);
  left: 50%;
  border: 1px solid #676d63;
  border-radius: 5px;
  background: #11130f;
  color: #fff;
  padding: 6px 9px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .35);
  content: attr(data-tooltip);
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
  visibility: hidden;
  white-space: nowrap;
}
.image-filter-option:hover::after,
.image-filter-option:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}
.nation-flag-image { display: block; width: 84px; height: 56px; border-radius: 2px; object-fit: cover; }
.class-filter-options { gap: 9px; }
.class-filter-options .filter-option { display: grid; place-items: center; min-width: 142px; min-height: 98px; padding: 6px; }
.vehicle-class-icon { display: block; width: 126px; height: 84px; border-radius: 3px; object-fit: cover; }
.tank-search-block { margin-top: 18px; }
.tank-search-block input { width: 100%; min-height: 54px; padding: 14px 16px; font-size: 17px; }
.compact { margin-top: 15px; padding: 8px 12px; }
.tank-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 280px; margin: 9px 0 13px; overflow-y: auto; }
.tank-result { display: flex; align-items: flex-start; flex-direction: column; border: 1px solid #41463e; background: #171915; color: #f2efe7; padding: 10px 12px; text-align: left; }
.tank-result:hover, .tank-result.selected { border-color: var(--orange); background: #2b211b; }
.tank-result-name { font-size: 15px; font-weight: 800; }
.tank-result-meta { color: var(--muted); font-size: 12px; font-weight: 500; margin-top: 3px; }
.selected-tank { display: flex; align-items: baseline; gap: 10px; border-left: 4px solid var(--orange); background: #171915; padding: 12px 14px; }
.selected-tank strong { font-size: 18px; }.selected-tank span { color: var(--muted); }
.manual-order-fields { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; width: 100%; margin-top: 14px; }
.manual-order-field { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 170px; }
.manual-order-field span { color: var(--muted); font-size: 12px; font-weight: 750; }
.manual-order-field input, .manual-order-field select { min-width: 0; width: 100%; }
.manual-order-field.donor-field { flex: 2; min-width: 250px; }
.manual-order-field.currency-field { flex: 0 1 150px; min-width: 130px; }
.manual-order-fields button { min-height: 41px; }
.row { display: flex; align-items: center; gap: 12px; border-top: 1px solid #373b34; padding: 13px 0; }
.row:first-child { border: 0; padding-top: 0; }
.row-main { flex: 1; }.row-title { font-size: 18px; font-weight: 750; }.row-meta { color: var(--muted); margin-top: 3px; }
.order-edit-row { align-items: flex-end; }
.order-edit-fields { display: grid; flex: 1; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr); gap: 9px; }
.order-edit-fields label span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.order-edit-fields input { min-width: 0; width: 100%; }
.secondary { background: #4a4e47; }.danger { background: #852f27; }
button:disabled { cursor: not-allowed; opacity: .55; }
.acceptance-state { margin-bottom: 14px; }
.access-time, .access-remaining { color: #d7a66b; font-size: 17px; font-weight: 750; }
.landing { display: block; padding-top: 12vh; }.hero { max-width: 720px; margin: auto; padding: 48px; }.hero p { color: var(--muted); font-size: 20px; line-height: 1.55; }.hero .connect { display: inline-block; margin-top: 12px; }.hero .privacy-note { margin-top: 28px; font-size: 14px; }
.copy-row { display: flex; gap: 9px; }.copy-row input { width: 100%; }.status { display: inline-block; border-radius: 999px; padding: 7px 12px; font-weight: 750; }.status.active { background: #245d37; }.status.pending { background: #6b5425; }.status.paused { background: #753b2c; }
.stats { display: flex; flex-wrap: wrap; gap: 22px; }.stat { display: flex; flex-direction: column; }.stat strong { font-size: 24px; }.stat span { color: var(--muted); }
.owner-grid { display: block; }.owner-row { display: flex; align-items: flex-start; gap: 24px; border-top: 1px solid #373b34; padding: 18px 0; }.owner-row:first-child { border-top: 0; }.owner-controls { display: grid; gap: 9px; min-width: 430px; }.owner-control { display: grid; grid-template-columns: 110px 110px 1fr; align-items: center; gap: 8px; }.owner-control label { color: var(--muted); font-size: 14px; }.owner-control input { min-width: 0; width: 110px; }.commission, .access-days { max-width: 110px; }
@media (max-width: 760px) { main { grid-template-columns: 1fr; } header { align-items: flex-start; gap: 18px; flex-direction: column; } .owner-row { flex-direction: column; }.owner-controls { min-width: 0; width: 100%; }.owner-control { grid-template-columns: 1fr; }.owner-control input { width: 100%; max-width: none; }.nation-filter-options { grid-template-columns: repeat(3, minmax(68px, 1fr)); }.tank-results { grid-template-columns: 1fr; }.selected-tank { align-items: flex-start; flex-direction: column; }.row { align-items: stretch; flex-wrap: wrap; }.order-edit-fields { flex-basis: calc(100% - 32px); grid-template-columns: 1fr; } }