:root {
  --bg: #0e1115; --panel: #151a20; --panel2: #1b2128; --line: #262d36;
  --text: #d8dde4; --dim: #8b95a3; --buy: #4a90e2; --sell: #e8893a;
  --zisk: #3fb68b; --ztrata: #e5534b; --cil: #f2c94c;
  --modra: #4a90e2; --zelena: #3fb68b; --oranzova: #e8893a;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif; display: flex; flex-direction: column; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.buy { color: var(--buy); } .sell { color: var(--sell); }
.plus { color: var(--zisk); } .minus { color: var(--ztrata); }
button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:hover { border-color: var(--dim); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.buy-b { background: #2c5f9e; border-color: #2c5f9e; color: #fff; font-weight: 600; }
button.sell-b { background: #b0601f; border-color: #b0601f; color: #fff; font-weight: 600; }
button.hedge-b { background: #4b3a5c; border-color: #6d5585; color: #fff; font-weight: 600; }
.menu { position: fixed; z-index: 12; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px; min-width: 220px; box-shadow: 0 8px 24px #0008; }
.menu .hlava-menu { padding: 6px 10px; color: var(--dim); font-size: 12px; font-family: var(--mono); }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; }
.menu button:hover { background: #26303b; }
button.hlavni { border-color: var(--sell); color: var(--sell); background: #2a1d12; font-weight: 600; }
button.nebezpeci { border-color: var(--ztrata); color: var(--ztrata); }
button.aktivni { background: #24303d; border-color: var(--buy); }
input, select { font: inherit; font-family: var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }

.hlava { display: flex; align-items: center; gap: 24px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.znak { font-weight: 700; font-size: 17px; }
.zalozky { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.zalozky button { border: 0; background: none; color: var(--dim); }
.zalozky button.aktivni { background: #26303b; color: var(--text); font-weight: 600; }
.stavovy { display: flex; gap: 18px; margin-left: auto; color: var(--dim); font-size: 13px; flex-wrap: wrap; }
.stavovy b { color: var(--text); font-weight: 500; }
.tecka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--zisk); margin-right: 4px; }
.odznak { padding: 1px 8px; border-radius: 10px; font-weight: 600; font-size: 12px; }
.odznak.ACTIVE { background: #173a2e; color: var(--zisk); }
.odznak.REDUCING { background: #3a2f12; color: var(--cil); }
.odznak.HALTED { background: #3d1716; color: var(--ztrata); }

.mrizka { flex: 1; display: grid; gap: 12px; padding: 12px; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.panel > h2 { margin: 0; padding: 10px 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.panel > h2 .vpravo { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.link { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--dim); cursor: pointer; flex: none; }
.link.modra { background: var(--modra); border-color: var(--modra); }
.link.zelena { background: var(--zelena); border-color: var(--zelena); }
.link.oranzova { background: var(--oranzova); border-color: var(--oranzova); }
.telo { padding: 10px 14px; overflow: auto; flex: 1; min-height: 0; }
.telo.bez { padding: 0; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { color: var(--dim); font-weight: 500; text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
td.c, th.c { text-align: right; font-family: var(--mono); }
tr.hedge td { background: #22190f; }
tr.vyber td { background: #1c2733; }
.radky-akci { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mrizka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.karta { background: var(--panel2); border-radius: 8px; padding: 8px 10px; }
.karta small { color: var(--dim); display: block; font-size: 12px; }
.karta .h { font-family: var(--mono); font-size: 18px; }
.pruh { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 6px 0; }
.pruh i { display: block; height: 100%; background: var(--sell); }
.pozn { color: var(--dim); font-size: 12px; margin-top: 8px; }

.modal { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 10; padding: 16px; }
.modal .okno { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; width: min(520px, 100%); }
.modal h3 { margin: 0 0 10px; }
.modal ul { padding-left: 18px; margin: 8px 0; }
.modal .zam { color: var(--ztrata); } .modal .var { color: var(--cil); }
.toast { position: fixed; right: 16px; bottom: 16px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; z-index: 11; max-width: 420px; }

@media (max-width: 900px) {
  .mrizka { display: flex; flex-direction: column; overflow: auto; padding: 8px 16px; }
  .panel { min-height: 260px; }
}

/* přihlášení (login.html, m.html) - velké, ať je to čitelné na 4K i v mobilu */
body.prihl { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;
  font-size: clamp(17px, 1vw, 28px); }
.prihl-okno { text-align: center; padding: 1.5em; max-width: 30em; }
.prihl-okno h1 { font-size: 1.6em; margin: 0 0 0.8em; }
.prihl-okno button { font: inherit; font-size: 1.1em; padding: 0.7em 1.4em; border-radius: 0.5em; cursor: pointer;
  background: var(--buy); color: #fff; border: 0; margin-top: 0.6em; }
.prihl-qr { display: inline-block; background: #fff; padding: 0.6em; border-radius: 0.5em; line-height: 0; }
.prihl-qr svg { width: 13em; height: 13em; }
.prihl-cislo { font-size: 2em; font-weight: 700; color: var(--cil); letter-spacing: 0.1em; }
.prihl-info { color: var(--sell); min-height: 1.4em; }