/* Sistem PvP page (/sistem) — loaded after the shared style.css */
.sys-hero{position:relative;margin-top:22px;padding:38px 36px 32px;border-radius:16px;overflow:hidden;border:1px solid #23408a;
  background:radial-gradient(ellipse 520px 260px at 85% 0%,rgba(47,123,255,.28),transparent 70%),
    radial-gradient(ellipse 420px 220px at 0% 100%,rgba(233,192,74,.10),transparent 70%),linear-gradient(180deg,#0e1a3d,#0a1024)}
.sys-eyebrow{margin:0;font:400 16px/1 var(--pix);color:var(--blue3);letter-spacing:.5px}
.sys-hero h1{margin:12px 0 0;font:400 46px/1.05 var(--pix);color:#fff}
.sys-lede{max-width:760px;margin:14px 0 0;font-size:16px;line-height:1.6;color:#c7d2ee}
.sys-lede b{color:#fff}
.sys-flow{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.sys-flow li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:118px;padding:12px 16px;
  background:rgba(10,16,36,.7);border:1px solid var(--line2);border-radius:10px;text-align:center}
.sys-flow li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:2px;background:var(--blue3)}
.sys-flow .fi img{width:24px;height:24px}
.fact-i img,.rule-i img{width:22px;height:22px}
.sys-flow b{font:400 18px/1 var(--pix);color:#fff}
.sys-flow small{font-size:11.5px;color:var(--muted);font-weight:600}
.sys-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px;max-width:640px}
.sys-stats div{padding:12px 14px;background:rgba(10,16,36,.7);border:1px solid var(--line2);border-radius:10px}
.sys-stats b{display:block;font:400 28px/1 var(--pix);color:var(--t1)}
.sys-stats span{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--muted)}
.sys-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.btn-pri,.btn-sec{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:9px;font:400 18px/1 var(--pix)}
.btn-pri{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(47,123,255,.35)}
.btn-pri:hover{background:#4189ff}
.btn-sec{border:1px solid var(--line2);color:#dbe6ff}
.btn-sec:hover{background:var(--card2)}

.sys-sec{padding:26px 28px 28px}
.sys-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.sys-num{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#14254f;border:1px solid #2f4f9a;
  font:400 20px/1 var(--pix);color:var(--blue3)}
.sys-head h2{margin:2px 0 0}
.sys-sec h3{margin:0;font:700 15px/1.3 var(--sans);color:var(--txt)}
.sys-sec p{margin:0;color:var(--muted);line-height:1.6}
.sys-sec code{font:600 13px/1 ui-monospace,Consolas,monospace;color:#cfe0ff;background:#14254f;border:1px solid #2a4280;padding:2px 6px;border-radius:5px}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step{position:relative;padding:18px 16px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.step-n{display:grid;place-items:center;width:34px;height:34px;margin-bottom:12px;border-radius:50%;background:var(--blue);color:#fff;font:400 18px/1 var(--pix)}
.step h3{margin-bottom:6px}
.cmds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.cmds div{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:#0d1530;border:1px dashed #2a3c70;border-radius:10px}
.cmds code{align-self:flex-start;font-size:14px}
.cmds span{font-size:13px;color:var(--muted);font-weight:600}

.elo-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:20px}
.elo-facts{display:flex;flex-direction:column;gap:10px}
.fact{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.fact-i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#14254f}
.fact b{color:var(--txt)}
.ladder{padding:8px 16px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.lad-group{margin:10px 0 4px;font:600 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--c)}
.lad-row{display:grid;grid-template-columns:52px minmax(0,1fr) 92px minmax(60px,1.1fr) 70px;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #161e38}
.lad-row:last-child{border-bottom:0}
.lad-row .tchip{justify-self:start}
.lad-name{font-weight:600;font-size:13.5px}
.lad-elo{font:700 13px/1 var(--sans);color:var(--txt)}
.lad-elo small,.lad-pts small{color:var(--faint);font-weight:600}
.lad-bar{height:8px;border-radius:4px;background:#141c36;overflow:hidden}
.lad-bar i{display:block;height:100%;border-radius:4px;background:var(--c)}
.lad-pts{text-align:right;font:400 17px/1 var(--pix);color:var(--c)}

.pts-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
.formula,.titles-track{padding:18px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.formula h3,.titles-track h3{margin-bottom:14px;font:600 11.5px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.calc{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.calc-tile{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px;padding:12px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--c) 8%,var(--tile));border:1px solid color-mix(in srgb,var(--c) 35%,#222b4a)}
.calc-tile img{width:26px;height:26px}
.calc-tile span{font-size:12px;font-weight:700;color:var(--muted)}
.calc-tile b{font:400 22px/1 var(--pix);color:var(--c)}
.op{font:400 24px/1 var(--pix);color:var(--faint)}
.calc-sum{display:flex;flex-direction:column;align-items:center;padding:12px 16px;border-radius:10px;background:#14254f;border:1px solid #2f4f9a}
.calc-sum b{font:400 30px/1 var(--pix);color:#fff}
.calc-sum span{font-size:12px;font-weight:700;color:var(--blue3)}
.calc-title{flex-basis:100%;margin-top:4px;font-size:15px;color:var(--muted)}
.calc-title b{font:400 20px/1 var(--pix)}
.note-s{margin-top:14px!important;font-size:13px}
.tt-row{display:grid;grid-template-columns:150px minmax(0,1fr) 80px;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #161e38}
.tt-row:last-child{border-bottom:0}
.tt-row b{font:700 13.5px/1.2 var(--sans);color:var(--tc)}
.tt-bar{height:8px;border-radius:4px;background:#141c36;overflow:hidden}
.tt-bar i{display:block;height:100%;background:var(--tc);border-radius:4px}
.tt-min{text-align:right;font:700 12.5px/1 var(--sans);color:var(--muted)}

.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cat{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.cat.soon{opacity:.72}
.cat-top{display:flex;align-items:center;gap:10px}
.cat-top img{width:28px;height:28px}
.cat-top h3{font:400 20px/1 var(--pix)}
.badge{margin-left:auto;padding:4px 8px;border-radius:999px;font:700 10.5px/1 var(--sans);letter-spacing:.3px;white-space:nowrap}
.badge.ok{color:#5ad19a;background:rgba(90,209,154,.12);border:1px solid rgba(90,209,154,.35)}
.badge.own{color:#9aa5c2;background:rgba(154,165,194,.1);border:1px solid rgba(154,165,194,.3)}
.badge.soon{color:#e9c04a;background:rgba(233,192,74,.1);border:1px solid rgba(233,192,74,.35)}
.cat p{font-size:13.5px}
.kits-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto}
.kits-row small{font:600 10.5px/1 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);margin-right:2px}
.kit{padding:4px 8px;border-radius:6px;background:#14254f;border:1px solid #2a4280;font:400 13px/1 var(--pix);color:#dbe6ff}
.kit.none{background:none;border-style:dashed;color:var(--faint);font:600 11.5px/1 var(--sans)}

.rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rule{display:flex;gap:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.rule-i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#14254f;font-size:18px}
.rule h3{margin-bottom:4px}
.rule p{font-size:13.5px}
.rule b{color:var(--txt)}

@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .elo-grid,.pts-grid{grid-template-columns:1fr}
  .cat-grid,.rules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .sys-hero{padding:26px 18px 22px}
  .sys-hero h1{font-size:32px}
  .sys-lede{font-size:15px}
  .sys-flow li{min-width:0;flex:1 1 30%;padding:10px 8px}
  .sys-flow li::after{display:none}
  .sys-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys-sec{padding:20px 16px}
  .steps,.cmds,.cat-grid,.rules-grid{grid-template-columns:1fr}
  .lad-row{grid-template-columns:46px minmax(0,1fr) 78px 52px;gap:8px}
  .lad-bar{display:none}
  .tt-row{grid-template-columns:minmax(0,1fr) 72px}
  .tt-bar{display:none}
}