:root {
  --bg: #0d0e10;
  --panel: #141517;
  --panel-2: #191a1d;
  --line: #2b2c30;
  --line-gold: #5b4920;
  --text: #f5f2e9;
  --muted: #94908a;
  --gold: #d8b34f;
  --gold-2: #f0d37b;
  --green: #56ca70;
  --red: #ef626a;
  --shadow: 0 20px 60px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }

body {
  background:
    radial-gradient(circle at 20% -10%, rgba(216,179,79,.08), transparent 35%),
    radial-gradient(circle at 100% 0%, rgba(216,179,79,.05), transparent 30%),
    var(--bg);
}

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; flex: 0 0 250px; border-right: 1px solid var(--line); padding: 22px 18px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; background: rgba(13,14,16,.94); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 42px; height: 42px; border: 1px solid #7d6328; display: grid; place-items: center; border-radius: 10px; color: var(--gold-2); font-weight: 800; letter-spacing: .06em; background: linear-gradient(135deg, #19150d, #0f1012); }
.brand-title { font-weight: 800; letter-spacing: .12em; font-size: 14px; }
.brand-subtitle { color: var(--muted); font-size: 9px; letter-spacing: .18em; margin-top: 3px; }
.nav { display: grid; gap: 7px; }
.nav-btn { border: 1px solid transparent; background: transparent; color: #bbb6af; text-align: left; padding: 12px 13px; border-radius: 10px; display: flex; gap: 10px; align-items: center; }
.nav-btn:hover { background: #17181a; color: #eee9dc; }
.nav-btn.active { background: #1a1812; border-color: #4d3f1f; color: var(--gold-2); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 8px; }
.ghost-btn { width: 100%; background: #151618; border: 1px solid var(--line); color: #c9c4bb; padding: 10px 12px; border-radius: 9px; }
.ghost-btn:hover { border-color: #494b50; color: white; }
.danger-ghost:hover { border-color: #6b2d32; color: #ff9ba0; }
.file-btn { text-align: center; }
.file-btn input { display: none; }

.main { flex: 1; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 30px 42px 22px; max-width: 1600px; margin: 0 auto; }
.eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 5px 0 0; font-size: 30px; letter-spacing: -.03em; }
.topbar-actions { display: flex; gap: 10px; }
.primary-btn, .secondary-btn, .danger-btn { border-radius: 9px; border: 1px solid; padding: 10px 15px; font-weight: 700; }
.primary-btn { color: #16130d; background: linear-gradient(180deg, #eed277, #caa344); border-color: #d8b34f; }
.primary-btn:hover { filter: brightness(1.06); }
.secondary-btn { color: #e7e2d8; background: #191a1c; border-color: #38393d; }
.secondary-btn:hover { border-color: #666970; }
.danger-btn { color: #ffb0b5; background: #1d1517; border-color: #5b282c; }

.view { display: none; max-width: 1600px; margin: 0 auto; padding: 0 42px 42px; }
.view.active { display: block; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card { background: linear-gradient(180deg, rgba(24,25,27,.97), rgba(18,19,21,.97)); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.card.pad { padding: 18px; }
.card-title { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.stat-value { font-size: 28px; font-weight: 800; margin-top: 8px; }
.stat-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.gold { color: var(--gold-2); }
.green { color: var(--green); }
.red { color: var(--red); }

.section-space { margin-top: 16px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px 14px; border-bottom: 1px solid #27282c; text-align: left; font-size: 13px; }
th { color: #8f8b84; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; background: rgba(255,255,255,.012); }
tbody tr:hover { background: rgba(255,255,255,.016); }
.rank { width: 38px; color: var(--gold); font-weight: 800; }
.player-cell { font-weight: 700; }
.badge { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; font-size: 11px; border: 1px solid; }
.badge.pos { color: #8fe39c; border-color: #2c5735; background: #121b15; }
.badge.neg { color: #ff8b92; border-color: #612c31; background: #1b1214; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar-left, .toolbar-right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.input, .select { width: 100%; background: #111214; color: #f3f0e7; border: 1px solid #343539; border-radius: 9px; padding: 10px 12px; outline: none; }
.input:focus, .select:focus { border-color: #79612a; box-shadow: 0 0 0 3px rgba(216,179,79,.08); }
.inline-input { width: 120px; }

.form-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.field { display:grid; gap:6px; }
.field label { font-size: 11px; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

.participant-table input { max-width: 120px; }
.participant-row-actions { display:flex; gap:6px; }
.icon-btn { border:1px solid #343539; background:#111214; color:#bcb8b0; width:32px; height:32px; border-radius:8px; }
.icon-btn:hover { border-color:#5d5e63; color:white; }

.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty strong { display:block; color:#eee9dd; margin-bottom:6px; }

.game-card { display:grid; grid-template-columns: 1.4fr .8fr .8fr auto; gap:16px; align-items:center; padding:15px 18px; border-bottom:1px solid #27282c; cursor:pointer; }
.game-card:hover { background: rgba(255,255,255,.018); }
.game-card:focus-visible { outline: 2px solid rgba(216,179,79,.55); outline-offset: -2px; }
.game-card .game-actions { cursor:default; }
.game-card:last-child { border-bottom:0; }
.game-meta { color:var(--muted); font-size:12px; margin-top:5px; }
.game-result { font-weight:800; font-size:18px; }
.game-actions { display:flex; gap:7px; justify-content:flex-end; }

.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.7); display:grid; place-items:center; z-index:100; padding:20px; }
.modal { width:min(560px, 100%); background:#151618; border:1px solid #3b3c40; border-radius:14px; box-shadow:0 30px 100px rgba(0,0,0,.55); }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); }
.modal-body { padding:18px; }
.modal-actions { padding:15px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }
.close-btn { border:0; background:transparent; color:#8f8b84; font-size:20px; }

.toast { position:fixed; right:22px; bottom:22px; background:#1b1d20; border:1px solid #414348; padding:12px 15px; border-radius:10px; box-shadow:0 15px 40px rgba(0,0,0,.35); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; z-index:200; }
.toast.show { opacity:1; transform:translateY(0); }

@media (max-width: 1100px) {
  .sidebar { width: 210px; flex-basis:210px; }
  .view, .topbar { padding-left: 24px; padding-right:24px; }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .app-shell { display:block; }
  .sidebar { width:auto; height:auto; position:relative; border-right:0; border-bottom:1px solid var(--line); }
  .nav { grid-template-columns:repeat(4,1fr); }
  .nav-btn { justify-content:center; }
  .nav-btn span { display:none; }
  .sidebar-bottom { display:none; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .game-card { grid-template-columns:1fr 1fr; }
  .game-actions { justify-content:flex-start; }
}

.participant-table .participant-share { min-width: 72px; text-align: center; font-weight: 800; }
.participant-table th:nth-child(1) { min-width: 90px; }
.participant-table th:nth-child(4),
.participant-table th:nth-child(5),
.participant-table th:nth-child(6) { min-width: 120px; }
.participant-table th:nth-child(7) { min-width: 100px; }
.participant-total-entry { font-weight: 800; color: #ddd7cc; white-space: nowrap; }
\n\n/* Взаиморасчёты */
.modal-wide { width: min(1100px, 100%); }
.settlement-box {
  margin-top: 16px;
  border: 1px solid #4d4022;
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%, rgba(216,179,79,.08), transparent 34%),
    linear-gradient(180deg, rgba(27,25,19,.98), rgba(18,19,21,.98));
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(0,0,0,.24);
}
.settlement-box.warning {
  border-color: #6b363b;
  background:
    radial-gradient(circle at 100% 0%, rgba(239,98,106,.07), transparent 34%),
    linear-gradient(180deg, rgba(39,23,25,.98), rgba(20,19,20,.98));
}
.settlement-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:17px 18px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.settlement-head-main { padding-bottom: 14px; }
.settlement-title {
  color: var(--gold-2);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.settlement-total { display:flex; align-items:baseline; gap:10px; text-align:right; }
.settlement-total-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.settlement-total strong { color:var(--gold-2); font-size:18px; }
.settlement-count { color:#d9d4ca; font-size:12px; font-weight:800; white-space:nowrap; }
.settlement-status { border:1px solid #2d5b37; background:#121b15; color:#8fe39c; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; }
.settlement-summary { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.045); }
.settlement-summary-card { min-width:0; padding:12px 13px; border:1px solid #353129; background:rgba(255,255,255,.018); border-radius:11px; }
.settlement-summary-card span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.settlement-summary-card strong { display:block; margin-top:5px; font-size:20px; }
.settlement-summary-card small { display:block; margin-top:2px; color:#6f6b64; font-size:10px; }
.settlement-balances {
  border-bottom:1px solid rgba(255,255,255,.055);
  padding:0 10px 10px;
}
.settlement-subhead {
  padding:13px 8px 9px;
  color:#8f8b84;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.settlement-balance-row {
  display:grid;
  grid-template-columns:minmax(140px, .9fr) 110px minmax(240px, 1.6fr);
  gap:14px;
  align-items:center;
  padding:10px 8px;
  border-top:1px solid rgba(255,255,255,.04);
}
.settlement-balance-name { font-weight:800; color:#eee9df; }
.settlement-balance-net { font-weight:800; text-align:right; white-space:nowrap; }
.settlement-balance-action { display:flex; flex-wrap:wrap; gap:6px; font-size:11px; }
.settlement-mini-pay, .settlement-mini-receive { padding:5px 7px; border-radius:7px; border:1px solid; white-space:nowrap; }
.settlement-mini-pay { color:#ff9ca2; border-color:#5d2e33; background:#1a1214; }
.settlement-mini-receive { color:#8fe39c; border-color:#2d5735; background:#121a15; }

.settlement-list { padding:8px 10px; }
.settlement-row {
  display:grid;
  grid-template-columns:34px minmax(140px,1fr) 28px minmax(140px,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 8px;
  border-bottom:1px solid #2a2927;
  border-radius:10px;
}
.settlement-row:hover { background:rgba(255,255,255,.018); }
.settlement-row:last-child { border-bottom:0; }
.settlement-num {
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid #4c4025;
  display:grid;
  place-items:center;
  color:var(--gold-2);
  font-size:11px;
  font-weight:800;
  background:#17150f;
}
.settlement-person { min-width:0; display:flex; flex-direction:column; gap:3px; }
.settlement-person-label { color:#77736c; font-size:9px; text-transform:uppercase; letter-spacing:.09em; }
.settlement-person strong { color:#eee9df; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.settlement-person.from strong { color:#ff9ca2; }
.settlement-person.to strong { color:#8fe39c; }
.settlement-arrow { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--gold-2); border:1px solid #4c4025; background:#17150f; font-weight:800; }
.settlement-amount { color:var(--gold-2); font-weight:800; font-size:15px; min-width:105px; text-align:right; white-space:nowrap; }
.settlement-foot { padding:11px 18px 14px; border-top:1px solid rgba(255,255,255,.045); color:#827d75; font-size:11px; }
.settlement-warning-amount { color:var(--red); font-size:16px; font-weight:800; white-space:nowrap; }
.settlement-warning-body { padding:14px 18px 16px; color:#aa8589; font-size:12px; }
.settlement-empty { padding:18px; color:#a7a29a; font-size:13px; }
.participant-settlement { min-width: 190px; font-size:11px; line-height:1.45; }
.settlement-cell-line { display:flex; justify-content:space-between; gap:8px; white-space:nowrap; }
.settlement-cell-line b { font-weight:800; color:#eee9df; }

/* Взаиморасчёты в форме новой игры */
.new-game-settlement { margin-top: 18px; }
.new-game-settlement .settlement-box { margin-top: 0; }
.new-game-settlement .settlement-head { background: rgba(216,179,79,.018); }
.new-game-settlement .settlement-row { min-height: 58px; }

@media (max-width: 800px) {
  .settlement-head { align-items:flex-start; flex-direction:column; }
  .settlement-total { width:100%; justify-content:space-between; text-align:left; }
  .settlement-summary { grid-template-columns:1fr 1fr 1fr; gap:7px; padding:10px; }
  .settlement-summary-card { padding:10px; }
  .settlement-summary-card strong { font-size:17px; }
  .settlement-balance-row { grid-template-columns:1fr auto; }
  .settlement-balance-action { grid-column:1 / -1; }
  .settlement-row { grid-template-columns:30px minmax(0,1fr) 24px minmax(0,1fr); gap:8px; }
  .settlement-amount { grid-column:2 / -1; text-align:left; margin:2px 0 0 0; padding-left:0; }
}

@media (max-width: 520px) {
  .settlement-summary { grid-template-columns:1fr; }
  .settlement-balance-row { grid-template-columns:1fr; gap:6px; }
  .settlement-balance-net { text-align:left; }
  .settlement-row { grid-template-columns:30px 1fr 24px; }
  .settlement-person.to { grid-column:2 / -1; }
  .settlement-arrow { grid-column:3; grid-row:1; }
  .settlement-amount { grid-column:2 / -1; }
}

/* v8: компактные и читабельные взаиморасчёты */
.settlement-summary-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px 14px;
  gap: 8px;
}
.settlement-summary-compact > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #353129;
  background: rgba(255,255,255,.016);
  border-radius: 10px;
}
.settlement-summary-compact span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.settlement-summary-compact strong { font-size: 15px; color: #eee9df; white-space: nowrap; }

/* v8: header / column guidance for participant table */
.participant-table thead th {
  text-align: center;
  vertical-align: middle;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.participant-table thead th[data-col="1"] { text-align: left; }
.participant-table tbody td[data-col] { transition: background .15s ease; }
.participant-table [data-col].column-hover {
  background: rgba(216,179,79,.075) !important;
}
.participant-table thead th.column-hover {
  color: var(--gold-2);
  background: rgba(216,179,79,.10);
  box-shadow: inset 0 -2px 0 rgba(216,179,79,.38);
}
.participant-table td[data-col="0"],
.participant-table td[data-col="2"],
.participant-table td[data-col="3"],
.participant-table td[data-col="4"],
.participant-table td[data-col="5"],
.participant-table td[data-col="6"],
.participant-table td[data-col="7"],
.participant-table td[data-col="8"] { text-align: center; }
.participant-table td[data-col="3"] .input,
.participant-table td[data-col="5"] .input,
.participant-table td[data-col="0"] .input,
.participant-table td[data-col="2"] .input { text-align: center; margin: 0 auto; }

/* v8: result modal fits the viewport without browser zoom */
.modal.modal-wide {
  width: min(1120px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.modal-wide .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal.modal-wide .modal-actions { flex: 0 0 auto; }
.modal.modal-wide .table-wrap { max-width: 100%; }

/* The player-balance list was removed from the settlement card. */
.settlement-balances,
.settlement-subhead,
.settlement-balance-row,
.settlement-balance-name,
.settlement-balance-net,
.settlement-balance-action,
.settlement-mini-pay,
.settlement-mini-receive { display: none !important; }

@media (max-width: 800px) {
  .settlement-summary-compact { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 10px; }
  .modal.modal-wide { max-height: calc(100vh - 20px); }
  .modal.modal-wide .modal-body { padding: 12px; }
}


/* Финальная полировка полей и формы добавления участников */
.participant-table input[type="number"],
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.participant-table input[type="number"]::-webkit-outer-spin-button,
.participant-table input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* «Общий вход» читается слева так же, как значения под ним */
.participant-table th[data-col="4"],
.participant-table td[data-col="4"] {
  text-align: left;
}

/* Кнопки добавления игроков начинаются строго с левого края поля выбора игрока */
.participant-add-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  justify-content: initial;
}
.participant-help {
  grid-column: 1 / span 3;
  align-self: center;
}
.participant-add-buttons {
  grid-column: 4;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}
.participant-add-buttons .secondary-btn,
.participant-add-buttons .primary-btn {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .participant-add-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .participant-add-buttons {
    width: 100%;
  }
  .participant-add-buttons .secondary-btn,
  .participant-add-buttons .primary-btn {
    flex: 1;
  }
}