.gp {
  color-scheme: dark;
  --bg: #171229;
  --card: #100B22;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #ffffff;
  --muted: #bebebe;
  --muted-2: #9ca3af;
  --mint: #16edc4;
  --blue: #00AEEF;
  --purple: #9b7bff;
  --orange: #ff9f43;
  --pink: #ff5fa2;
  --green: #34d399;
  --gold: #f6c453;
  --display: "Oxanium", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  
  --p-page: #161229;
  --p-card: #110b21;
  --p-card-2: #17132b;
  --p-border: rgba(255, 255, 255, .07);
  --p-chip: rgba(59, 111, 196, .14);
  --p-chip-text: #c3c3c3;
  --p-accent: #3b6fc4;
  --p-navy: #0f2f4e;
  --p-label: #a1f7de;
  --p-mintdark: #138568;
  --p-text-2: #cad1d8;
  --p-text-3: #9e9e9e;
  --p-icon: #7b8793;
  --p-console: #0d0a19;
  --p-input: #1f1a30;
  --p-green: #22c55e;
  --p-red: #ef4444;
  --p-grey: #6b7280;
  --p-yellow: #eab308;
  --p-cyan: #22d3ee;
  --p-badge: #9dbcf0; }
.gp * { box-sizing: border-box; }
.gp [hidden] { display: none !important; }
.gp {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  }
.gp img { max-width: 100%; display: block; }
.gp a { color: inherit; text-decoration: none; }
.gp button { font-family: inherit; color: inherit; }
.gp :focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 6px; }
.gp .ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.gp .ic.f { fill: currentColor; stroke: none; }
.gp-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.gp-h1 {
  font-weight: 800; text-transform: uppercase; line-height: 1.02; margin: 10px 0 0;
  font-size: clamp(34px, 3.9vw, 56px);
  transform: scaleX(1.1); transform-origin: left center;
  text-wrap: balance; }
.gp-h1 .gp-hl { color: var(--mint); white-space: nowrap; }
.gp-h1-sub { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); margin: 18px 0 0; max-width: 34em; }
.gp-h-sec {
  font-weight: 600; text-align: center; margin: 0;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15;
  transform: scaleX(1.12);
  text-wrap: balance; }
.gp-h-sec .gp-hl { color: var(--mint); }
.gp-sub { text-align: center; color: var(--muted); font-size: clamp(15px, 1.4vw, 19px); margin: 12px auto 0; max-width: 46em; }
.gp-sec { padding-block: 84px 0; }
.gp-sec-head { margin-bottom: 40px; }
.gp-h-row { font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin: 10px 0 0; transform: scaleX(1.06); transform-origin: left center; text-wrap: balance; }
.gp-p-row { color: var(--muted); margin: 14px 0 0; max-width: 36em; }
.gp-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.gp-checks li { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 600; }
.gp-checks li .ic { width: 20px; height: 20px; color: var(--mint); }
.gp-checks.gp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
.gp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.gp-btn-main {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0, 174, 239, .3); border: 2px solid #00AEEF; border-radius: 16px;
  padding: 13px 26px; font-weight: 800; font-size: 17px; color: #fff; cursor: pointer; }
.gp-btn-main:hover { background: rgba(0, 174, 239, .42); }
.gp-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  border: 2px solid rgba(255, 255, 255, .18); border-radius: 16px;
  padding: 13px 22px; font-weight: 700; font-size: 16px; color: #fff; background: transparent; cursor: pointer; }
.gp-btn-ghost:hover { border-color: rgba(255, 255, 255, .35); }
.gp-btn-ghost .ic, .gp-btn-main .ic { width: 18px; height: 18px; }
.gp-tp {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  background: rgba(0, 182, 122, .08); border: 1px solid rgba(0, 182, 122, .45); border-radius: 12px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 700; }
.gp-tp-stars { display: inline-flex; gap: 2px; }
.gp-tp-stars i { width: 17px; height: 17px; background: #00b67a; display: grid; place-items: center; border-radius: 2px; }
.gp-tp-stars i svg { width: 12px; height: 12px; fill: #fff; }
.gp-tp small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.gp-hero { position: relative; padding-block: 56px 10px; }
.gp-hero::before {
  content: ""; position: absolute; inset: -120px 0 auto 0; height: 760px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 380px at 78% 30%, rgba(0, 174, 239, .16), transparent 70%),
    radial-gradient(620px 360px at 12% 18%, rgba(22, 237, 196, .09), transparent 70%); }
.gp-hero-a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.gp-shot {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); }
.shot-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 16px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.shot-bar b { color: #fff; font-weight: 700; }
.shot-bar .tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.shot-bar button {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line-2); background: transparent; border-radius: 9px; padding: 5px 10px; cursor: pointer; color: #fff; }
.shot-bar button .ic { width: 14px; height: 14px; }
.gp-shot img { width: 100%; height: auto; }
.gp-demo-frame { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--p-page); }
.gp-t2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.gp-t2-tabs { display: grid; gap: 8px; }
.gp-t2-tab {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.gp-t2-tab .gp-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 13%, transparent); color: var(--a); flex-shrink: 0; }
.gp-t2-tab .gp-ico .ic { width: 19px; height: 19px; }
.gp-t2-tab b { display: block; font-size: 15px; }
.gp-t2-tab small { display: block; color: var(--muted-2); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.gp-t2-tab[aria-selected="true"] { border-color: var(--a); background: color-mix(in srgb, var(--a) 7%, var(--card)); }
.gp-t2-stage { min-width: 0; }
.gp-t2-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 16px; }
.gp-t2-cap h3 { margin: 0; font-size: 22px; }
.gp-t2-cap p { margin: 6px 0 0; color: var(--muted); }
.gp-t2-media { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--p-page); min-height: 200px; }
.gp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; margin-top: 96px; }
.gp-row.gp-flip > :first-child { order: 2; }
.gp-row .gp-media { min-width: 0; }
.gp-row .gp-k { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--a, var(--mint)); }
.gp-row .gp-checks li { font-size: 15px; font-weight: 600; }
.gp-row .gp-checks li .ic { color: var(--a, var(--mint)); width: 18px; height: 18px; }
.gp-grp { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.gp-grp-h { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--a); margin-bottom: 12px; }
.gp-grp-h i { width: 9px; height: 9px; border-radius: 3px; background: var(--a); }
.gp-fi { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.gp-fi:first-of-type { border-top: 0; padding-top: 2px; }
.gp-fi .gp-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 13%, transparent); color: var(--a); flex-shrink: 0; }
.gp-fi .gp-ico .ic { width: 18px; height: 18px; }
.gp-fi b { display: block; font-size: 14.5px; line-height: 1.3; }
.gp-fi small { display: block; color: var(--muted-2); font-size: 12.5px; line-height: 1.4; margin-top: 1px; }
.gp-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.gp-help-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; min-width: 0; }
.gp-help-card h3 { margin: 6px 0 0; font-size: 22px; }
.gp-help-card p { color: var(--muted); margin: 8px 0 0; }
.gp-big-num { font-size: 52px; font-weight: 800; color: var(--mint); line-height: 1; font-variant-numeric: tabular-nums; }
.gp-kb-links { display: grid; gap: 8px; margin-top: 16px; }
.gp-kb-links a { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: 14px; }
.gp-kb-links a .ic { width: 17px; height: 17px; color: var(--blue); }
.gp-kb-links a:hover { border-color: var(--blue); }
dialog.gp-lb { padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: #0b0816; max-width: min(96vw, 1500px); }
dialog.gp-lb::backdrop { background: rgba(6, 4, 14, .82); }
dialog.gp-lb img { max-height: 86vh; width: auto; }
dialog.gp-lb form { position: absolute; top: 10px; right: 10px; }
dialog.gp-lb button { border: 1px solid var(--line-2); background: rgba(16, 11, 34, .9); color: #fff; border-radius: 10px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.mp {
  font-family: var(--display); color: #fff; font-size: 14px; line-height: 1.45; letter-spacing: .015em;
  background:
    radial-gradient(900px 500px at 70% 0%, rgba(0, 174, 239, .07), transparent 70%),
    linear-gradient(180deg, #1a1530 0%, var(--p-page) 40%, #120e22 100%); }
.mp p { color: var(--p-text-2); margin: 0; }
.mp-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 640px; }
.mp-side { background: rgba(17, 11, 33, .85); padding: 22px 10px 16px; border-right: 1px solid var(--p-border); }
.mp-logo { display: flex; align-items: center; gap: 7px; justify-content: center; font-weight: 800; font-size: 19px; margin-bottom: 18px; }
.mp-logo svg { width: 24px; height: 24px; }
.mp-logo b { color: var(--mint); }
.mp-srv { border: 1px solid rgba(34, 197, 94, .55); background: rgba(34, 197, 94, .08); border-radius: 7px; padding: 7px 9px; margin-bottom: 10px; }
.mp-srv strong { display: block; font-size: 16px; font-weight: 500; }
.mp-srv span { display: block; font-size: 13px; opacity: .9; }
.mp-game {
  position: relative; display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; margin-bottom: 8px; height: 58px;
  background:
    linear-gradient(to right, #100b22 0%, rgba(16, 11, 34, .72) 30%, rgba(16, 11, 34, .25) 75%, transparent),
    repeating-linear-gradient(90deg, #4f8a35 0 8px, #5d9a3f 8px 16px, #477d30 16px 24px),
    linear-gradient(#6aa84f, #3f6f2a); }
.mp-game .t { padding: 8px 10px; flex: 1; }
.mp-game .t em { display: block; font-style: normal; font-weight: 800; font-size: 12px; color: var(--p-label); letter-spacing: .02em; }
.mp-game .t span { font-size: 14px; }
.mp-game .sw { width: 25%; background: var(--p-navy); display: grid; place-items: center; }
.mp-game .sw .ic { width: 17px; height: 17px; }
.mp-nav { display: grid; gap: 2px; }
.mp-nav .hdr { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--p-icon); padding: 12px 12px 4px; }
.mp-nav button {
  display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 12px; border-radius: 6px; border: 0; background: transparent;
  font-size: 14px; cursor: pointer; text-align: left; width: 100%; color: #fff; }
.mp-nav button .ic { width: 17px; height: 17px; color: var(--p-icon); stroke-width: 1.8; }
.mp-nav button:hover { background: rgba(59, 111, 196, .14); }
.mp-nav button[aria-current="true"] { background: #12324b; box-shadow: inset 0 0 0 1px var(--p-accent); }
.mp-nav button[aria-current="true"] .ic { color: #fff; }
.mp-nav button .new { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--mint); border: 1px solid rgba(22, 237, 196, .4); border-radius: 4px; padding: 0 5px; }
.mp-main { padding: 22px 24px 24px; min-width: 0; }
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.mp-head .mp-lbl { font-weight: 800; font-size: 13px; color: var(--p-label); letter-spacing: .02em; }
.mp-head h4 { margin: 2px 0 0; font-size: 20px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.mp-head h4 span { font-size: 13.5px; color: var(--p-text-3); font-weight: 400; }
.mp-head .mp-desc { font-size: 13px; color: var(--p-text-2); margin-top: 2px; }
.mp-status { display: flex; align-items: center; gap: 12px; }
.mp-up { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--p-text-2); white-space: nowrap; }
.mp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--p-green); flex-shrink: 0; }
.mp-dot.yl { background: var(--p-yellow); }
.mp-dot.r { background: var(--p-red); }
.mp-power { display: flex; gap: 7px; }
.mp-pb {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 4px; padding: 7px 13px; font-size: 14px; cursor: pointer;
  border: 1px solid rgb(var(--c)); background: rgba(var(--c), .1); color: #fff; }
.mp-pb:hover { background: rgba(var(--c), .18); }
.mp-pb .ic { width: 13px; height: 13px; }
.mp-pb.go { --c: 34, 197, 94; }
.mp-pb.re { --c: 107, 114, 128; }
.mp-pb.st { --c: 239, 68, 68; }
.mp-pb[disabled] { opacity: .5; cursor: default; }
.mp-card { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 12px; }
.mp-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--p-border); }
.mp-card-h h5 { margin: 0; font-size: 16px; font-weight: 600; }
.mp-card-h small { display: block; color: var(--p-text-3); font-size: 12.5px; }
.mp-card-b { padding: 16px 18px; }
.mp-grid { display: grid; gap: 8px; }
.mp-btn {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--p-accent); background: rgba(59, 111, 196, .12); color: #fff; white-space: nowrap; }
.mp-btn:hover { background: rgba(59, 111, 196, .22); }
.mp-btn.grey { border-color: rgba(107, 114, 128, .7); background: rgba(107, 114, 128, .1); }
.mp-btn.green { border-color: var(--p-green); background: rgba(34, 197, 94, .1); }
.mp-btn.red { border-color: var(--p-red); background: rgba(239, 68, 68, .1); }
.mp-btn.sm { padding: 5px 9px; font-size: 11.5px; }
.mp-btn .ic { width: 13px; height: 13px; }
.mp-btn[disabled] { opacity: .55; cursor: default; }
.mp-iconbtn { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; border: 1px solid rgba(107, 114, 128, .6); background: rgba(107, 114, 128, .08); color: var(--p-text-2); cursor: pointer; flex-shrink: 0; }
.mp-iconbtn .ic { width: 15px; height: 15px; }
.mp-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; padding: 2px 8px; font-size: 12px; background: var(--p-chip); color: var(--p-chip-text); white-space: nowrap; }
.mp-chip .ic { width: 12px; height: 12px; opacity: .7; }
.mp-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 1px 8px; font-size: 12px; border: 1px solid rgba(96, 165, 250, .22); background: rgba(96, 165, 250, .1); color: var(--p-badge); white-space: nowrap; }
.mp-badge.g { border-color: rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .1); color: #86efac; }
.mp-badge.r { border-color: rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .09); color: #fca5a5; }
.mp-badge.yl { border-color: rgba(250, 230, 150, .2); background: rgba(250, 230, 150, .07); color: #ece0a8; }
.mp-badge.n { border-color: rgba(148, 163, 184, .2); background: rgba(148, 163, 184, .08); color: #b4bdca; }
.mp-badge .ic { width: 12px; height: 12px; }
.mp-home { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.mp-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.mp-welcome {
  position: relative; border-radius: 8px; overflow: hidden; padding: 16px 22px;
  background: linear-gradient(120deg, #123a2c 0%, #0f2f4e 55%, #241a3d 100%); }
.mp-welcome::before { content: ""; position: absolute; inset: 0; opacity: .4; background: radial-gradient(500px 180px at 85% 15%, rgba(19, 133, 104, .65), transparent 70%), radial-gradient(400px 160px at 10% 90%, rgba(59, 111, 196, .5), transparent 70%); }
.mp-welcome > * { position: relative; }
.mp-welcome em { font-style: normal; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(161, 247, 222, .9); }
.mp-welcome h5 { margin: 2px 0 4px; font-size: 19px; font-weight: 700; }
.mp-welcome p { font-size: 13.5px; color: #d1d5db; }
.mp-welcome a { display: inline-block; margin-top: 8px; color: #7dd3fc; font-weight: 600; font-size: 13.5px; text-decoration: underline; }
.mp-ovr {
  border-radius: 8px; padding: 16px; display: grid; gap: 10px;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, .86) 35%, rgba(0, 0, 0, .25) 100%),
    linear-gradient(160deg, #6fb5e3 0%, #9fd0ef 30%, #4e8f3a 58%, #2f5a24 80%, #5a3f2a 100%); }
.mp-ovr .st { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #d1d5db; }
.mp-ovr h6 { margin: 0; font-size: 23px; font-weight: 700; }
.mp-kv { display: grid; grid-template-columns: 112px auto; align-items: center; gap: 8px 10px; font-size: 13.5px; font-weight: 600; }
.mp-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--p-accent); background: var(--p-navy); border-radius: 4px; padding: 3px 10px; font-weight: 500; justify-self: start; }
.mp-up-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-up-btns span { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; padding: 8px; font-weight: 600; font-size: 14px; border: 1px solid; }
.mp-up-btns .g { color: var(--gold); border-color: rgba(246, 196, 83, .6); background: rgba(246, 196, 83, .1); }
.mp-up-btns .b { color: var(--blue); border-color: rgba(0, 174, 239, .6); background: rgba(0, 174, 239, .1); }
.mp-inst { display: flex; align-items: center; gap: 10px; padding: 12px; }
.mp-inst .gi { width: 38px; height: 38px; border-radius: 6px; flex-shrink: 0; background: repeating-linear-gradient(90deg, #4f8a35 0 6px, #5d9a3f 6px 12px), linear-gradient(#6aa84f, #3f6f2a); box-shadow: inset 0 -12px 0 #7a5a3a; }
.mp-inst small { display: block; font-size: 11.5px; color: var(--p-text-3); }
.mp-inst b { font-size: 14.5px; }
.mp-gs { padding: 12px 14px; }
.mp-gs h6 { margin: 0 0 2px; font-size: 15px; }
.mp-gs > p { font-size: 12px; color: var(--p-text-3); margin-bottom: 6px; }
.mp-gs a { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; }
.mp-gs a .ic { width: 15px; height: 15px; color: var(--p-icon); margin-top: 2px; }
.mp-gs a b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.mp-gs a span { display: block; font-size: 11px; color: var(--p-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-graph { padding: 8px 12px 10px; }
.mp-graph h6 { margin: 4px 0 4px; text-align: center; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.mp-graph h6 i { color: var(--blue); font-style: normal; }
.mp-graph svg { width: 100%; height: 86px; display: block; }
.mp-con { border-radius: 8px; overflow: hidden; background: var(--p-console); border: 1px solid var(--p-border); display: flex; flex-direction: column; }
.mp-con-out {
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: #e5e7eb; padding: 10px 12px; overflow-y: auto;
  height: 220px; white-space: pre-wrap; word-break: break-word; }
.mp-con-out .ms { color: var(--p-mintdark); font-weight: 700; }
.mp-con-out .w { color: #FFCB6B; }
.mp-con-out .e { color: #FF5370; }
.mp-con-out .g { color: #C3E88D; }
.mp-con-out .c { color: #89DDFF; }
.mp-con-out .dim { color: rgba(255, 255, 255, .45); }
.mp-con-in { display: flex; align-items: center; gap: 8px; margin: 0 8px 8px; background: var(--p-input); border-radius: 4px; padding: 0 10px; border-bottom: 2px solid transparent; }
.mp-con-in:focus-within { border-bottom-color: #06b6d4; }
.mp-con-in .ic { width: 15px; height: 15px; color: #e5e7eb; }
.mp-con-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--p-text-2); font-family: var(--mono); font-size: 12.5px; padding: 9px 0; }
.mp-con-in input::placeholder { color: var(--p-text-3); }
.mp-con-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 8px 8px; }
.mp-con-sug button { font-family: var(--mono); font-size: 11.5px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--p-text-2); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.mp-con-sug button:hover { border-color: #06b6d4; color: #fff; }
.mp-search { display: flex; align-items: center; border: 1px solid var(--p-border); background: rgba(0, 0, 0, .18); border-radius: 12px; overflow: hidden; }
.mp-search select, .mp-search .sel { background: transparent; border: 0; color: #fff; font-family: inherit; font-size: 14px; padding: 10px 14px; border-right: 1px solid var(--p-border); }
.mp-search select option { background: #110b21; }
.mp-search .q { display: flex; align-items: center; gap: 9px; flex: 1; padding: 0 14px; color: var(--p-text-3); min-width: 0; }
.mp-search .q .ic { width: 15px; height: 15px; }
.mp-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-family: inherit; font-size: 14px; padding: 10px 0; }
.mp-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mp-mod { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--p-border); background: var(--p-card); min-width: 0; position: relative; overflow: hidden; }
.mp-mod .art { width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 12px; line-height: 1; text-align: center; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.mp-mod .tx { flex: 1; min-width: 0; }
.mp-mod .tx b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-mod .tx p { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-mod .tx .chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mp-mod .prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--p-cyan); width: 0; transition: width .2s linear; }
.mp-mod.done { border-color: rgba(34, 197, 94, .45); }
.mp-installed {
  position: relative; overflow: hidden; border-radius: 12px; display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: linear-gradient(90deg, rgba(59, 130, 246, .22) 0%, rgba(59, 130, 246, .08) 45%, transparent 75%), var(--p-card); }
.mp-installed .art { width: 60px; height: 60px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 13px; line-height: 1; text-align: center; }
.mp-installed em { font-style: normal; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-badge); }
.mp-installed b { display: block; font-size: 18px; font-weight: 600; }
.mp-installed p { font-size: 13px; }
.mp-swap { display: grid; gap: 8px; }
.mp-inst-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--p-border); background: var(--p-card-2); }
.mp-inst-row .art { width: 54px; height: 40px; border-radius: 6px; flex-shrink: 0; }
.mp-inst-row .tx { flex: 1; min-width: 0; }
.mp-inst-row .tx b { display: block; font-size: 14.5px; }
.mp-inst-row .tx small { display: block; font-size: 12px; color: var(--p-text-3); }
.mp-inst-row.on { border-color: rgba(34, 197, 94, .45); }
.mp-swapbar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; margin-top: 6px; }
.mp-swapbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #138568, #16edc4); transition: width .25s linear; }
.mp-games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mp-games span { aspect-ratio: 3 / 4; border-radius: 8px; display: flex; align-items: flex-end; padding: 6px; font-size: 11px; font-weight: 700; line-height: 1.15; border: 1px solid var(--p-border); }
.mp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mp-tile { display: flex; align-items: center; gap: 11px; background: rgba(148, 163, 184, .06); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.mp-tile .ic { width: 15px; height: 15px; color: var(--p-badge); }
.mp-tile small { display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--p-text-3); }
.mp-tile b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-list { display: grid; }
.mp-li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--p-border); min-width: 0; }
.mp-li:first-child { border-top: 0; }
.mp-li .av { width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0; image-rendering: pixelated; }
.mp-li .tx { flex: 1; min-width: 0; }
.mp-li .tx b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-li .tx small { display: block; font-size: 12px; color: var(--p-text-3); }
.mp-li .acts { display: flex; gap: 6px; flex-shrink: 0; }
.mp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-tabs button { border: 1px solid var(--p-border); background: transparent; color: var(--p-text-2); border-radius: 6px; padding: 5px 11px; font-size: 13px; cursor: pointer; }
.mp-tabs button[aria-pressed="true"] { border-color: var(--p-accent); background: rgba(59, 111, 196, .14); color: #fff; }
.mp-ver { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mp-ver button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--p-border); background: var(--p-card-2); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: #fff; }
.mp-ver button .ic { width: 20px; height: 20px; color: var(--p-badge); }
.mp-ver button b { display: block; font-size: 14px; }
.mp-ver button small { display: block; font-size: 11.5px; color: var(--p-text-3); }
.mp-ver button[aria-pressed="true"] { border-color: var(--p-accent); background: rgba(59, 111, 196, .14); }
.mp-ana { display: grid; gap: 10px; }
.mp-finding { border-radius: 10px; border: 1px solid rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .06); padding: 12px 14px; }
.mp-finding.yl { border-color: rgba(250, 230, 150, .25); background: rgba(250, 230, 150, .05); }
.mp-finding h6 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.mp-finding h6 .ic { width: 16px; height: 16px; color: #fca5a5; }
.mp-finding.yl h6 .ic { color: #ece0a8; }
.mp-finding p { font-size: 13px; margin-top: 4px; }
.mp-finding code { font-family: var(--mono); font-size: 12px; background: rgba(0, 0, 0, .3); border-radius: 4px; padding: 1px 6px; color: #e5e7eb; }
.mp-fix { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #fff; }
.mp-fix .ic { width: 15px; height: 15px; color: var(--p-label); }
.mp-ws { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 26px; gap: 6px; }
.mp-ws > div {
  border-radius: 8px; border: 1px solid var(--p-border); background: var(--p-card); padding: 6px 9px; font-size: 11.5px; color: var(--p-text-2);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; position: relative; overflow: hidden; transition: all .35s ease; }
.mp-ws > div b { color: #fff; font-weight: 600; font-size: 12px; }
.mp-ws.edit > div { border-style: dashed; border-color: rgba(59, 111, 196, .8); background: rgba(59, 111, 196, .08); }
.mp-ws.edit > div::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-right: 2px solid var(--p-badge); border-bottom: 2px solid var(--p-badge); }
.mp-ws .grip { width: 14px; height: 14px; color: var(--p-icon); opacity: 0; }
.mp-ws.edit .grip { opacity: 1; }
@media (max-width: 1180px) {
.gp-hero-a { grid-template-columns: 1fr; }
.gp-t2 { grid-template-columns: 1fr; }
.gp-t2-tabs { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 960px) {
.gp-row, .gp-row.gp-flip { grid-template-columns: 1fr; gap: 26px; margin-top: 72px; }
.gp-row.gp-flip > :first-child { order: 0; }
.gp-help { grid-template-columns: 1fr; }
.mp-app { grid-template-columns: 1fr; }
.mp-side { display: none; }
.mp-home { grid-template-columns: 1fr; }
.mp-mods { grid-template-columns: 1fr; }
.mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-ver { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-mobnav { display: flex !important; }
}
@media (max-width: 640px) {
.gp-checks.gp-two { grid-template-columns: 1fr; }
.mp-head { flex-direction: column; align-items: flex-start; }
.mp-up { display: none; }
.mp-main { padding: 14px; }
.gp-t2-cap { grid-template-columns: 1fr; }
}
.mp-mobnav { display: none; gap: 6px; overflow-x: auto; padding: 10px 12px; border-bottom: 1px solid var(--p-border); background: rgba(17, 11, 33, .85); }
.mp-mobnav button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 1px solid var(--p-border); background: transparent; color: #fff; border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.mp-mobnav button .ic { width: 14px; height: 14px; color: var(--p-icon); }
.mp-mobnav button[aria-current="true"] { background: #12324b; box-shadow: inset 0 0 0 1px var(--p-accent); }
@media (prefers-reduced-motion: reduce) {
.mp-swapbar i, .mp-mod .prog, .mp-ws > div { transition: none; }
}
.gp-tp-row { display: block; }
.mini-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p-text-3); margin-bottom: 10px; }
.mini-h .ic { width: 14px; height: 14px; color: var(--p-badge); }
.gp-gt { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.gp-gt-tabs { display: grid; gap: 6px; align-content: start; }
.gp-gt-tabs button {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; font-size: 15px; font-weight: 700; color: #fff; }
.gp-gt-tabs button img { border-radius: 7px; }
.gp-gt-tabs button .gp-all { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: rgba(22, 237, 196, .12); color: var(--mint); }
.gp-gt-tabs button .gp-all .ic { width: 16px; height: 16px; }
.gp-gt-tabs button[aria-selected="true"] { border-color: var(--mint); background: rgba(22, 237, 196, .06); }
.gp-gt-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px; align-content: start; }
.gp-gt-tool { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--line); min-width: 0; }
.gp-gt-tool .gp-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(22, 237, 196, .12); color: var(--mint); flex-shrink: 0; }
.gp-gt-tool .gp-ico .ic { width: 19px; height: 19px; }
.gp-gt-tool b { display: block; font-size: 15px; }
.gp-gt-tool small { display: block; color: var(--muted-2); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.mp-body { min-width: 0; }
button.mp-li { width: 100%; background: transparent; border: 0; border-top: 1px solid var(--p-border); color: #fff; text-align: left; cursor: pointer; font-family: inherit; border-radius: 0; }
button.mp-li:first-child { border-top: 0; }
.mp-li > .ic { width: 18px; height: 18px; color: var(--p-badge); flex-shrink: 0; }
.mp-li.sel { background: rgba(59, 111, 196, .12); border-radius: 8px; }
.mp-li.link:hover { background: rgba(255, 255, 255, .03); }
.mp-li .nx { color: var(--p-text-3); font-size: 12px; white-space: nowrap; }
.mp-li .acts .ic { width: 15px; height: 15px; color: var(--p-icon); }
.av.sys { display: grid; place-items: center; background: rgba(59, 111, 196, .14); border-radius: 6px; color: var(--p-badge); }
.av.sys .ic { width: 15px; height: 15px; }
.mp-con-hint { display: flex; align-items: center; gap: 10px; margin: 0 8px 6px; padding: 6px 10px; border-radius: 4px; background: #1f1a30; border: 1px solid rgba(6, 182, 212, .35); font-size: 12px; color: var(--p-text-2); flex-wrap: wrap; }
.mp-con-hint[hidden] { display: none; }
.mp-con-hint code { font-family: var(--mono); color: #fff; }
.mp-con-hint kbd { font-family: var(--mono); font-size: 11px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 3px; padding: 0 5px; margin-left: auto; }
.mp-con-hint small { color: var(--p-text-3); }
.ln-wl { display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: rgba(59, 111, 196, .14); border: 1px solid rgba(59, 111, 196, .45); font-family: var(--display); font-size: 12.5px; color: #e5e7eb; white-space: normal; }
.ln-wl .ic { width: 14px; height: 14px; color: var(--p-badge); }
.ln-wl button { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border: 1px solid var(--p-green); background: rgba(34, 197, 94, .12); color: #fff; border-radius: 4px; padding: 3px 8px; cursor: pointer; font-family: var(--display); }
.ln-wl button .ic { color: #86efac; width: 12px; height: 12px; }
.mp-stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mp-stat3 .mp-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 14px; gap: 8px; }
.mp-stat3 i { color: var(--blue); font-style: normal; }
.mp-stat3 b { font-size: 16px; font-weight: 600; white-space: nowrap; }
.mp-searchrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mp-searchrow h5 { margin: 0; font-size: 16px; font-weight: 600; }
.mp-searchrow .mp-search { flex: 1; min-width: 240px; }
.mp-detect { flex-basis: 100%; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--p-text-2); }
.mp-detect .ic { width: 14px; height: 14px; color: #86efac; }
.mp-detect b { color: #fff; font-weight: 600; }
.mp-step { border: 1px solid rgba(59, 111, 196, .45); background: rgba(59, 111, 196, .08); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.mp-step > b { font-size: 14.5px; }
.mp-step-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-step-opts button { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 1px solid var(--p-border); background: var(--p-card); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: #fff; }
.mp-step-opts button:hover:not([disabled]) { border-color: var(--p-accent); }
.mp-step-opts button[disabled] { opacity: .55; cursor: default; }
.mp-step-opts .ic { width: 18px; height: 18px; color: var(--p-badge); margin-top: 2px; }
.mp-step-opts b { display: block; font-size: 13.5px; }
.mp-step-opts small { display: block; font-size: 12px; color: var(--p-text-3); }
.mp-step .mp-btn { justify-self: start; }
.mp-fact { display: flex; gap: 8px; font-size: 12.5px; margin-top: 4px !important; }
.mp-fact .ic { width: 15px; height: 15px; color: var(--gold); margin-top: 2px; }
.mp-fact b { color: #fff; }
.mp-gtiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mp-gtile { display: grid; gap: 6px; justify-items: center; text-align: center; border: 1px solid var(--p-border); background: var(--p-card-2); border-radius: 10px; padding: 8px 6px; cursor: pointer; color: #fff; font-size: 11.5px; line-height: 1.2; }
.mp-gtile img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.mp-gtile:hover:not([disabled]) { border-color: var(--p-accent); }
.mp-players { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mp-tabs button small { color: var(--p-text-3); margin-left: 3px; }
.pd-head { display: flex; align-items: center; gap: 12px; }
.pd-face { width: 52px; height: 52px; border-radius: 8px; }
.pd-head b { display: block; font-size: 17px; }
.pd-head small { display: block; color: var(--p-text-3); font-size: 12.5px; }
.pd-bars { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; }
.pd-bars > div { display: flex; gap: 1px; }
.pd-bars .r { flex-direction: row-reverse; }
.pd-bars img { image-rendering: pixelated; }
.pd-xp { position: relative; height: 7px; border-radius: 2px; background: #1a1a1a; border: 1px solid #000; margin-top: 20px; }
.pd-xp i { position: absolute; inset: 0 auto 0 0; background: #7cdc1f; }
.pd-xp span { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); color: #7cdc1f; font-size: 12px; font-weight: 800; text-shadow: 0 1px 0 #000; }
.pd-inv { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; margin-top: 14px; padding: 4px; background: #8b8b8b; border-radius: 3px; }
.pd-inv span { position: relative; aspect-ratio: 1; background: #373737; display: grid; place-items: center; }
.pd-inv span svg { width: 74%; height: 74%; }
.pd-inv em { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; }
.pd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.pd-stats span { background: rgba(148, 163, 184, .06); border-radius: 8px; padding: 8px; min-width: 0; }
.pd-stats small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--p-text-3); }
.pd-stats b { display: block; font-size: 13.5px; font-weight: 600; }
.pd-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.mp-mapcard .mp-card-h { flex-wrap: wrap; }
.mp-map { position: relative; overflow: hidden; border-radius: 0 0 12px 12px; }
.mp-map canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.mp-map-ov { position: absolute; inset: 0; pointer-events: none; }
.mp-map-ov .mk, .mp-map-ov .pl { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mp-map-ov .mk .ic { width: 22px; height: 22px; color: var(--mc); fill: rgba(16, 11, 34, .85); stroke-width: 2.2; }
.mp-map-ov b { font-size: 11px; font-weight: 700; background: rgba(16, 11, 34, .88); border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.mp-map-ov .pl { transform: translate(-50%, -50%); }
.pl-face { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 3px; }
.mp-map-share { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; background: rgba(16, 11, 34, .92); border: 1px solid rgba(22, 237, 196, .5); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; max-width: calc(100% - 20px); }
.mp-map-share span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-map-share .ic { width: 14px; height: 14px; color: var(--mint); }
.mp-map-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 4px; }
.mp-map-zoom span { width: 26px; height: 26px; display: grid; place-items: center; background: rgba(16, 11, 34, .9); border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; font-weight: 700; }
.mp-field { display: grid; gap: 5px; font-size: 12px; color: var(--p-text-3); text-transform: uppercase; letter-spacing: .05em; }
.mp-field input, .mp-field select, .mp-props select, .mp-props input, .mp-anarow select, .mp-subrow input {
  background: rgba(0, 0, 0, .22); border: 1px solid var(--p-border); border-radius: 8px; color: #fff; font-family: inherit; font-size: 14px; padding: 8px 10px; text-transform: none; letter-spacing: normal; min-width: 0; }
.mp-field input:focus, .mp-subrow input:focus { outline: 0; border-color: var(--p-accent); }
.mp-field select option, .mp-props select option, .mp-anarow select option { background: #110b21; }
.mp-tabs .sw { display: inline-block; width: 16px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.mc-list { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px; background: rgba(0, 0, 0, .45); border: 1px solid #555; font-family: var(--mono); }
.mc-list img { image-rendering: pixelated; }
.mc-list b { color: #fff; font-weight: 400; font-size: 13.5px; }
.mc-list > div { flex: 1; min-width: 0; }
.motd { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-ping { display: flex; align-items: flex-end; gap: 1px; height: 14px; align-self: flex-start; }
.mc-ping i { width: 3px; background: #22c55e; }
.mc-ping i:nth-child(1) { height: 3px; }
.mc-ping i:nth-child(2) { height: 5px; }
.mc-ping i:nth-child(3) { height: 8px; }
.mc-ping i:nth-child(4) { height: 11px; }
.mc-ping i:nth-child(5) { height: 14px; }
.mp-props { display: grid; }
.mp-props .pr { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--p-border); }
.mp-props .pr:first-child { border-top: 0; padding-top: 0; }
.mp-props code { font-family: var(--mono); font-size: 13px; color: #fff; }
.mp-props small { display: block; font-size: 12px; color: var(--p-text-3); }
.mp-props input[type="number"] { width: 76px; }
.tg { width: 40px; height: 22px; border-radius: 11px; border: 1px solid var(--p-border); background: rgba(255, 255, 255, .08); position: relative; cursor: pointer; flex-shrink: 0; }
.tg i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #9ca3af; transition: left .15s; }
.tg.on { background: rgba(34, 197, 94, .25); border-color: var(--p-green); }
.tg.on i { left: 20px; background: #fff; }
.mp-cur { display: flex; align-items: center; gap: 12px; }
.mp-cur > .ic { width: 22px; height: 22px; color: var(--p-badge); }
.mp-cur small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--p-text-3); }
.mp-cur b { font-size: 15px; font-weight: 600; }
.mp-geyser { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-top: 8px; border: 1px dashed rgba(22, 237, 196, .5); background: rgba(22, 237, 196, .05); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: #fff; }
.mp-geyser > .ic { width: 20px; height: 20px; color: var(--mint); flex-shrink: 0; }
.mp-geyser b { display: block; font-size: 14px; }
.mp-geyser small { display: block; font-size: 12px; color: var(--p-text-3); }
.mp-geyser span { flex: 1; }
.mp-geyser.on { border-style: solid; border-color: var(--mint); background: rgba(22, 237, 196, .1); }
.mp-vers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mp-vers button { font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--p-border); background: transparent; color: var(--p-text-2); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.mp-vers button[aria-pressed="true"] { border-color: var(--p-accent); background: rgba(59, 111, 196, .16); color: #fff; }
.mp-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; border: 1px solid rgba(250, 230, 150, .3); background: rgba(250, 230, 150, .06); padding: 11px 12px; flex-wrap: wrap; }
.mp-alert > .ic { width: 18px; height: 18px; color: #ece0a8; margin-top: 1px; flex-shrink: 0; }
.mp-alert > div { flex: 1; min-width: 160px; }
.mp-alert b { font-size: 14px; }
.mp-alert p { font-size: 12.5px; margin-top: 2px !important; }
.mp-alert.ok { border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .07); }
.mp-alert.ok > .ic { color: #86efac; }
.mp-alert .mp-btn { align-self: center; }
.mp-anarow { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-anarow select { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; }
.mp-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--p-console); border: 1px solid var(--p-border); font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: #cbd5e1; white-space: pre-wrap; word-break: break-word; }
.mp-err .e { color: #FF5370; }
.mp-err .w { color: #FFCB6B; }
.mp-finding { margin-top: 12px; }
.dc { display: flex; gap: 12px; background: #313338; border-radius: 8px; padding: 12px; font-family: "Noto Sans", Helvetica, Arial, sans-serif; }
.dc img { border-radius: 50%; background: #100b22; padding: 5px; flex-shrink: 0; }
.dc > div > b { font-size: 14px; font-weight: 600; color: #fff; }
.dc .bot { font-size: 10px; background: #5865f2; color: #fff; border-radius: 3px; padding: 0 4px; margin-left: 3px; vertical-align: 1px; }
.dc b small { font-size: 11.5px; color: #949ba4; font-weight: 400; margin-left: 4px; }
.dc-embed { margin-top: 6px; border-left: 4px solid #16edc4; background: #2b2d31; border-radius: 4px; padding: 8px 12px; }
.dc-embed b { font-size: 14px; color: #fff; }
.dc-embed p { font-size: 13.5px; color: #dbdee1 !important; margin-top: 2px !important; }
.dc-embed small { display: block; margin-top: 6px; font-size: 11.5px; color: #949ba4; }
.crumbs { font-size: 14px; color: var(--p-text-2); }
.crumbs button { background: none; border: 0; color: #7dd3fc; cursor: pointer; font-family: inherit; font-size: 14px; padding: 0; }
.mp-copyrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--p-border); font-size: 13px; min-width: 0; }
.mp-copyrow:first-child { border-top: 0; }
.mp-copyrow span { width: 80px; color: var(--p-text-3); flex-shrink: 0; }
.mp-copyrow code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-copyrow .ic { width: 15px; height: 15px; color: var(--p-icon); }
.mp-chartbig svg { width: 100%; height: 170px; display: block; }
.mp-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-steps span { font-size: 12px; color: var(--p-text-3); border: 1px solid var(--p-border); border-radius: 6px; padding: 3px 8px; }
.mp-steps span.on { color: #fff; border-color: var(--p-accent); background: rgba(59, 111, 196, .14); }
.mp-hosts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mp-hosts button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--p-border); background: var(--p-card-2); border-radius: 10px; padding: 10px; cursor: pointer; color: #fff; font-size: 13px; text-align: left; }
.mp-hosts button:hover { border-color: var(--p-accent); }
.mp-hosts .ic { width: 15px; height: 15px; color: var(--p-badge); flex-shrink: 0; }
.mp-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-card-b > p .ic { width: 14px; height: 14px; color: var(--gold); vertical-align: -2px; }
.mp-subrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-subrow input { flex: 1; min-width: 120px; font-family: var(--mono); }
.mp-subrow span { font-family: var(--mono); color: var(--p-text-2); }
.mp-avail { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-top: 10px !important; }
.mp-avail .ic { width: 15px; height: 15px; color: #86efac; }
.mp-avail b { color: #fff; }
.mp-portad { border-color: rgba(0, 174, 239, .4); background: linear-gradient(120deg, rgba(0, 174, 239, .1), var(--p-card) 60%); }
.mp-portad b { font-size: 15px; }
.mp-nowafter { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.mp-nowafter small { display: block; font-size: 11px; text-transform: uppercase; color: var(--p-text-3); }
.mp-nowafter code { font-family: var(--mono); font-size: 13px; }
.mp-nowafter > .ic { width: 16px; height: 16px; color: var(--p-icon); }
.mp-layoutbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-layoutbar small { color: var(--p-text-3); font-size: 12.5px; }
.mp-ws > div > span { min-width: 0; }
.mp-ws svg { height: 40px !important; margin-top: 4px; }
.cmdb { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.cmdb i { font-style: normal; font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--p-accent); background: rgba(59, 111, 196, .14); border-radius: 4px; padding: 2px 6px; color: #fff; }
.fire { align-self: center; }
.fire .ic { width: 30px; height: 30px; color: #f97316; fill: rgba(249, 115, 22, .25); }
.pw { display: flex; gap: 4px; margin-top: 6px; }
.pw i { width: 26px; height: 14px; border-radius: 3px; border: 1px solid; }
.pw .g { border-color: var(--p-green); background: rgba(34, 197, 94, .15); }
.pw .n { border-color: var(--p-grey); background: rgba(107, 114, 128, .15); }
.pw .r { border-color: var(--p-red); background: rgba(239, 68, 68, .15); }
.mp-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-cats span { font-size: 12px; border: 1px solid var(--p-border); border-radius: 6px; padding: 3px 9px; color: var(--p-text-2); }
.mp-cats b { color: #fff; }
@media (max-width: 1180px) {
.gp-gt { grid-template-columns: 1fr; }
.gp-gt-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 960px) {
.mp-players { grid-template-columns: 1fr; }
.mp-gtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.gp-gt-panel { grid-template-columns: 1fr; }
.mp-step-opts { grid-template-columns: 1fr; }
.mp-gtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-form2 { grid-template-columns: 1fr; }
.mp-stat3 { grid-template-columns: 1fr; }
.pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-ws { grid-auto-rows: 22px; }
.mp-ws > div { font-size: 10px; padding: 4px 6px; }
.mp-ws > div b { font-size: 10.5px; }
.mp-ws svg, .cmdb { display: none; }
}
.mp-app { height: 780px; min-height: 0; }
.mp-side { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.mp-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.mp-app .mp-con-out { height: 360px; }
.mp-app .mp-home .mp-con-out { height: 190px; }
.mp-nav button { height: 32px; }
@media (max-width: 960px) {
.mp-app { height: auto; }
.mp-body { overflow: visible; }
.mp-app .mp-con-out { height: 260px; }
}
.gp-row.gp-flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
#worlds.gp-row.gp-flip { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 960px) {
.gp-row.gp-flip, #worlds.gp-row.gp-flip { grid-template-columns: 1fr; }
}
.mp-grid > *, .mp-home > *, .mp-col > *, .mp-players > * { min-width: 0; }
.mp-anarow select { width: 100%; max-width: 100%; }
.mp-head h4 { flex-wrap: wrap; }
.mp-ws { grid-auto-rows: 30px; grid-auto-flow: row dense; }
.mp-ws > .wt { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px; padding: 6px 9px; transition: border-color .15s, background-color .15s; user-select: none; -webkit-user-select: none; }
.mp-ws.edit > div::after { content: none; }
.mp-ws.edit > .wt { border-style: dashed; border-color: rgba(59, 111, 196, .75); background: rgba(59, 111, 196, .07); cursor: grab; touch-action: none; }
.mp-ws.edit > .wt:hover { border-color: var(--p-badge); }
.mp-ws > .wt.dragging { z-index: 5; cursor: grabbing; pointer-events: none; border-style: solid; border-color: var(--mint); background: #19143a; }
.mp-ws > .wt.resizing { border-style: solid; border-color: var(--mint); }
.wt-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.wt-h b { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.wt-tools .grip { width: 14px; height: 14px; color: var(--p-icon); opacity: 1 !important; }
.wt-x { border: 0; background: transparent; color: var(--p-text-3); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; font-family: inherit; }
.wt-x:hover { color: #fca5a5; }
.wt-b { flex: 1; min-height: 0; font-size: 11.5px; color: var(--p-text-2); overflow: hidden; }
.wt-b svg { width: 100%; height: 100% !important; display: block; margin-top: 0 !important; }
.rs { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; }
.rs::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-right: 2px solid var(--p-badge); border-bottom: 2px solid var(--p-badge); }
.wd-t { color: #fff !important; font-weight: 600; font-size: 13px; margin: 0; }
.wd-s { font-size: 11.5px; margin: 2px 0 0 !important; }
.wd-con { font-family: var(--mono); font-size: 10.5px; display: grid; gap: 1px; background: var(--p-console); border-radius: 4px; padding: 5px 7px; height: 100%; align-content: end; color: #e5e7eb; }
.wd-con span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-con .g { color: #C3E88D; }
.wd-con .c { color: #89DDFF; }
.wd-con .ms { color: var(--p-mintdark); font-weight: 700; }
.wd-con .ms i { color: #e5e7eb; font-style: normal; font-weight: 400; }
.pw i { display: grid; place-items: center; width: 34px; height: 22px; }
.pw i .ic { width: 11px; height: 11px; color: #fff; }
.wd-faces { display: flex; align-items: center; gap: 4px; }
.wf { width: 22px; height: 22px; border-radius: 4px; }
.wd-faces b { margin-left: 4px; font-size: 12px; color: #fff; }
.wd-clock { font-size: 22px; font-weight: 700; color: #fff !important; margin: 0; font-variant-numeric: tabular-nums; }
.wt-b .fire { display: grid; place-items: center; height: 100%; }
.mp-layoutbar small { display: inline-flex; align-items: center; gap: 6px; }
.mp-layoutbar small .ic { width: 14px; height: 14px; }
.mp-layoutbar .saved .ic { color: #86efac; }
.mp-map { height: 400px; cursor: grab; touch-action: none; background: #2f5d9b; user-select: none; -webkit-user-select: none; }
.mp-map.grabbing { cursor: grabbing; }
.mp-map-layer { position: absolute; left: 0; top: 0; width: 1200px; height: 720px; transform-origin: 0 0; }
.mp-map-layer canvas { width: 1200px !important; height: 720px !important; }
.mp-map-ov .mk { transform: translate(-50%, -100%) scale(var(--inv, 1)); transform-origin: 50% 100%; }
.mp-map-ov .pl { transform: translate(-50%, -50%) scale(var(--inv, 1)); }
.mp-map-zoom { z-index: 2; }
.mp-map-zoom button { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(16, 11, 34, .9); border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; font-weight: 700; color: #fff; cursor: pointer; font-size: 16px; font-family: inherit; }
.mp-map-zoom button:hover { border-color: var(--mint); }
.mp-map-share { z-index: 2; }
.mp-map-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; background: rgba(16, 11, 34, .88); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; padding: 4px 10px; font-size: 12px; pointer-events: none; z-index: 2; }
.mp-map-hint .ic { width: 13px; height: 13px; color: var(--mint); }
@media (max-width: 640px) {
.mp-map { height: 300px; }
}
.gp-hero-vis { position: relative; min-width: 0; }
.mini-k { margin-left: auto; font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--p-text-3); font-weight: 600; }
.gp-hv-edge { position: relative; padding-bottom: 40px; }
.gp-hv-edge .gp-shot { width: calc(100% + (100vw - min(100vw, 1320px)) / 2 + 40px); border-radius: 18px 0 0 18px; border-right: 0; }
@media (max-width: 1180px) {
.gp-hv-edge .gp-shot { width: 100%; border-radius: 18px; border-right: 1px solid var(--line); }
}
@media (max-width: 640px) {
.gp-hv-edge { padding-bottom: 0; display: grid; gap: 12px; }
}
.mp-ws { grid-auto-rows: 40px; }
.wt-b svg { width: auto; height: auto !important; }
.wt-b > svg { width: 100%; height: 100% !important; }
.wt-b .wf { width: 22px; height: 22px !important; }
.wt-b .pw .ic { width: 11px; height: 11px !important; }
.wt-b .fire .ic { width: 30px; height: 30px !important; }
.gp-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.gp-rq { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gp-rq-stars { display: flex; gap: 2px; }
.gp-rq-stars i { width: 17px; height: 17px; background: #00b67a; display: grid; place-items: center; border-radius: 2px; }
.gp-rq-stars i svg { width: 12px; height: 12px; fill: #fff; }
.gp-rq-t { margin: 0; font-size: 15.5px; line-height: 1.5; color: #fff; flex: 1; }
.gp-rq-by { font-size: 13px; color: var(--muted-2); font-weight: 600; }
.mp-li.ok > .ic { color: #86efac; }
.bk-ask { margin: 2px 0 8px; }
.bk-ask p { font-size: 12.5px; margin: 0 !important; }
.bk-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 960px) {
.gp-quotes { grid-template-columns: 1fr; }
}
.gp-t2-media { min-height: 472px; }
@media (max-width: 1180px) {
.gp-t2-media { min-height: 0; }
}
button.gp-shot.gp-zoom { display: block; width: 100%; padding: 0; margin: 0; cursor: zoom-in; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; font: inherit; color: inherit; }
button.gp-shot.gp-zoom:hover { border-color: var(--line-2); }
button.gp-shot.gp-zoom img { display: block; width: 100%; height: auto; }
.gp-hv-edge { padding-bottom: 0; }
.gp-hv-edge button.gp-shot.gp-zoom { width: calc(100% + (100vw - min(100vw, 1320px)) / 2 + 40px); border-radius: 18px 0 0 18px; border-right: 0; }
.gp-hero-a .gp-checks { margin-top: 26px; }
@media (max-width: 1180px) {
.gp-hv-edge button.gp-shot.gp-zoom { width: 100%; border-radius: 18px; border-right: 1px solid var(--line); }
}
img.art { object-fit: cover; border-radius: 8px; flex-shrink: 0; display: block; }
.mp-inst-row .art { width: 44px !important; height: 44px !important; object-fit: cover; border-radius: 8px; }
.mp-sbar { flex: 1; min-width: 240px; display: flex; align-items: stretch; border: 1px solid var(--p-border); background: rgba(0, 0, 0, .18); border-radius: 12px; position: relative; }
.mp-sbar:focus-within { border-color: var(--p-accent); }
.mp-dd { position: relative; display: flex; flex-shrink: 0; }
.mp-dd-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; border-right: 1px solid var(--p-border); color: #fff; font-family: inherit; font-size: 14px; padding: 0 14px; min-width: 150px; justify-content: space-between; cursor: pointer; border-radius: 12px 0 0 12px; }
.mp-dd-btn .ic { width: 14px; height: 14px; color: var(--p-text-3); }
.mp-dd-btn:hover { background: rgba(255, 255, 255, .03); }
.mp-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 190px; background: #16112a; border: 1px solid var(--p-border); border-radius: 10px; padding: 4px; display: grid; }
.mp-dd-menu button { text-align: left; background: transparent; border: 0; color: var(--p-text-2); font-family: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.mp-dd-menu button:hover { background: rgba(59, 111, 196, .14); color: #fff; }
.mp-dd-menu button[aria-selected="true"] { background: rgba(59, 111, 196, .22); color: #fff; }
.mp-sq { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.mp-sq .ic { width: 15px; height: 15px; color: var(--p-text-3); flex-shrink: 0; }
.mp-sq input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; outline: 0; color: #fff; font-family: inherit; font-size: 14px; padding: 12px 0; display: block; }
.mp-sq input::placeholder { color: var(--p-text-3); }
.pd-meters { display: grid; gap: 8px; margin-top: 14px; }
.pd-m { display: grid; gap: 4px; }
.pd-m span { display: flex; justify-content: space-between; align-items: baseline; }
.pd-m small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--p-text-3); }
.pd-m b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-m i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.pd-m em { display: block; height: 100%; border-radius: 3px; }
.pd-m.hp em { background: #f87171; }
.pd-m.fd em { background: #fbbf24; }
.pd-m.xp em { background: #a3e635; }
.gp-fl-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.gp-fl-search { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; flex: 1 1 260px; max-width: 360px; }
.gp-fl-search:focus-within { border-color: var(--mint); }
.gp-fl-search .ic { width: 16px; height: 16px; color: var(--muted-2); }
.gp-fl-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-family: inherit; font-size: 14.5px; padding: 11px 0; }
.gp-fl-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-fl-cats button { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 10px; padding: 8px 12px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.gp-fl-cats button:hover { color: #fff; }
.gp-fl-cats button[aria-pressed="true"] { border-color: var(--mint); color: #fff; background: rgba(22, 237, 196, .08); }
.gp-fl-grid { columns: 4 260px; column-gap: 14px; }
.gp-fl-grid .gp-grp { break-inside: avoid; margin-bottom: 14px; }
.gp-fl-empty { color: var(--muted); text-align: center; }
.gp-hero-a .gp-checks.gp-two { grid-template-columns: 1fr; gap: 12px; }
@media (max-width: 640px) {
.mp-installed { flex-wrap: wrap; }
.mp-installed > div { flex: 1 1 160px; }
.mp-installed .mp-btn { width: 100%; justify-content: center; }
.mp-dd-btn { min-width: 0; }
.mp-sbar { min-width: 0; flex-basis: 100%; }
}

/* ===== site integration: undo the theme's global heading, paragraph and list styles inside the page ===== */
.gp h1, .gp h2, .gp h3, .gp h4, .gp h5, .gp h6 { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: #fff; font-family: var(--display); letter-spacing: normal; }
.gp p { line-height: 1.55; }
.gp ul, .gp ol { margin-bottom: 0; }
.gp code { color: inherit; font-size: inherit; }
.gp label { margin: 0; }
.gp-body { display: flow-root; position: relative; z-index: 1; background: #171229; padding-bottom: 40px; }
.gp-body .gp-sec { padding-block: 84px 0; }
.gp-hero { padding-block: 24px 10px; }
.gp-hero .tp-top { margin-top: 22px; }
.gp-hero-copy .gp-h1 { margin: 10px 0 0; }
.gp-fl-empty { margin: 0; }
.gp-quotes { margin-top: 48px; }

/* map pins are all the same */
.mp-map-ov .mk .ic { color: var(--mint); }

/* server software tiles with their real icons */
.mp-ver { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-ver button img { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.mp-ver button.wide { grid-column: span 2; }
.mp-cur .swi { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }

/* dashboard widgets */
.wd-big { font-size: 20px; font-weight: 700; color: #fff !important; margin: 0 !important; font-variant-numeric: tabular-nums; }
.wt-b .wd-s b { color: #fff; font-weight: 600; }

/* MOTD editor */
.motd-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.motd-fmt { display: flex; gap: 4px; }
.motd-fmt button { width: 32px; height: 30px; border: 1px solid var(--p-border); background: transparent; color: var(--p-text-2); border-radius: 6px; cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-size: 14px; }
.motd-fmt button[aria-pressed="true"] { border-color: var(--p-accent); background: rgba(59, 111, 196, .18); color: #fff; }
.motd-fmt .f-b { font-weight: 700; }
.motd-fmt .f-i { font-style: italic; }
.motd-fmt .f-u { text-decoration: underline; }
.motd-fmt .f-s { text-decoration: line-through; }
.motd-sw { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.motd-sw > button:not(.motd-gp) { width: 26px; height: 26px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .12); cursor: pointer; padding: 0; }
.motd-sw > button[aria-pressed="true"]:not(.motd-gp) { border-color: #fff; }
.motd-gp { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--p-border); background: transparent; color: var(--p-text-2); border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; font-family: inherit; }
.motd-gp i { display: inline-block; width: 16px; height: 10px; border-radius: 2px; }
.motd-gp[aria-pressed="true"] { border-color: var(--p-accent); background: rgba(59, 111, 196, .14); color: #fff; }
.motd-custom { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: 12.5px; color: var(--p-text-3); cursor: pointer; }
.motd-custom input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--p-border); border-radius: 6px; background: transparent; cursor: pointer; }
.mc-list .motd { line-height: 1.45; }

@media (max-width: 960px) {
  .mp-ver { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gp-body .gp-sec { padding-block: 64px 0; }
}

/* Trustpilot widget box, same look as the homepage hero (main.blade.php keeps these inline) */
.gp-hero .tp-top { background: rgba(27, 236, 161, .3); border: 2px solid #1beca1; border-radius: 16px; padding-bottom: 0 !important; margin: 26px 0 0; }
.gp-hero .tp-top-wide { max-height: 45px; width: 560px; max-width: 100%; padding-top: 12px; text-align: center; overflow: hidden; }
.gp-hero .tp-top-wide .trustpilot-widget, .gp-hero .tp-top-wide iframe { margin-left: auto; margin-right: auto; }
.gp-hero .tp-top.d-flex { height: 44px; padding: 0; justify-content: center; max-width: 420px; }
/* the Trustpilot iframe is a light document; a dark color-scheme on its parent makes Chrome paint it white */
.gp .tp-top { color-scheme: normal; }
.gp .mp-ws { grid-auto-rows: 46px; }
/* the static Trustpilot badge has an inline star image; keep it inline */
.gp .tp-top img { display: inline-block; vertical-align: middle; max-width: none; }
/* the scaleX stretch on headings must not push them past the column */
.gp-h1 { max-width: calc(100% / 1.1); }
/* Lithuanian "VALDYMO SKYDELIS" only stays on one line a little smaller, as on the homepage hero */
html[lang="lt"] .gp .gp-h1 { font-size: clamp(32px, 3.45vw, 50px); }
.gp-h-sec { max-width: calc(100% / 1.12); margin-inline: auto; }
.gp-h-row { max-width: calc(100% / 1.06); }

/* ===== round 5 ===== */
/* headings exactly like the site: section titles as on the homepage (42px, 700, -0.2px, scaleX 1.15 over the full width), row titles 27px with no stretch */
.gp .gp-h-sec { font-size: 42px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.4; transform: scaleX(1.15); max-width: none; margin: 0; text-align: center; }
.gp .gp-sub { font-size: 20px; color: #bebebe; margin: 10px auto 0; }
.gp .gp-h-row { font-size: 27px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.4; transform: none; max-width: none; margin: 8px 0 0; }
.gp .gp-h1 { letter-spacing: -0.2px; font-weight: 800; }
.gp-t2-cap h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.2px; }
@media (max-width: 960px) {
  .gp .gp-h-sec { font-size: 32px; transform: scaleX(1.08); }
  .gp .gp-sub { font-size: 16px; }
  .gp .gp-h-row { font-size: 24px; }
}

/* hero sits on the homepage background; no extra glow box */
.gp-hero::before { content: none; }
.gp-hero { padding-bottom: 120px; }
.gp-body::before { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; background: linear-gradient(to bottom, rgba(23, 18, 41, 0), #171229); pointer-events: none; }

/* screenshots: plain pointer, no zoom cursor */
button.gp-shot.gp-zoom { cursor: pointer; }

/* hero carousel */
.gp-car-track { display: grid; }
.gp-car-track > .gp-shot { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.gp-car-track > .gp-shot.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.gp-car-track > .gp-shot img { aspect-ratio: 2561 / 1404; object-fit: cover; object-position: top left; width: 100%; height: auto; }
.gp-car-dots { display: flex; gap: 8px; margin-top: 16px; }
.gp-car-dots button { position: relative; width: 56px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; cursor: pointer; }
.gp-car-dots button i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--mint); border-radius: 3px; }
.gp-car-dots button[aria-selected="true"] { background: rgba(22, 237, 196, .22); }
@media (prefers-reduced-motion: reduce) { .gp-car-track > .gp-shot { transition: none; } }

/* player stats: two columns so nothing wraps */
.pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pd-stats b, .pd-stats small { white-space: nowrap; }

/* update modpack progress bar */
.mp-installed .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--p-cyan); }

/* server stats */
.st-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.st-kpi { background: rgba(148, 163, 184, .06); border-radius: 10px; padding: 10px 12px; }
.st-kpi small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--p-text-3); }
.st-kpi b { display: block; font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.st-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--p-text-3); margin-top: 4px; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.st .mp-chartbig svg { height: 160px; }

/* donations */
.dn { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dn-head img { border-radius: 8px; }
.dn-head small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--p-text-3); }
.dn-head b { display: block; font-size: 17px; color: #fff; }
.dn-head span { display: block; font-size: 12.5px; color: var(--p-text-2); font-family: var(--mono); }
.dn-amts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dn-amts button { border: 1px solid var(--p-border); background: var(--p-card-2); color: #fff; border-radius: 8px; padding: 9px 0; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: normal; }
.dn-amts button[aria-pressed="true"] { border-color: var(--gold); background: rgba(246, 196, 83, .12); }
.dn-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; border: 0; border-radius: 10px; padding: 11px; font-family: inherit; font-size: 15px; font-weight: 800; color: #2a1d02; background: linear-gradient(135deg, #f6c453, #f59e0b); cursor: pointer; }
.dn-go .ic { width: 16px; height: 16px; }
.dn-cmd { margin-top: 14px; display: grid; gap: 4px; }
.dn-cmd small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--p-text-3); }
.dn-cmd code { font-family: var(--mono); font-size: 11.5px; color: #e5e7eb; background: var(--p-console); border-radius: 6px; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-raised { background: rgba(246, 196, 83, .08); border: 1px solid rgba(246, 196, 83, .3); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.dn-raised small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--p-text-3); }
.dn-raised b { display: block; font-size: 26px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.dn-raised span { display: block; font-size: 12px; color: var(--p-text-2); }
.dn-board h6 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 14px; }
.dn-board h6 .ic { width: 14px; height: 14px; color: var(--gold); }
.dn-rank { width: 20px; font-weight: 800; color: var(--p-text-3); text-align: center; flex-shrink: 0; }
.dn-amt { color: var(--gold); font-variant-numeric: tabular-nums; }

/* members */
.mem-perms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mem-perms button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--p-border); background: transparent; color: var(--p-text-2); border-radius: 6px; padding: 6px 10px; font-family: inherit; font-size: 13px; cursor: pointer; }
.mem-perms button .ic { width: 13px; height: 13px; }
.mem-perms button[aria-pressed="true"] { border-color: var(--p-green); background: rgba(34, 197, 94, .1); color: #fff; }
.mem-perms button[aria-pressed="true"] .ic { color: #86efac; }

@media (max-width: 960px) {
  .dn { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .st-two { grid-template-columns: 1fr; }
  .st-kpi b { font-size: 18px; }
}

/* ===== round 6: even rhythm between feature rows ===== */
/* every row takes the same minimum height so the text blocks sit at the same distance from each other */
@media (min-width: 961px) {
  .gp-row { min-height: 460px; }
}
.st .mp-chartbig svg { height: 120px; }
.st .mp-graph svg { height: 64px; }
.st .st-kpi { padding: 8px 12px; }
.st .st-kpi b { font-size: 20px; }
.gp .mp-map { height: 340px; }

/* friends and family: one compact card */
.mem .mp-card-h { padding: 12px 16px; }
.mem .mp-card-b { padding: 10px 16px 16px; }
.mem-list .mp-li { padding: 7px 2px; }
.mem-list .av { width: 28px; height: 28px; }
.mem-invite { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--p-border); }
.mem-row { display: flex; gap: 8px; align-items: stretch; }
.mem-email { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .22); border: 1px solid var(--p-border); border-radius: 8px; padding: 0 10px; margin: 0; }
.mem-email .ic { width: 14px; height: 14px; color: var(--p-text-3); }
.mem-email input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-family: inherit; font-size: 14px; padding: 8px 0; }
.mem .mem-perms { margin-top: 8px; }
.mem .mem-perms button { padding: 4px 9px; font-size: 12.5px; }
.gp .mp-ws { grid-auto-rows: 40px; }
#dashboard .mp-layoutbar small { display: none; }
#dashboard .mp-layoutbar::after { content: "Drag a widget to move it"; font-size: 12.5px; color: var(--p-text-3); margin-left: 4px; }
@media (min-width: 961px) { .gp-row { min-height: 480px; } }

/* Round 7: the old `.mp-ws svg { height: 40px }` rule also caught the drag grip,
   making every widget header 44px tall and cutting off widget content. */
.gp .mp-ws .wt-h .grip { height: 14px !important; margin-top: 0; }

/* Help block: the site's green Trustpilot box (static variant, the card is narrower
   than the 500px the live widget needs) and the knowledgebase game links. */
.gp-help .tp-top { background: rgba(27, 236, 161, .3); border: 2px solid #1beca1; border-radius: 16px; height: 44px; padding: 0; margin: 22px 0 0; justify-content: center; max-width: 420px; }
.gp-kb-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.gp-kb-games a { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-weight: 600; font-size: 14px; color: #fff; }
.gp-kb-games a:hover { border-color: var(--blue); color: #fff; }
.gp-kb-games img { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.gp-kb-games span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-kb-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--blue); font-weight: 700; font-size: 15px; }
.gp-kb-all:hover { color: #fff; }

/* Tour box: stretch the panel to the box's min-height so its gradient runs to the
   bottom edge instead of stopping where shorter views end. */
.gp-t2-media { display: flex; flex-direction: column; }
.gp-t2-media > .mp { flex: 1 0 auto; }

/* "Built for the Way You Actually Play" opens a new section: more room above the
   heading, less between it and the first row (whose 480px min-height already adds
   space above its content). */
@media (min-width: 961px) {
#features { padding-top: 130px; }
#features > .gp-sec-head + .gp-row { margin-top: -16px; }
}

/* Worlds row: HTML copy of the panel's "Your worlds" card (replaces the screenshot) */
.wl .mp-card-h { padding: 16px 18px; }
.wl-tools { display: flex; align-items: center; gap: 8px; }
.wl .mp-btn, .wl .mp-iconbtn { cursor: default; }
.wl .mp-btn.grey { border-color: rgba(156, 163, 175, .55); background: transparent; }
.wl .mp-iconbtn.sm { width: 28px; height: 28px; }
.wl .mp-iconbtn.sm .ic { width: 13px; height: 13px; }
.wl-head { display: flex; align-items: center; gap: 14px; }
.wl-ico { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: rgba(59, 111, 196, .16); color: var(--p-badge); flex-shrink: 0; }
.wl-ico .ic { width: 20px; height: 20px; }
.wl-name { flex: 1; min-width: 0; }
.wl-name > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-name b { font-size: 18px; font-weight: 700; color: #fff; }
.wl-name p { margin: 3px 0 0; font-size: 13.5px; color: var(--p-text-2); }
.wl-chip { background: transparent; border: 1px solid rgba(156, 163, 175, .3); color: var(--p-text-2); border-radius: 999px; padding: 1px 9px; }
.wl .mp-badge { border-radius: 999px; padding: 1px 9px; }
.wl-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; margin-top: 18px; }
.wl-stats > div { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .035); }
.wl-stats .ic { width: 15px; height: 15px; color: #c7d2fe; flex-shrink: 0; }
.wl-stats span { min-width: 0; }
.wl-stats small { display: block; font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--p-text-3); white-space: nowrap; }
.wl-stats b { display: block; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-stats b.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
@media (max-width: 700px) {
.wl-head { flex-wrap: wrap; }
.wl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "See every tool" sits in the last slot of the per-game grid as a normal tool tile */
.gp-gt-more { color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
.gp-gt-more:hover { color: inherit; border-color: var(--mint); background: rgba(22, 237, 196, .05); }
.gp-gt-more b { color: var(--mint); }

/* Installed modpack: a green check the same size as the install buttons, so the
   card's text column (and its stats line) is as wide as on every other card. */
.mp-iconbtn.ok { border-color: var(--p-green); background: rgba(34, 197, 94, .1); color: #86efac; cursor: default; }
/* Narrow modpack cards (the feature row between ~960px and ~1300px viewports):
   drop the chip icons so the downloads + updated line stays on one line. */
.mp-mod { container-type: inline-size; }
@container (max-width: 340px) {
  .mp-mod .tx .chips { gap: 4px; flex-wrap: nowrap; }
  .mp-mod .tx .chips .mp-chip { padding: 2px 7px; }
  .mp-mod .tx .chips .mp-chip .ic { display: none; }
}
@container (max-width: 280px) {
  .mp-mod .tx .chips .mp-chip + .mp-chip { display: none; }
}

/* Hero screenshots (2026-10-21): stay inside their column, so the hero spans exactly
   the nav bar's width (text flush with its left edge, screenshot with its right edge). */
.gp-hv-edge .gp-shot,
.gp-hv-edge button.gp-shot.gp-zoom { width: 100%; border-radius: 18px; border-right: 1px solid var(--line); }
/* The hero sits outside the page container and spans the full page width (owner,
   2026-10-21): side gutters grow with the screen, the text column keeps a readable
   width and the screenshot takes the rest. Stacked (<=1180px) it uses the nav's gutters. */
.gp-hero { padding-inline: 24px; }
@media (max-width: 767.98px) { .gp-hero { padding-inline: 12px; } }
@media (min-width: 1181px) {
  .gp-hero { padding-inline: clamp(24px, 4vw, 96px); }
  /* Screenshot capped at 930px (its size on the owner's laptop); on bigger screens
     the text + screenshot group stops growing and centres. */
  .gp-hero-a { grid-template-columns: minmax(0, clamp(560px, 34vw, 640px)) minmax(0, 930px); justify-content: center; gap: clamp(32px, 3.2vw, 88px); }
}
/* Hero feature icons in the homepage hero's blue */
.gp-hero .gp-checks li .ic { color: #00aeef; }

/* Hero screenshots: crop the browser scrollbar baked into their right edge
   (bar + margins = 24 of 2561px; 28 cropped). The button clips the overflow. */
.gp-car-track > button.gp-shot.gp-zoom img { width: calc(100% * 2561 / 2533); max-width: none; }
/* Thin outline like the nav bar (border + 1px ring), a touch brighter so it
   shows against the screenshots' dark edges. */
.gp-hv-edge button.gp-shot.gp-zoom { border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }
.gp-hv-edge button.gp-shot.gp-zoom:hover { border-color: rgba(255, 255, 255, .16); }
/* See the Panel: a light fill so it reads as a button */
.gp-btn-ghost { background: rgba(255, 255, 255, .06); }
.gp-btn-ghost:hover { background: rgba(255, 255, 255, .1); }
/* Less space between the hero and the review cards (was 120 + 48px); the gap from
   the screenshot to the reviews equals the gap from the nav to the screenshot (86px). */
.gp-hero { padding-bottom: 32px; }
.gp-quotes { margin-top: 32px; }
/* The body's 140px top fade (.gp-body::before) reaches up over the hero; keep the hero
   above it so the fade only darkens the background image, not the Trustpilot box or the
   screenshot's lower edge. */
.gp-hero { z-index: 2; }

/* Feature rows: every other row (the flipped ones) sits on a slightly lighter full-width
   band with soft top and bottom edges and a hint of its accent behind the demo. */
.gp-body { overflow-x: clip; } /* the bands are 100vw wide */
#features .gp-row { position: relative; isolation: isolate; }
#features .gp-row.gp-flip::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -72px; bottom: -72px; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(600px 420px at 32% 50%, color-mix(in srgb, var(--a) 8%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(31, 25, 55, 0) 0%, #1f1937 24%, #1f1937 76%, rgba(31, 25, 55, 0) 100%);
}
/* Review attribution links to the original Trustpilot review */
a.gp-rq-by { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--muted-2); text-decoration: none; transition: color .15s; }
a.gp-rq-by i { font-size: 10px; opacity: .7; }
a.gp-rq-by:hover { color: #00b67a; }