/* Portal compatibility + enhancements on top of style.css / esports.css */

/* keep the original portal layout spacing tighter for desktop */
.container{ padding-bottom: 24px; }

/* Prefer portal layout: a fixed-ish left summary column.
   Use minmax to avoid over-squeezing the summary on wide screens. */
.grid.two{ grid-template-columns: minmax(320px, 420px) 1fr; }

/* cards: our old markup uses .card-h/.card-b */
.card-h{ padding: 12px 14px; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.card-b{ padding: 14px; }
.card-title{ font-size: 15px; font-weight: 900; color: var(--text); }

/* kv blocks */
.kvs{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px){ .kvs{ grid-template-columns: 1fr; } }
/* In the portal's 2-column layout, the LEFT summary card is narrow.
   NOTE: do NOT use :first-child here because whitespace creates text nodes.
   Use :first-of-type so the rule always matches. */
.grid.two > .card:first-of-type .kvs{ grid-template-columns: 1fr; }
.kv{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; box-shadow: var(--shadow); }
.kv .k{ font-size: 12px; color: var(--muted); font-weight: 800; }
/* Avoid character-by-character wrapping (looks like vertical text in Chinese).
   Prefer wrapping at punctuation/spacing and keep values readable. */
.kv .v{ font-weight: 900; color: var(--text); margin-top: 4px; word-break: normal; overflow-wrap: break-word; line-height: 1.35; }

/* tabs */
.tabs{ display:flex; gap: 8px; flex-wrap: wrap; }
.tab{ display:inline-flex; align-items:center; justify-content:center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font-weight: 900; cursor:pointer; }
.tab.active{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.28); color: var(--text); }

/* badges (keep existing names) */
.badge{ display:inline-flex; align-items:center; gap:6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 900; color: var(--muted); background: rgba(0,0,0,.00); }
.badge.good{ color: var(--success); border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); }
.badge.warn{ color: var(--warning); border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
.badge.dead{ color: var(--danger); border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }

/* terminal (BT-like) */
.terminal{ background: #0b1220; color: #e5e7eb; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; height: 460px; overflow:auto; padding: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.55; }
.terminal .muted{ color: rgba(229,231,235,.70); }
@media (max-width: 600px){ .terminal{ height: 320px; } }

/* forms: match your UI */
label.muted{ display:block; margin: 6px 0 6px; font-size: 12px; color: var(--muted); font-weight: 800; }

/* make old .row consistent */
.row{ display:flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* tables wrap for mobile */
.tableWrap{ width:100%; overflow:auto; border-radius: var(--radius-lg); }

/* --- Wizard UI alignment fixes (buy/confirm pages) --- */
/* The summary card on the left of the wizard is narrow; use a row-style kv layout
   so long Chinese values won't wrap character-by-character (looks like vertical text). */
.wizardGrid > .card:first-of-type .kvs{ grid-template-columns: 1fr; }
.wizardGrid > .card:first-of-type .kv{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.wizardGrid > .card:first-of-type .kv .k{ margin: 0; }
.wizardGrid > .card:first-of-type .kv .v{ margin-top: 0; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 240px; }
@media (max-width: 720px){
  .wizardGrid > .card:first-of-type .kv .v{ max-width: 60vw; }
}

/* small helper */
.code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }


/* --- v3.7: buy wizard / progress --- */
.stepper{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.step{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted);font-weight:900}
.step .dot{width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:rgba(0,0,0,.10);font-size:12px}
.step.active{color:var(--text);border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.10)}
.step.active .dot{border-color:rgba(59,130,246,.45)}
.step.done{color:var(--text);border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.step.done .dot{border-color:rgba(16,185,129,.45)}

.stepList{display:grid;gap:10px}
.stepItem{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px;background:rgba(0,0,0,.06)}
.stepItem .sDot{width:10px;height:10px;border-radius:999px;margin-top:6px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.stepItem .sT{font-weight:900}
.stepItem.is-wait{opacity:.62}
.stepItem.is-active{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08)}
.stepItem.is-active .sDot{background:#3b82f6;border-color:rgba(59,130,246,.55)}

/* Make the active step feel "alive" */
@keyframes rwPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.55}100%{transform:scale(1);opacity:1}}
.stepItem.is-active .sDot{ animation: rwPulse 1.2s ease-in-out infinite; }

/* Small spinner used in progress badge */
@keyframes rwSpin{to{transform:rotate(360deg)}}
.rwSpinner{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(59,130,246,.25);border-top-color:rgba(59,130,246,.95);animation:rwSpin .9s linear infinite;margin-right:8px}
.stepItem.is-done{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.07)}
.stepItem.is-done .sDot{background:#10b981;border-color:rgba(16,185,129,.55)}
.stepItem.is-fail{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.06)}
.stepItem.is-fail .sDot{background:#ef4444;border-color:rgba(239,68,68,.55)}

/* --- v3.8: console UX enhancements --- */
@media (max-width: 980px){
  .grid.two{ grid-template-columns: 1fr; }
}

.consoleActions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; }

.btn.mini{ padding: 5px 10px; border-radius: 999px; font-size: 12px; }

.consoleToolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.pill{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font-weight: 900; font-size: 12px; cursor: pointer; user-select:none; }
.pill input{ accent-color: var(--primary); }

.fsOverlay{ position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fsTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fsTitle{ color: white; font-weight: 900; }
.fsBody{ padding: 12px; }

@media (max-width: 600px){
  .fsBody{ padding: 10px; }
}


/* --- v3.15 UI hotfix: normalize legacy markup (forms/rows/chips/tableWrap) --- */

/* flex rows used throughout templates */
.row{ display:flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row > *{ min-width: 0; }
form .row{ align-items: flex-end; }

/* table wrapper */
.tableWrap{ width:100%; overflow:auto; }

/* chip (alias of pill-like label) */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(243,244,246,.75);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
html[data-theme="dark"] .chip{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: var(--muted); }

/* Global form control styling: many pages use raw <input> without .input class */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]), select, textarea){
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(209,213,219,.95);
  background: rgba(249,250,251,.9);
  color: var(--text);
  outline: none;
  transition: all .2s;
  box-sizing: border-box;
}
html[data-theme="dark"] :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]), select, textarea){
  border-color: rgba(255,255,255,.12);
  background: rgba(17,24,39,.55);
}

/* labels in legacy markup are often plain <label class="muted"> */
label{ display:block; margin: 10px 0 6px; font-weight: 900; font-size: 13px; color: var(--text); }
label.muted{ color: var(--muted); font-weight: 800; }

/* align action column in most tables */
.table th:last-child, .table td:last-child{ text-align: right; }

/* prevent odd vertical 'character-by-character' wrap in narrow cards */
.kv .v{ word-break: normal; overflow-wrap: break-word; }