/* =========================================================
   QGS Partner Program - portal layer on top of style.css
   Reuses the QGS tokens (--blue, --surface, --border, …)

   2026-09: retuned to the design my.qgshosting.com runs
   (templates/nexus-qgs-v906/css/custom.css on CORE04) - the datacenter
   photo behind every page, translucent white borders so the photo reads
   through the layout gaps, square 4px-framed section cards and rounded
   1px small cards. style.css stays a verbatim copy of QGS-MAIN-EN;
   every change lives here, because this file loads after it.
   ========================================================= */

:root {
  /* Borders go translucent. With an opaque #232a39 the cards sat on the
     photo like stickers; a white veil lets it show at the seams, which is
     what makes the WHMCS pages read as one surface. */
  --border: rgba(255, 255, 255, .08);
  --border-2: rgba(255, 255, 255, .13);
  /* Opaque edge, kept where a hairline has to stay visible over artwork */
  --border-solid: #232a39;

  --radius-lg: 10px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, .35);
  --primary-dim: rgba(2, 157, 246, .14);
  --wallpaper: url("https://static.qgshosting.com/cdn/images/backgrounds/datacenter-room.webp");
  /* The hero strip only - the page behind it keeps the datacenter photo. */
  --hero-image: url("https://static.qgshosting.com/cdn/images/elements/qgs-hosting-wallpaper-1.webp");
}

/* ---------- Datacenter background (same stack as the WHMCS theme) ----------
   The photo goes on <html> so it becomes the canvas background; the ambient
   wash stays on body::before (fixed, z-index -1), which paints above the
   canvas and below the content. Two consequences, both deliberate:
   - the wash has to be translucent, or it hides the photo completely;
   - body can no longer carry an opaque background of its own, because once
     <html> has one, body's stops propagating to the canvas and just paints
     over it in normal flow.
   The auth screens are excluded - `.login-body` in style.css already composes
   the same photo with its own darker gradient, and if this rule reaches it the
   body goes transparent, the wash disappears and the bare photo shines through
   at full brightness. */
html {
  background-color: var(--bg);
  background-image: var(--wallpaper);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

body:not(.login-body) { background: transparent; }

body:not(.login-body)::before {
  background:
    radial-gradient(1000px 620px at 82% -6%, rgba(2, 157, 246, .07), transparent 60%),
    radial-gradient(1000px 640px at 12% 2%, rgba(2, 157, 246, .09), transparent 58%),
    linear-gradient(180deg, rgba(11, 16, 22, .86) 0%, rgba(15, 21, 29, .89) 100%);
}

/* iOS and Android either ignore `background-attachment: fixed` with `cover`
   or rasterise it badly - let the photo scroll with the page on phones. */
@media (max-width: 767px) {
  html { background-attachment: scroll; }
}

/* The landing page's alternating band was an opaque --bg-2 block, which cut a
   rectangular hole in the wallpaper. A translucent wash keeps the banding and
   lets the photo through - the same move the theme made on WHMCS's #main-body. */
.section.tint { background: rgba(15, 21, 29, .62); }

/* ---------- Language switch in the header ---------- */
.langbar { display: inline-flex; gap: 4px; }
.langbar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 1rem; line-height: 1; text-decoration: none;
  transition: border-color .25s, background .25s;
}
.langbar-btn:hover { border-color: var(--border-blue); }
.langbar-btn.is-on { background: rgba(2,157,246,.16); border-color: var(--border-blue); }

/* ---------- Portal shell ---------- */
.portal-body { background: transparent; }
.portal { padding: 28px 0 70px; }
.portal-grid {
  display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 24px; align-items: start;
}
.portal-main { min-width: 0; display: grid; gap: 20px; }

.portal-rail { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 14px; }
.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-card); }
.rail-user { display: flex; align-items: center; gap: 12px; }
.rail-user b { display: block; font-size: .98rem; line-height: 1.25; }
.rail-user small { display: block; color: var(--faint); font-size: .78rem; word-break: break-all; }
.rail-avatar {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: rgba(2,157,246,.14); color: var(--blue-bright); font-size: 1.1rem;
}
.rail-tier {
  display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 11px 12px;
  border-radius: var(--radius-sm); background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--tier-color, var(--blue)) 45%, var(--border));
}
.rail-tier > i { color: var(--tier-color, var(--blue)); font-size: 1.15rem; }
.rail-tier small { display: block; color: var(--faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.rail-tier b { font-size: 1rem; }
.rail-tier-pct { margin-left: auto; font-weight: 800; color: var(--tier-color, var(--blue)); }

.rail-nav { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; box-shadow: var(--shadow-card); }
.rail-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 0; color: var(--muted); text-decoration: none;
  font-weight: 600; font-size: .95rem; transition: background .2s, color .2s;
}
.rail-link i { width: 18px; text-align: center; }
.rail-link:hover { background: var(--surface-2); color: var(--text); }
.rail-link.is-on { background: var(--primary-dim); color: #fff; box-shadow: inset 3px 0 0 var(--blue); }

/* Count of creator profiles waiting for review, pushed to the far edge of the
   nav row so a waiting item is visible without opening the page. */
.rail-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill); background: var(--amber); color: #1b1200;
  font-size: .72rem; font-weight: 800;
}

/* ---------- Creator profile ---------- */
.creator-edit { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; }
/* `min-width: 0` on the column and `width: 100%` on the control are both
   needed: a native file input has an intrinsic minimum width and a grid item
   defaults to `min-width: auto`, so without these the "Choose file" box grows
   past its 200px column and lands on top of the Link field next to it. */
.creator-avatar-col { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.creator-avatar-col .field { width: 100%; min-width: 0; }
.creator-avatar-col input[type="file"] {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  font-size: .82rem; padding: 9px 10px;
}
.creator-avatar-col input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 5px 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-xs); color: var(--text);
  font-family: inherit; font-size: .8rem; font-weight: 600;
}
.creator-avatar-col input[type="file"]::file-selector-button:hover { border-color: var(--border-blue); }
.creator-avatar {
  width: 96px; height: 96px; flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border-2);
  color: var(--faint); font-size: 1.8rem;
}
.creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
.creator-fields { display: grid; gap: 16px; }

.creator-review { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.creator-review-col > small {
  display: block; color: var(--faint); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
}
.creator-review-arrow { color: var(--blue-bright); font-size: 1.1rem; }
.creator-card-row { display: flex; align-items: center; gap: 14px; }
.creator-card-row .creator-avatar { width: 64px; height: 64px; font-size: 1.3rem; }
.creator-card-row b { display: block; font-size: 1rem; }
.creator-card-row small { display: block; color: var(--faint); font-size: .78rem; word-break: break-all; }
.creator-card-row small a { color: var(--blue-bright); }

@media (max-width: 720px) {
  .creator-edit { grid-template-columns: 1fr; }
  .creator-review { grid-template-columns: 1fr; }
  .creator-review-arrow { transform: rotate(90deg); justify-self: center; }
}

.rail-help { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; text-align: center; box-shadow: var(--shadow-card); }
.rail-help i { color: var(--blue-bright); font-size: 1.3rem; }
.rail-help p { color: var(--muted); font-size: .84rem; line-height: 1.55; margin: 8px 0 12px; }

/* ---------- Page head = hero strip (.hc-hero in the WHMCS theme) ----------
   Same composition as the WHMCS theme - artwork under a left-to-right dark
   wash, a blue accent bar on the left edge and a blue glow in the bottom-left
   corner - but the strip carries its own image (--hero-image, the game
   wallpaper) while the page behind it stays on the datacenter photo. */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 28px 30px;
  border: 1px solid var(--border-solid);
  border-radius: 6px;
  background-color: var(--surface);
  background-image:
    linear-gradient(90deg, rgba(11,16,22,.96) 0%, rgba(11,16,22,.84) 38%, rgba(11,16,22,.45) 72%, rgba(11,16,22,.62) 100%),
    var(--hero-image);
  background-size: cover;
  /* The hero image is near-black except for three rows of game art about a
     third of the way down. The strip is short and very wide, so `cover` shows
     only a thin horizontal slice of it - at the default 50% that slice is the
     empty black under the artwork. 35% frames the rows themselves. */
  background-position: center 35%;
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .85);
}
.page-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1;
  background: linear-gradient(180deg, var(--blue-bright) 0%, var(--blue) 55%, var(--blue-deep) 100%);
  box-shadow: 0 0 22px rgba(2, 157, 246, .55);
}
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 200px at 0% 100%, rgba(2, 157, 246, .20), transparent 70%),
    linear-gradient(0deg, rgba(11, 16, 22, .55) 0%, transparent 55%);
}
.page-head > * { position: relative; z-index: 2; }
.page-head h1 {
  font-family: "Oswald", "Fira Sans", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase;
  letter-spacing: .5px; color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.page-head h1 small { font-size: .55em; color: var(--faint); text-transform: none; }
.page-head p { color: rgba(255, 255, 255, .8); margin-top: 6px; font-size: .98rem; }

.code-chip {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px 16px; background: rgba(19, 26, 34, .72); border: 1px solid var(--border-blue);
  border-radius: var(--radius-sm);
}
.code-chip { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .8); }
.code-chip small { display: block; color: var(--faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.code-chip b { font-family: "Oswald", sans-serif; font-size: 1.15rem; letter-spacing: 1px; }
.code-chip i { color: var(--blue-bright); }

/* ---------- Panels ---------- */
/* Section card: the theme frames these with a thick, square, translucent
   border instead of a hairline - that frame is the look. */
.panel {
  background: var(--surface); border: 4px solid var(--border);
  border-radius: 0; overflow: hidden; box-shadow: var(--shadow-card);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; text-transform: none; }
.panel-head h2 i { color: var(--blue-bright); }
.panel-sub { color: var(--faint); font-size: .84rem; }
.panel-link { color: var(--blue-bright); font-size: .86rem; font-weight: 600; text-decoration: none; }
.panel-link:hover { color: var(--blue-bright); text-decoration: underline; }
.panel-body { padding: 20px; }
.panel-lead { color: var(--muted); margin-bottom: 16px; }
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

.panel-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 24px; border-color: var(--border-blue); }
.panel-cta-text h2 { font-size: 1.35rem; margin-top: 10px; }
.panel-cta-text p { color: var(--muted); margin-top: 8px; max-width: 62ch; }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.stat-grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Two wide cards - the ones whose subtitle is a sentence, not a figure. */
.stat-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 16px; }
.stat-card {
  position: relative; padding: 18px 18px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-top: 3px solid var(--tier-color, var(--border-2));
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(2, 157, 246, .35);
  box-shadow: 0 8px 24px rgba(2, 157, 246, .12);
}
.stat-card small { display: block; color: var(--faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.stat-card b { display: block; margin-top: 6px; font-family: "Oswald", sans-serif; font-size: 1.7rem; line-height: 1.1; }
.stat-sub { display: block; margin-top: 8px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.stat-ico {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; background: var(--primary-dim); color: var(--blue-bright); font-size: .95rem;
}
.stat-money b { color: var(--green); }

/* ---------- Progress ---------- */
.progress { height: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--pill); overflow: hidden; }
.progress-bar {
  height: 100%; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--blue) 0%, var(--tier-color, var(--cyan)) 100%);
  transition: width .5s var(--ease);
}
.progress-label { margin-top: 12px; color: var(--muted); font-size: .95rem; }

/* ---------- Bar chart ---------- */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 190px; overflow-x: auto; padding-bottom: 4px; }
.bar { flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar-fill {
  width: 100%; min-height: 3px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue-deep));
  transition: height .5s var(--ease);
}
.bar-value { font-size: .78rem; font-weight: 700; margin-bottom: 5px; order: -1; }
.bar-label { margin-top: 7px; color: var(--faint); font-size: .74rem; }

/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th {
  text-align: left; padding: 9px 10px; color: var(--faint); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .09em; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }
.ta-right { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--faint); }
.bad { color: #ff6b6b; }

.tier-table-wrap { overflow-x: auto; }
.tier-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 620px; }
.tier-table th {
  text-align: left; padding: 11px 12px; color: var(--faint); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .09em; border-bottom: 1px solid var(--border);
}
.tier-table td { padding: 14px 12px; border-bottom: 1px solid var(--border); }
.tier-table tr.is-current { background: rgba(2,157,246,.08); }
.tier-table tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--tier-color, var(--blue)); }
.tier-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.tier-badge i { color: var(--tier-color, var(--blue)); }
.tier-you {
  margin-left: 8px; padding: 2px 8px; border-radius: var(--pill); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em; background: rgba(2,157,246,.18); color: var(--blue-bright);
}
.tier-range { font-family: "Oswald", sans-serif; }
.tier-discount { font-weight: 800; color: var(--text); }
.tier-cash { color: var(--green); font-weight: 700; }
.tier-credit { color: var(--cyan); font-weight: 700; }
.tier-note { margin-top: 14px; color: var(--faint); font-size: .87rem; display: flex; gap: 9px; align-items: flex-start; }
.tier-note i { margin-top: 3px; }
.tier-hint { display: block; color: var(--faint); font-weight: 400; font-size: .74rem; margin-top: 2px; }

/* ---------- Pills, hints, empties ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--pill); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.pill-ok    { background: rgba(55,226,154,.14); color: var(--green); }
.pill-bad   { background: rgba(255,107,107,.14); color: #ff6b6b; }
.pill-amber { background: rgba(255,176,32,.14); color: var(--amber); }
.pill-muted { background: var(--surface-3); color: var(--faint); }

.hint {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  color: var(--muted); font-size: .88rem; line-height: 1.6;
}
.hint i { margin-top: 3px; color: var(--faint); }
.hint-ok    { color: var(--green); } .hint-ok i    { color: var(--green); }
.hint-bad   { color: #ff6b6b; }      .hint-bad i   { color: #ff6b6b; }
.hint-amber { color: var(--amber); } .hint-amber i { color: var(--amber); }
.hint a { color: var(--blue-bright); }

.empty { display: flex; align-items: center; gap: 10px; color: var(--faint); padding: 18px 0; }
.empty i { font-size: 1.15rem; }

/* ---------- Flash messages ---------- */
.flash-stack { display: grid; gap: 10px; }
.flash {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);
  font-size: .93rem; line-height: 1.55;
}
.flash i { margin-top: 3px; }
.flash-ok   { border-color: rgba(55,226,154,.45); background: rgba(55,226,154,.08); }
.flash-ok i { color: var(--green); }
.flash-bad   { border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.08); }
.flash-bad i { color: #ff6b6b; }
.flash-info   { border-color: var(--border-blue); background: rgba(2,157,246,.08); }
.flash-info i { color: var(--blue-bright); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: .84rem; font-weight: 600; color: var(--muted); }
.field > span em { color: var(--faint); font-style: normal; font-weight: 400; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.field-full { grid-column: 1 / -1; }
.field-grow { flex: 1 1 260px; }
.inline-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
textarea.cfg-input { resize: vertical; line-height: 1.6; }
.code-input { font-family: "Oswald", sans-serif; letter-spacing: 2px; text-transform: uppercase; font-size: 1.1rem; }

.check { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: .92rem; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--blue); }
.check-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }

.color-row { display: flex; align-items: center; gap: 12px; }
.color-row input[type="color"] {
  width: 52px; height: 42px; padding: 3px; background: var(--bg-2);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm); cursor: pointer;
}
.color-row small { color: var(--faint); font-size: .8rem; }

.copy-field { display: flex; gap: 10px; align-items: stretch; }
.copy-field .cfg-input { flex: 1; min-width: 0; }
.copy-field .btn { white-space: nowrap; }

.btn-sm { padding: 7px 13px; font-size: .82rem; }
.btn-danger { color: #ff6b6b; }
.btn-danger:hover { color: #fff; background: #ff6b6b; }

.kv { display: grid; gap: 10px; }
.kv > div { display: flex; gap: 14px; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { color: var(--faint); font-size: .86rem; }
.kv dd { text-align: right; font-weight: 600; word-break: break-word; }

.timeline { list-style: none; display: grid; gap: 14px; }
.timeline li { padding-left: 16px; border-left: 2px solid var(--border); }
.timeline li b { display: block; font-size: .95rem; }
.timeline li small { display: block; color: var(--faint); font-size: .8rem; margin-top: 3px; }

.pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.pager-link {
  min-width: 34px; padding: 6px 10px; text-align: center; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted); font-size: .86rem; font-weight: 600;
}
.pager-link.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  padding: 7px 13px; border-radius: var(--radius-sm); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.tab.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
/* The period picker on the admin statistics page sits between the hero strip
   and the figures it filters, so it needs air on both sides. */
.range-tabs { margin: 16px 0 18px; }
/* Sortable column headings: a link in a <th> should still read as a heading. */
.data-table thead a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border-2); }
.data-table thead a:hover { color: var(--blue-bright); }
/* The statistics tables carry ten-plus columns. Without this they push the
   panel - and the whole page - wider than the window on a laptop. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .data-table { min-width: 900px; }

/* ---------- Legal pages (the programme terms) ----------
   Long prose needs a narrower measure than the portal's panels: past roughly
   75 characters a line the eye loses its place on the way back. */
.legal { max-width: 820px; }
.legal h2 {
  font-family: "Oswald", "Fira Sans", sans-serif; font-size: 1.15rem; color: #fff;
  text-transform: uppercase; letter-spacing: .04em;
  margin: 34px 0 12px; padding-top: 18px; border-top: 1px solid var(--border);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal p { color: var(--muted); line-height: 1.75; margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { color: var(--muted); line-height: 1.7; margin-bottom: 9px; }
.legal b { color: var(--text); }
.legal a { color: var(--blue-bright); }
.legal .data-table { margin: 4px 0 16px; }

/* ---------- Promo code hero ---------- */
/* `minmax(0, 1fr) auto` let the right-hand column take its full max-content
   width and squeezed this one to 92px, while the code - one unbreakable word
   in a 2.6rem face - kept its 234px and simply drew over the figures. Size the
   code column to its content instead, and give both a floor. */
.code-hero { display: grid; grid-template-columns: minmax(160px, auto) minmax(240px, 1fr); gap: 24px; padding: 24px; align-items: center; }
.code-hero-main { min-width: 0; }
.code-hero-main .code-big span { overflow-wrap: anywhere; }
.code-hero-main .code-big { display: flex; align-items: center; gap: 14px; margin: 12px 0 10px; }
.code-hero-main .code-big span {
  font-family: "Oswald", sans-serif; font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: 4px; color: #fff;
}
.code-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 14px 26px; }
.code-hero-stats small { display: block; color: var(--faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.code-hero-stats b { font-family: "Oswald", sans-serif; font-size: 1.35rem; overflow-wrap: anywhere; }
/* The second line under a figure - the credit rate, and anything like it. */
.code-hero-stats .stat-alt { margin-top: 3px; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .78rem; }

/* ---------- Attention panel (affiliate-link rule) ---------- */
.panel-attention { border-color: rgba(255, 176, 32, .45); background: linear-gradient(180deg, rgba(255,176,32,.06), transparent 60%), var(--surface); }
.attention { display: flex; gap: 16px; align-items: flex-start; }
.attention-ico {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255, 176, 32, .14); color: var(--amber); font-size: 1.15rem;
}
.attention-text h3 { font-size: 1.05rem; }
.attention-text p { color: var(--muted); font-size: .95rem; line-height: 1.65; margin-top: 6px; max-width: 72ch; }

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

/* ---------- Summary modal ---------- */
.qm-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.qm-modal[hidden] { display: none !important; }
.qm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
/* Modals follow the WHMCS/devpanel recipe: square, framed in a 5px blue
   border, with a solid blue close square in the corner that rotates on hover. */
.qm-panel {
  position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 5px solid #049df6; border-radius: 0;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8); padding: 30px 28px;
  animation: qmIn .22s var(--ease) both;
}
@keyframes qmIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.qm-close {
  position: absolute; top: 0; right: 0; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 0;
  background: #049df6; border: 0; color: #fff; cursor: pointer;
  opacity: .55; transition: opacity .2s ease, transform .2s ease;
}
.qm-close:hover { opacity: 1; transform: rotate(90deg); color: #fff; }
.qm-head { text-align: center; margin-bottom: 22px; }
.qm-head h2 { font-family: "Oswald", sans-serif; font-size: clamp(1.6rem, 5vw, 2.2rem); letter-spacing: 3px; margin: 12px 0 8px; }
.qm-head p { color: var(--muted); font-size: .95rem; }

.qm-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 22px; }
.qm-figures > div { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; }
.qm-figures small { display: block; color: var(--faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.qm-figures b { display: block; margin-top: 5px; font-family: "Oswald", sans-serif; font-size: 1.2rem; }
.qm-green { color: var(--green); }
.qm-sub { display: block; color: var(--faint); font-size: .78rem; line-height: 1.5; margin-top: 4px; }

.qm-steps { display: grid; gap: 16px; margin-bottom: 18px; }
.qm-step { display: flex; gap: 14px; align-items: flex-start; }
.qm-step > div { flex: 1; min-width: 0; }
.qm-step b { display: block; margin-bottom: 7px; font-size: .95rem; }
.qm-num {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--grad-blue); color: #fff;
  font-family: "Oswald", sans-serif; font-size: .9rem;
}

.qm-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.qm-foot .qm-sub { margin: 0; max-width: 42ch; }

@media (max-width: 560px) {
  .qm-panel { padding: 24px 18px; }
  .qm-foot { flex-direction: column; align-items: stretch; }
  .qm-foot .btn { width: 100%; }
}

/* ---------- Discount / commission trade-off ---------- */
.discount-scale {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
.discount-opt {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  padding: 14px 10px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  transition: border-color .25s, background .25s, transform .2s var(--ease);
}
.discount-opt:hover { border-color: var(--border-blue); transform: translateY(-2px); }
.discount-opt.is-on { border-color: var(--blue); background: rgba(2,157,246,.12); }
.discount-opt input { position: absolute; opacity: 0; pointer-events: none; }
.discount-opt b { font-family: "Oswald", sans-serif; font-size: 1.25rem; }
.discount-opt small { color: var(--green); font-weight: 700; font-size: .82rem; }
.discount-opt small::before { content: "→ "; color: var(--faint); }

/* ---------- Payout method picker ---------- */
.method-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.method-opt {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  transition: border-color .25s, background .25s;
}
.method-opt:hover { border-color: var(--border-blue); }
.method-opt.is-on { border-color: var(--blue); background: rgba(2,157,246,.1); }
.method-opt input { accent-color: var(--blue); }
.method-opt i { color: var(--blue-bright); font-size: 1.15rem; }
.method-opt span { font-weight: 600; font-size: .93rem; }

.payout-row { padding: 18px 0; border-bottom: 1px solid var(--border); display: grid; gap: 12px; }
.payout-row:last-child { border-bottom: 0; }
.payout-row-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.payout-row-main small { display: block; }
.payout-amount { font-family: "Oswald", sans-serif; font-size: 1.3rem; color: var(--green); margin-left: auto; }
.payout-row-details { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }

/* ---------- Banner builder ---------- */
.banner-preview {
  display: flex; justify-content: center; padding: 24px; border-radius: var(--radius-sm);
  background: repeating-conic-gradient(var(--bg-2) 0% 25%, var(--surface-2) 0% 50%) 50% / 22px 22px;
  border: 1px solid var(--border); overflow: auto;
}
.banner-preview img { max-width: 100%; height: auto; border-radius: 4px; }
.embed-list { display: grid; gap: 16px; margin-top: 20px; }
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.banner-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.banner-card-img { display: grid; place-items: center; padding: 12px; background: var(--surface-2); min-height: 96px; }
.banner-card-img img { max-width: 100%; max-height: 130px; height: auto; }
.banner-card-body { padding: 12px 14px; }
.banner-card-body b { display: block; font-size: .95rem; }
.banner-card-body small { color: var(--faint); font-size: .78rem; }
/* Four equal columns rather than a flex row: the buttons are icon-only, and
   at the 260px the grid can drop to, a flex row pushed the last one (delete)
   past the card edge and clipped it. */
.banner-card-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 14px 14px; }
.banner-card-actions form { display: contents; }
.banner-card-actions .btn {
  width: 100%; min-width: 0; padding: 9px 0; gap: 0; font-size: .9rem;
}

/* ---------- Login extras ----------
   The auth screens are the site's own login (`.login-*` in style.css, copied
   from QGS-MAIN-EN). Only the few things the portal adds live here: a
   full-width variant of the site button, breathing room for flash messages,
   and the terms list. */
.btn-login-block { width: 100%; }
.login-shell .flash-stack { width: 100%; margin-bottom: 18px; }
.login-box .terms-list { margin-bottom: 20px; }
.login-box .login-remember { align-items: flex-start; margin-bottom: 4px; }

.terms-list { list-style: none; display: grid; gap: 12px; margin: 0 0 22px; }
.terms-list li { display: flex; gap: 11px; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.terms-list i { margin-top: 3px; color: var(--blue-bright); }


.login-or {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 18px; color: var(--faint); text-align: center;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
}
.login-or::before, .login-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ---------- Admin extras ---------- */
.admin-chip {
  margin-left: 10px; padding: 2px 9px; border-radius: var(--pill); background: rgba(255,176,32,.16);
  color: var(--amber); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
}
.setting-row { padding: 18px 0; border-bottom: 1px solid var(--border); display: grid; gap: 10px; }
.setting-row:last-child { border-bottom: 0; }
.setting-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setting-row textarea { width: 100%; font-size: .82rem; }
.setting-row .form-actions { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-rail { position: static; }
  .rail-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .rail-link.is-on { box-shadow: inset 0 -2px 0 var(--blue); }
  .rail-help { display: none; }
}
@media (max-width: 900px) {
  .panel-row { grid-template-columns: 1fr; }
  .code-hero { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-head { align-items: flex-start; padding: 22px 20px; background-position: 70% 35%; }
  .copy-field { flex-direction: column; }
  .code-hero-stats { grid-template-columns: 1fr 1fr; }
  .payout-amount { margin-left: 0; }
}