/* ============================================================
   PanicHost portal / client-area / admin styles.
   Theme-aware: tokens flip on body.dark-theme vs body.light-theme,
   using the ServerScape palette so it matches the marketing site.
   ============================================================ */

.portal-main, .pm-scope {
  /* light theme (default) */
  --pm-text:       #0b0c1b;
  --pm-muted:      #5c5e70;
  /* Alias of muted. 35 rules across the portal already asked for this token
     and nothing defined it, so all of them silently inherited full-strength
     text instead of dimming. */
  --pm-text-dim:   #5c5e70;
  --pm-surface:    #ffffff;
  --pm-surface-2:  #f4f8fc;
  --pm-border:     #e2e9ee;
  --pm-shadow:     0 6px 24px rgba(11, 12, 27, .08);
  --pm-primary:    #0060fe;
  --pm-radius:     14px;

  padding: 150px 0 90px;
  min-height: 78vh;
  color: var(--pm-text);
}
.dark-theme .portal-main, .dark-theme .pm-scope {
  --pm-text:       #eaf0f7;
  --pm-muted:      #9a9aa0;
  --pm-text-dim:   #9a9aa0;
  --pm-surface:    #1a1b2e;
  --pm-surface-2:  #212235;
  --pm-border:     #2b2d47;
  --pm-shadow:     0 8px 30px rgba(0, 0, 0, .38);
}

/* headings + text inside the portal always follow the token */
.portal-main .title-1 { color: var(--pm-text); font-size: 2rem; margin-bottom: .35rem; }
.portal-main .para-1  { color: var(--pm-muted); font-size: 1.02rem; }
.portal-main .para-2  { color: var(--pm-muted); font-size: .9rem; }
.portal-main a:not(.btn) { color: var(--pm-primary); text-decoration: none; }
.portal-main a:not(.btn):hover { text-decoration: underline; }
.portal-main code {
  background: var(--pm-surface-2); color: var(--pm-text);
  padding: .1rem .4rem; border-radius: 6px; font-size: .85em;
}

/* ---- cards ---- */
.portal-card {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  padding: 1.5rem 1.6rem;
}
.portal-card + .portal-card { margin-top: 1.2rem; }
.portal-card-title { color: var(--pm-text); font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; }

/* ---- card grid (plans + metric tiles) ---- */
.portal-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
.portal-plans .portal-card { display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.portal-plans .portal-card:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0, 96, 254, .16); }

/* metric tiles = .portal-card-title sitting inside .portal-plans */
.portal-plans .portal-card-title {
  font-size: 2.4rem; line-height: 1.1; color: var(--pm-primary); font-family: var(--secondary-font);
}

/* pricing / order card price */
.portal-price { font-size: 1.9rem; font-weight: 800; margin: .2rem 0 .6rem; color: var(--pm-text); }
.portal-price span { font-size: .85rem; font-weight: 500; color: var(--pm-muted); }

/* ---- tables ---- */
.portal-table { width: 100%; border-collapse: collapse; }
.portal-table th {
  padding: .55rem .6rem; text-align: left; vertical-align: bottom;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pm-muted); border-bottom: 1px solid var(--pm-border); white-space: nowrap;
}
.portal-table td { padding: .8rem .6rem; border-bottom: 1px solid var(--pm-border); color: var(--pm-text); vertical-align: middle; }
.portal-table tr:last-child td { border-bottom: none; }
.portal-table tbody tr:hover td, .portal-table tr:hover td { background: var(--pm-surface-2); }
.portal-table .para-2 { color: var(--pm-muted); }

.portal-dl { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.6rem; }
.portal-dl dt { color: var(--pm-muted); }
.portal-dl dd { color: var(--pm-text); }

/* ---- status pills ---- */
.status {
  display: inline-block; text-transform: capitalize; font-weight: 700; font-size: .78rem;
  padding: .18rem .6rem; border-radius: 999px; line-height: 1.5;
}
.status-active        { color: #0a7d32; background: rgba(46, 204, 113, .14); }
.status-suspended,
.status-failed        { color: #d64541; background: rgba(236, 98, 95, .16); }
.status-pending,
.status-provisioning  { color: #b7791f; background: rgba(255, 184, 48, .18); }

/* ---- forms ---- */
.portal-main .form-label { display: block; margin: 0 0 1rem; }
.portal-main .form-input,
.portal-main select.form-input {
  width: 100%; padding: .7rem .9rem; border-radius: 10px;
  border: 1px solid var(--pm-border); background: var(--pm-surface-2);
  color: var(--pm-text); font-size: .95rem; font-family: var(--secondary-font);
}
.portal-main .form-input:focus { outline: none; border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0, 96, 254, .15); }
.portal-main .form-input::placeholder { color: var(--pm-muted); }
.settings-row { margin-bottom: 1.15rem; }
.settings-label { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--pm-text); }
.settings-row small { display: block; margin-top: .3rem; color: var(--pm-muted); }
.form-error { color: #d64541; font-weight: 600; }

/* ---- buttons (portal-scoped, readable in both themes) ---- */
.portal-main .btn, .admin-nav .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; border-radius: 10px; font-weight: 700; font-size: .85rem;
  border: 1px solid transparent; cursor: pointer; transition: all .15s ease; text-transform: none;
}
.portal-main .btn-sm { padding: .35rem .7rem; font-size: .78rem; border-radius: 8px; }
.portal-main .btn-fill-primary { background: var(--pm-primary); color: #fff; }
.portal-main .btn-fill-primary:hover { background: #0052db; }
.portal-main .btn-outline-dark, .admin-nav .btn-outline-dark {
  background: transparent; border-color: var(--pm-border); color: var(--pm-text);
}
.portal-main .btn-outline-dark:hover, .admin-nav .btn-outline-dark:hover { border-color: var(--pm-primary); color: var(--pm-primary); }
.admin-nav .btn-fill-primary { background: var(--pm-primary); color: #fff; }

/* ---- admin sub-nav ---- */
.admin-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.admin-inline-input {
  width: 108px; display: inline-block; padding: .3rem .5rem; border-radius: 7px;
  border: 1px solid var(--pm-border); background: var(--pm-surface-2); color: var(--pm-text);
}
.portal-table form.d-inline { display: inline-block; margin: 0 .2rem .3rem 0; }
.d-inline { display: inline-block; }

/* horizontal scroll safety for wide admin tables */
.portal-card { overflow-x: auto; }

/* ---- brand logo sizing (square PanicHost monogram vs the theme's old wordmark) ---- */
.theme-navbar .brand img { height: 46px !important; width: auto !important; max-width: none !important; }
.theme-footer .footer-bottom .logo img,
.theme-footer .footer-bottom .logo a img { height: 54px !important; width: 54px !important; max-width: 54px !important; object-fit: contain !important; }
@media (max-width: 767px) { .theme-navbar .brand img { height: 40px !important; } }

/* ---- brand wordmark next to the logo ---- */
.theme-navbar .brand .brand-name {
  margin-left: .55rem;
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .2px;
  line-height: 1;
  color: #0b0c1b;                 /* light theme */
}
.dark-theme .theme-navbar .brand .brand-name { color: #ffffff; }
@media (max-width: 480px) { .theme-navbar .brand .brand-name { font-size: 1.2rem; } }

/* ============ dashboard / admin polish ============ */
.pm-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.pm-header .para-2 { margin-top: .2rem; }

/* empty state */
.pm-empty { text-align: center; padding: 3rem 1.5rem; }
.pm-empty-icon { font-size: 3rem; line-height: 1; margin-bottom: .6rem; }
.pm-empty .btn { margin-top: 1rem; }

/* clickable stat tiles (admin) */
a.portal-card.pm-stat, a.portal-card.pm-service { text-decoration: none !important; color: inherit; }
.pm-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0, 96, 254, .18); }

/* customer service cards */
.pm-service-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem;
}
.pm-service { display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.pm-service:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0, 96, 254, .18); }
.pm-service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.pm-service-type {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--pm-primary); background: rgba(0, 96, 254, .1); padding: .15rem .55rem; border-radius: 999px;
}
.pm-service-name { color: var(--pm-text); font-size: 1.15rem; font-weight: 700; margin: 0 0 .15rem; }
.pm-service-sub { margin: 0 0 1rem; word-break: break-all; }
.pm-service-cta { margin-top: auto; color: var(--pm-primary); font-weight: 700; font-size: .85rem; }

/* ============ KPIs, charts & dashboard grid ============ */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem; margin-bottom: 1.2rem; }
.kpi {
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); box-shadow: var(--pm-shadow); padding: 1.25rem 1.35rem;
  position: relative; overflow: hidden;
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.kpi-label { color: var(--pm-muted); font-size: .82rem; font-weight: 700; }
.kpi-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem;
  background: color-mix(in srgb, var(--c, #0060fe) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #0060fe) 30%, transparent);
}
.kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--pm-text); line-height: 1.1; letter-spacing: -.5px; }
.kpi-value.neg { color: #d64541; }
.kpi-sub { color: var(--pm-muted); font-size: .8rem; margin-top: .3rem; }

.pm-grid { display: grid; gap: 1.2rem; margin-top: 1.2rem; }
.pm-grid-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .pm-grid-2-1 { grid-template-columns: 1fr; } }

.pm-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .8rem; }
.pm-card-head .para-2 { margin-top: .15rem; }
.pm-card-figure { font-size: 1.5rem; font-weight: 800; color: var(--pm-text); }

.pm-area { width: 100%; height: 190px; display: block; }
.pm-chart-empty { color: var(--pm-muted); text-align: center; padding: 3.2rem 1rem; font-size: .9rem; }

/* radial gauge */
.pm-donut { position: relative; width: 140px; height: 140px; flex: 0 0 auto; }
.pm-donut svg { width: 140px; height: 140px; }
.pm-donut-track { stroke: var(--pm-border); }
.pm-donut-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pm-donut-label strong { font-size: 1.6rem; color: var(--pm-text); line-height: 1; }
.pm-donut-label span { font-size: .72rem; color: var(--pm-muted); text-transform: uppercase; letter-spacing: .5px; }

.pm-health { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.1rem; }
.pm-legend { display: flex; flex-direction: column; gap: .5rem; }
.pm-legend div { display: flex; align-items: center; gap: .5rem; color: var(--pm-muted); font-size: .85rem; }
.pm-legend strong { color: var(--pm-text); margin-left: auto; }
.pm-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.pm-typebars { display: flex; flex-direction: column; gap: .7rem; }
.pm-typebar-top { display: flex; justify-content: space-between; font-size: .82rem; color: var(--pm-muted); margin-bottom: .25rem; }
.pm-typebar-top strong { color: var(--pm-text); }
.pm-bar { height: 8px; border-radius: 99px; background: var(--pm-surface-2); overflow: hidden; }
.pm-bar span { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }

.pm-status-list { list-style: none; }
.pm-status-list li { display: flex; align-items: center; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid var(--pm-border); color: var(--pm-text); font-size: .9rem; }
.pm-status-list li:last-child { border-bottom: none; }

.pm-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.pm-action {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .4rem;
  border: 1px solid var(--pm-border); border-radius: 12px; background: var(--pm-surface-2);
  color: var(--pm-text) !important; text-decoration: none !important; font-size: .78rem; font-weight: 700;
  transition: all .15s ease;
}
.pm-action span { font-size: 1.25rem; }
.pm-action:hover { border-color: var(--pm-primary); transform: translateY(-2px); }
@media (max-width: 480px) { .pm-actions { grid-template-columns: repeat(2, 1fr); } }

/* ============ domain search ============ */
.dsearch { max-width: 720px; margin: 0 auto; }
.dsearch-box { display: flex; gap: .6rem; margin: 1.4rem 0 1rem; }
.dsearch-box .form-input { flex: 1; font-size: 1.05rem; padding: .85rem 1rem; }
.dsearch-box .btn { padding: .85rem 1.6rem; font-size: .95rem; }
.dsearch-hint { margin-top: 1rem; opacity: .8; }
.dsearch-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dsearch-card.available { border-color: color-mix(in srgb, #2ecc71 45%, var(--pm-border)); }
.dsearch-info { display: flex; align-items: center; gap: .8rem; }
.dsearch-name { font-size: 1.25rem; font-weight: 800; color: var(--pm-text); word-break: break-all; }
.dsearch-reg { margin: 0; }

/* ============ admin server form ============ */
.pm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1.2rem; }
.pm-check-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .5rem; }
.pm-check-row label { display: flex; align-items: center; gap: .4rem; color: var(--pm-text); font-weight: 600; font-size: .9rem; }

/* ============ servers inline table ============ */
.pm-srv-table td { padding: .45rem .35rem; white-space: nowrap; }
.pm-cell { padding: .35rem .5rem !important; border-radius: 7px !important; font-size: .82rem !important; min-width: 110px; }
.pm-cell-xs { min-width: 62px; width: 62px; }
.pm-cell-sm { min-width: 88px; width: 88px; }
.pm-cell-wide { min-width: 150px; }
.pm-srv-actions { white-space: nowrap; }
.pm-srv-new td { background: var(--pm-surface-2); }

/* ============ domain search v2 (multi-TLD results) ============ */
.dsearch-chips { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; margin: .4rem 0 1rem; }
.dsearch-chip { border: 1px solid var(--pm-border); background: var(--pm-surface); color: var(--pm-muted);
  border-radius: 999px; padding: .25rem .8rem; font-size: .8rem; font-weight: 700; cursor: pointer; }
.dsearch-chip:hover { border-color: var(--pm-primary); color: var(--pm-primary); }
.dsearch-rows { display: flex; flex-direction: column; gap: .55rem; }
.dsearch-row { display: flex; align-items: center; gap: .9rem; background: var(--pm-surface);
  border: 1px solid var(--pm-border); border-radius: 12px; padding: .8rem 1.1rem; box-shadow: var(--pm-shadow); }
.dsearch-row.exact { border-color: color-mix(in srgb, var(--pm-primary) 55%, var(--pm-border)); }
.dsearch-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dsearch-row .dot.ok { background: #2ecc71; } .dsearch-row .dot.no { background: #d64541; }
.dsearch-row-name { font-weight: 800; color: var(--pm-text); font-size: 1.02rem; word-break: break-all; }
.dsearch-badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: .12rem .5rem; border-radius: 999px; color: #0a7d32; background: rgba(46,204,113,.15); }
.dsearch-row-price { margin-left: auto; text-align: right; }
.dsearch-row-price strong { color: var(--pm-text); font-size: 1.05rem; }
.dsearch-row-price span { display: block; color: var(--pm-muted); font-size: .72rem; }
.dsearch-row form { margin: 0; }

/* pm-scope carries the theme tokens without portal page padding */
.pm-scope { padding: 0; min-height: 0; }
#dsearch-result:not(:empty) { margin: 1.2rem 0 .4rem; max-width: 860px; }

/* ============ storefront plan cards (DB-driven) ============ */
.plan { position: relative; }
.plan.popular-plan { outline: 2px solid #0060fe; outline-offset: -2px; }
.plan-badge {
  position: absolute; top: 0; right: 0; transform: translateY(-50%);
  background: #0060fe; color: #fff; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; padding: .2rem .7rem;
  border-radius: 999px; z-index: 2;
}
.plan .actions form { margin: 0; }
.plans-sec .para-2, .se-ii .para-2 { opacity: .85; }

/* ============ plan card meta (locations / perks) ============ */
.plan-meta { margin: .6rem 0 .2rem; font-size: .82rem; }
.plan-meta li { margin-bottom: .25rem; opacity: .9; }
.plan-meta-note { opacity: .65; font-size: .75rem; }

/* ============ order wizard ============ */
.wz { max-width: 940px; margin: 0 auto; }
.wz-steps { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; list-style: none;
  margin: 0 0 2rem; padding: 0; counter-reset: none; }
.wz-steps li { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700;
  color: var(--pm-muted); padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--pm-border); }
.wz-steps li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pm-surface-2); color: var(--pm-muted); font-size: .72rem; }
.wz-steps li.active { color: var(--pm-text); border-color: var(--pm-primary); }
.wz-steps li.active span { background: var(--pm-primary); color: #fff; }
.wz-steps li.done span { background: #2ecc71; color: #fff; }

.wz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.wz-grid-sm { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.wz-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 640px; margin: 0 auto; }

.wz-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  text-align: left; padding: 1.15rem 1.25rem; border-radius: var(--pm-radius); cursor: pointer;
  background: var(--pm-surface); border: 1px solid var(--pm-border); box-shadow: var(--pm-shadow);
  color: var(--pm-text); font: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.wz-card:hover { transform: translateY(-3px); border-color: var(--pm-primary); box-shadow: 0 12px 30px rgba(0,96,254,.18); }
.wz-card.on { border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0,96,254,.18); }
.wz-card strong { font-size: 1.05rem; }
.wz-card .para-2 { margin: 0; }
.wz-ico { font-size: 1.7rem; line-height: 1; }
.wz-price { font-size: 1.5rem; font-weight: 800; color: var(--pm-text); }
.wz-price i { font-size: .8rem; font-weight: 500; font-style: normal; color: var(--pm-muted); }
.wz-loc { font-size: .78rem; color: var(--pm-muted); }
.wz-perk { font-size: .76rem; font-weight: 700; color: #0a7d32; background: rgba(46,204,113,.14);
  padding: .12rem .5rem; border-radius: 999px; }
.wz-badge { position: absolute; top: 0; right: .8rem; transform: translateY(-50%); background: var(--pm-primary);
  color: #fff; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  padding: .15rem .6rem; border-radius: 999px; }
.wz-plan.pop { border-color: var(--pm-primary); }

.wz-lines { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.wz-line { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem 1.1rem;
  border-radius: 999px; border: 1px solid var(--pm-border); background: var(--pm-surface);
  color: var(--pm-text); font-weight: 700; font-size: .88rem; cursor: pointer; }
.wz-line .para-2 { font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; margin: 0; }
.wz-line.on { border-color: var(--pm-primary); color: var(--pm-primary); }

.wz-review { max-width: 560px; margin: 0 auto; }
.wz-review .portal-dl { margin-bottom: 1.2rem; }
.wz-back { display: block; margin: 1.6rem auto 0; }
.w-100 { width: 100%; }

/* ============ admin error log ============ */
.err-card { margin-bottom: 1rem; }
.err-card.err-resolved { opacity: .6; }
.err-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.err-msg { display: block; margin-top: .4rem; color: var(--pm-text); font-size: 1rem; }
.err-context { margin: .5rem 0 0; }
.err-detail { margin-top: .7rem; }
.err-detail summary { cursor: pointer; }
.err-detail pre { margin-top: .5rem; padding: .8rem; border-radius: 8px; background: var(--pm-surface-2);
  color: var(--pm-text); font-size: .75rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.err-actions { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }

/* ============ plan cards: self-sufficient styling ============
   These cards render on /shared, /vps and /dedicated, but the theme only
   styles .plan in pages/shared.css, so on the other pages the text fell back
   to black. Style the component ourselves, using the theme tokens, so it is
   correct on every page and in both light and dark. */
.plan-cards .plan {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  padding: 1.6rem 1.4rem;
  color: var(--pm-text);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.plan-cards .plan:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0, 96, 254, .16); }
.plan-cards .plan.popular-plan { border-color: var(--pm-primary); }
.plan-cards .plan-icon img { width: 42px; height: 42px; object-fit: contain; margin-bottom: .6rem; }
.plan-cards .plan-name { color: var(--pm-text); font-size: 1.25rem; font-weight: 800; margin: 0 0 .2rem; }
.plan-cards .plan-para { color: var(--pm-muted); font-size: .86rem; margin: 0 0 .9rem; }
.plan-cards .plan-price .price { color: var(--pm-text); font-size: 2.1rem; font-weight: 800; margin: 0; line-height: 1.1; }
.plan-cards .plan-price .price-comment { color: var(--pm-muted); font-size: .76rem; margin: .2rem 0 0; }
.plan-cards .plan-meta { margin: .8rem 0 .2rem; }
.plan-cards .plan-meta li { color: var(--pm-muted); font-size: .8rem; margin-bottom: .3rem; }
.plan-cards .plan-meta-note { color: var(--pm-muted); opacity: .75; }
.plan-cards .actions { margin: 1rem 0 .4rem; }
.plan-cards .group { border-top: 1px solid var(--pm-border); padding-top: .9rem; margin-top: .9rem; }
.plan-cards .group .title-4 { color: var(--pm-text); font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; margin: 0 0 .5rem; }
.plan-cards .group .list li { color: var(--pm-muted); font-size: .83rem; margin-bottom: .35rem;
  display: flex; align-items: flex-start; gap: .45rem; }
.plan-cards .group .list li img { width: 14px; height: 14px; margin-top: .2rem; flex: 0 0 auto; }
.plan-cards .plans-toggler .toggler { display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: .25rem; padding: .25rem;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border); border-radius: 999px; }
.plan-cards .plan-toggle-btn { border: 0; background: transparent; color: var(--pm-muted);
  font-weight: 700; font-size: .82rem; padding: .4rem .9rem; border-radius: 999px; cursor: pointer;
  white-space: nowrap; }
.plan-cards .plan-toggle-btn.active { background: var(--pm-primary); color: #fff; }
/* Default term, before the handler runs. The theme's equivalent rule is
   scoped to .plans-sec, a wrapper that only exists on /shared, so on the
   homepage and /vps every price block rendered at once and the card showed
   three prices stacked. */
.plan-cards .plan-price:not([data-for="monthly"]) { display: none; }
.plan-cards > .para-2 { color: var(--pm-muted); margin-top: 1rem; }

/* ---- per-service failures panel (admin) ---- */
.svc-err { padding: .8rem 0; border-bottom: 1px solid var(--pm-border); }
.svc-err:last-of-type { border-bottom: 0; }
.svc-err.is-resolved { opacity: .55; }
.svc-err-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.svc-err-head strong { color: var(--pm-text); font-size: .88rem; }
.svc-err details { margin-top: .5rem; }
.svc-err details summary { cursor: pointer; }
.svc-err pre {
  margin-top: .4rem; padding: .7rem; border-radius: 8px; background: var(--pm-surface-2);
  color: var(--pm-text); font-size: .72rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
}
.svc-err-actions { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }

/* ============ integrations & servers ============ */
.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }
.srv-card {
  display: flex; flex-direction: column;
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); box-shadow: var(--pm-shadow); padding: 1.15rem 1.25rem;
}
.srv-card.is-off { opacity: .6; }
.srv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.srv-name { display: block; font-size: 1rem; font-weight: 800; color: var(--pm-text); }
.srv-sub { display: block; font-size: .76rem; color: var(--pm-muted); margin-top: .1rem; }
.srv-blurb { margin: .6rem 0 .8rem; font-size: .8rem; color: var(--pm-muted); line-height: 1.5; }
.srv-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .81rem; }
.srv-facts dt { color: var(--pm-muted); }
.srv-facts dd { margin: 0; text-align: right; color: var(--pm-text); overflow: hidden; text-overflow: ellipsis; }
.srv-bar { height: 5px; border-radius: 999px; background: var(--pm-surface-2); margin-top: .8rem; overflow: hidden; }
.srv-bar span { display: block; height: 100%; background: var(--pm-primary); }
.srv-actions { display: flex; gap: .5rem; margin-top: 1rem; }

/* ---- integration modal ----
   Lives OUTSIDE .portal-main, so it carries .pm-scope for the theme tokens
   and styles its own inputs (the theme's bare `input` rules would otherwise
   win and render plain white boxes). */
.srv-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.srv-modal-scrim {
  position: absolute; inset: 0;
  background: rgba(6, 7, 15, .62); backdrop-filter: blur(3px);
  animation: srvFade .16s ease;
}
.srv-modal-box {
  position: relative; width: min(580px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  animation: srvRise .19s cubic-bezier(.2, .8, .3, 1);
}
@keyframes srvFade { from { opacity: 0 } }
@keyframes srvRise { from { opacity: 0; transform: translateY(10px) scale(.985) } }

.srv-modal-head {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.2rem 1.35rem 1.05rem;
  border-bottom: 1px solid var(--pm-border);
}
.srv-modal-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 96, 254, .13); color: var(--pm-primary);
}
.srv-modal-titles { flex: 1; min-width: 0; }
.srv-modal-titles h2 { margin: 0; font-size: 1.06rem; font-weight: 800; color: var(--pm-text); }
.srv-modal-titles p { margin: .15rem 0 0; font-size: .8rem; color: var(--pm-muted); line-height: 1.45; }
.srv-modal-x {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--pm-muted);
  font-size: 1.35rem; line-height: 1;
}
.srv-modal-x:hover { border-color: var(--pm-border); color: var(--pm-text); }

.srv-modal-body { padding: 1.15rem 1.35rem 1.35rem; overflow-y: auto; }
.srv-sect {
  margin: 1.3rem 0 .7rem; font-size: .68rem; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--pm-muted);
}
.srv-sect:first-child { margin-top: 0; }

/* the modal styles its own controls, theme `input` rules outrank a class */
.srv-modal .form-label { display: block; margin: 0 0 .85rem; }
.srv-modal .settings-label {
  display: block; margin-bottom: .35rem;
  font-size: .8rem; font-weight: 700; color: var(--pm-text);
}
.srv-modal input[type="text"],
.srv-modal input[type="password"],
.srv-modal input[type="number"],
.srv-modal select {
  width: 100%; box-sizing: border-box;
  padding: .62rem .8rem; border-radius: 10px;
  background: var(--pm-surface-2); color: var(--pm-text);
  border: 1.5px solid var(--pm-border);
  font-size: .88rem; font-family: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.srv-modal input:focus, .srv-modal select:focus {
  outline: none; border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgba(0, 96, 254, .16);
}
.srv-modal input::placeholder { color: var(--pm-muted); opacity: .75; }
.srv-modal select {
  appearance: none; cursor: pointer; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239096a8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
}
.srv-modal small { display: block; margin-top: .35rem; font-size: .76rem; color: var(--pm-muted); line-height: 1.45; }
.srv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

/* switches */
.srv-switch {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem; margin-bottom: .5rem; border-radius: 11px;
  background: var(--pm-surface-2); border: 1.5px solid var(--pm-border);
  cursor: pointer; transition: border-color .14s ease;
}
.srv-switch:hover { border-color: var(--pm-primary); }
.srv-switch input { position: absolute; opacity: 0; pointer-events: none; }
.srv-track {
  position: relative; flex: 0 0 auto; width: 38px; height: 21px; border-radius: 999px;
  background: var(--pm-border); transition: background .16s ease;
}
.srv-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  transition: transform .16s ease;
}
.srv-switch input:checked + .srv-track { background: var(--pm-primary); }
.srv-switch input:checked + .srv-track::after { transform: translateX(17px); }
.srv-switch input:focus-visible + .srv-track { box-shadow: 0 0 0 3px rgba(0, 96, 254, .25); }
.srv-switch-text { display: flex; flex-direction: column; line-height: 1.3; }
.srv-switch-text strong { font-size: .85rem; font-weight: 700; color: var(--pm-text); }
.srv-switch-text i { font-style: normal; font-size: .74rem; color: var(--pm-muted); }

.srv-modal-foot {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: .95rem 1.35rem; border-top: 1px solid var(--pm-border);
  background: var(--pm-surface-2);
}
.srv-modal-foot .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem 1.15rem; border-radius: 10px; cursor: pointer;
  font-size: .85rem; font-weight: 700; border: 1px solid transparent;
}
.srv-modal-foot .btn-outline-dark { background: transparent; border-color: var(--pm-border); color: var(--pm-text); }
.srv-modal-foot .btn-outline-dark:hover { border-color: var(--pm-primary); color: var(--pm-primary); }
.srv-modal-foot .btn-fill-primary { background: var(--pm-primary); color: #fff; }
.srv-modal-foot .btn-fill-primary:hover { background: #0052db; }

@media (max-width: 480px) { .srv-row2 { grid-template-columns: 1fr; } }

/* ============ products ============ */
.prd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; }
.prd-card {
  display: flex; flex-direction: column;
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); box-shadow: var(--pm-shadow); padding: 1.15rem 1.25rem;
}
.prd-card.is-off { opacity: .58; }
.prd-top { display: flex; align-items: flex-start; gap: .7rem; }
.prd-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pm-surface-2); font-size: 1.15rem;
}
.prd-id { flex: 1; min-width: 0; }
.prd-id strong { display: block; font-size: .98rem; font-weight: 800; color: var(--pm-text); }
.prd-slug { display: block; font-size: .73rem; color: var(--pm-muted); font-family: ui-monospace, monospace; }
.prd-flags { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.prd-chip {
  font-size: .64rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 999px;
  background: rgba(0, 96, 254, .16); color: var(--pm-primary);
}

.prd-money {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: 1rem 0 .9rem; padding: .75rem .85rem;
  background: var(--pm-surface-2); border-radius: 11px;
}
.prd-money-k { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .7px; color: var(--pm-muted); }
.prd-money b { font-size: 1.02rem; font-weight: 800; color: var(--pm-text); }
.prd-money i { font-style: normal; font-size: .7rem; color: var(--pm-muted); }
.prd-good { color: #0a7d32 !important; }
.prd-thin { color: #b7791f !important; }

.prd-facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: .8rem; }
.prd-facts dt { color: var(--pm-muted); }
.prd-facts dd { margin: 0; text-align: right; color: var(--pm-text); }
.prd-actions { display: flex; gap: .45rem; margin-top: 1rem; flex-wrap: wrap; }

/* modal extras */
.prd-modal-box { width: min(640px, 100%); }
.prd-margin {
  margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: 10px;
  font-size: .82rem; font-weight: 700;
  background: var(--pm-surface-2); color: var(--pm-muted);
}
.prd-margin.is-good { background: rgba(46, 204, 113, .14); color: #0a7d32; }
.prd-margin.is-thin { background: rgba(255, 184, 48, .16); color: #b7791f; }
.prd-margin.is-loss { background: rgba(236, 98, 95, .16); color: #d64541; }
.prd-adv { margin: 1.1rem 0 .4rem; }
.prd-adv > summary { cursor: pointer; margin-bottom: .7rem; }
.srv-modal textarea.form-input {
  width: 100%; box-sizing: border-box; padding: .62rem .8rem; border-radius: 10px;
  background: var(--pm-surface-2); color: var(--pm-text);
  border: 1.5px solid var(--pm-border);
  font-family: ui-monospace, monospace; font-size: .78rem; line-height: 1.5; resize: vertical;
}
.srv-modal textarea.form-input:focus {
  outline: none; border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0, 96, 254, .16);
}

/* ============ customer service control panel ============ */
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.svc-side { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 84px; }
.svc-main > .portal-card + .portal-card { margin-top: 1.2rem; }

.svc-power-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.svc-state {
  display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
}
.svc-state i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.svc-state-ok { background: rgba(46, 204, 113, .14); color: #0a7d32; }
.svc-state-ok i { background: #2ecc71; }
.svc-state-off { background: rgba(120, 124, 140, .18); color: var(--pm-muted); }
.svc-state-off i { background: #7c8090; }
.svc-state-busy { background: rgba(255, 184, 48, .18); color: #b7791f; }
.svc-state-busy i { background: #ffb830; animation: svcPulse 1s ease-in-out infinite; }
@keyframes svcPulse { 50% { opacity: .25 } }

.svc-power { display: flex; gap: .55rem; flex-wrap: wrap; }
.svc-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.1rem; border-radius: 10px; cursor: pointer;
  background: var(--pm-surface-2); border: 1.5px solid var(--pm-border);
  color: var(--pm-text); font-size: .87rem; font-weight: 700;
  transition: border-color .14s ease, color .14s ease;
}
.svc-btn:hover:not(:disabled) { border-color: var(--pm-primary); color: var(--pm-primary); }
.svc-btn:disabled { opacity: .42; cursor: not-allowed; }
.svc-btn-go { background: var(--pm-primary); border-color: var(--pm-primary); color: #fff; }
.svc-btn-go:hover:not(:disabled) { background: #0052db; color: #fff; }
.svc-btn-warn:hover:not(:disabled) { border-color: #d64541; color: #d64541; }

.svc-adv { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--pm-border); }
.svc-adv summary { cursor: pointer; }
.svc-adv .svc-power { margin-top: .7rem; }
.svc-warn { color: #b7791f !important; margin-bottom: .8rem; }

.svc-danger-note {
  padding: .75rem .9rem; border-radius: 10px; margin-bottom: 1rem;
  background: rgba(236, 98, 95, .1); border: 1px solid rgba(236, 98, 95, .3);
  color: var(--pm-text) !important; font-size: .84rem; line-height: 1.55;
}
.svc-rebuild { max-width: 460px; }
.svc-danger-btn { background: #d64541 !important; border-color: #d64541 !important; }
.svc-danger-btn:hover:not(:disabled) { background: #b93733 !important; }

.svc-access dd { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.svc-wrap { word-break: break-all; }
.svc-reveal {
  background: none; border: 1px solid var(--pm-border); border-radius: 6px;
  padding: .12rem .45rem; cursor: pointer; font-size: .72rem; color: var(--pm-muted);
}
.svc-reveal:hover { border-color: var(--pm-primary); color: var(--pm-primary); }

.svc-log li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .5rem 0; border-bottom: 1px solid var(--pm-border); font-size: .83rem;
}
.svc-log li:last-child { border-bottom: 0; }
.svc-log-when { flex: 0 0 auto; font-size: .74rem; color: var(--pm-muted); font-variant-numeric: tabular-nums; }
.svc-log-what { flex: 1; color: var(--pm-text); text-transform: capitalize; }
.svc-log-who { flex: 0 0 auto; font-size: .74rem; color: var(--pm-muted); }

@media (max-width: 900px) {
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-side { position: static; }
}

/* ---- customer service list ---- */
.svcl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }
.svcl-card {
  display: flex; flex-direction: column; text-decoration: none !important; color: inherit;
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); box-shadow: var(--pm-shadow); padding: 1.15rem 1.25rem;
  transition: transform .15s ease, border-color .15s ease;
}
.svcl-card:hover { transform: translateY(-2px); border-color: var(--pm-primary); }
.svcl-top { display: flex; align-items: flex-start; gap: .7rem; }
.svcl-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pm-surface-2); font-size: 1.15rem;
}
.svcl-id { flex: 1; min-width: 0; }
.svcl-id strong { display: block; font-size: .96rem; font-weight: 800; color: var(--pm-text); }
.svcl-facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .9rem 0 0; font-size: .8rem; }
.svcl-facts dt { color: var(--pm-muted); }
.svcl-facts dd { margin: 0; text-align: right; color: var(--pm-text); }
.svcl-go { margin-top: 1rem; font-size: .82rem; font-weight: 700; color: var(--pm-primary); }

/* ---- free subdomain ---- */
.sub-live { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.sub-live a { font-size: 1.02rem; font-weight: 700; color: var(--pm-primary); text-decoration: none; }
.sub-live a:hover { text-decoration: underline; }
.sub-claim { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
.sub-input {
  display: flex; align-items: center; flex: 1; min-width: 240px;
  border: 1.5px solid var(--pm-border); border-radius: 10px;
  background: var(--pm-surface-2); overflow: hidden;
}
.sub-input:focus-within { border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0, 96, 254, .15); }
.sub-input .form-input {
  flex: 1; min-width: 0; border: 0 !important; background: transparent !important;
  box-shadow: none !important; padding: .6rem .8rem;
}
.sub-suffix { padding: 0 .8rem 0 0; color: var(--pm-muted); font-size: .88rem; white-space: nowrap; }

/* ---- sold out ---- */
.plan-sold-out { opacity: .62; }
.plan-badge-out { background: rgba(120,124,140,.9) !important; }
.plan-cards .btn.is-disabled { cursor: not-allowed; opacity: .7; }

/* ---- guided Cloudflare setup ---- */
.cf-steps { list-style: none; counter-reset: cf; padding: 0; margin: 0; }
.cf-steps > li { position: relative; padding: 0 0 1.4rem 2.6rem; counter-increment: cf; }
.cf-steps > li::before {
  content: counter(cf); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pm-primary); color: #fff; font-size: .8rem; font-weight: 800;
}
.cf-steps > li::after {
  content: ''; position: absolute; left: 12.5px; top: 30px; bottom: .4rem;
  width: 1px; background: var(--pm-border);
}
.cf-steps > li:last-child::after { display: none; }
.cf-steps strong { display: block; color: var(--pm-text); font-size: .95rem; margin-bottom: .15rem; }
.cf-steps p { margin: 0 0 .7rem; }
.cf-token { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 560px; }
.cf-token .form-input { flex: 1; min-width: 240px; }
.cf-foot { margin: .5rem 0 0; padding-top: .9rem; border-top: 1px solid var(--pm-border); }
.cf-redirect { display: inline-block; padding: .5rem .7rem; border-radius: 8px;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border);
  font-size: .8rem; word-break: break-all; }

/* ---- setup nudge on the admin overview ---- */
.adm-nudge { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-left: 3px solid var(--pm-primary); }
.adm-nudge strong { display: block; color: var(--pm-text); font-size: .95rem; margin-bottom: .15rem; }
.svc-sso { display: flex; gap: .45rem; }
.svc-sso .btn { flex: 1; }

/* ==========================================================================
   Game hosting storefront (partials/game-builder.inc.php)
   Uses the pm-scope tokens so it inherits light/dark with the rest of the site.
   ========================================================================== */
.game-shop { display: grid; gap: 2.5rem; }

.gs-banner { border-radius: 16px; padding: 1.6rem 1.8rem;
  background: linear-gradient(135deg, var(--pm-primary) 0%, color-mix(in srgb, var(--pm-primary) 55%, #000) 100%);
  color: #fff; }
.gs-banner h3 { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 700; color: #fff; }
.gs-banner p { margin: 0; max-width: 70ch; opacity: .92; font-size: .95rem; line-height: 1.6; }

.gs-head { text-align: center; }
.gs-head .se-title-1 { margin-bottom: .25rem; }

.gs-games { display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gs-game { display: flex; flex-direction: column; gap: .2rem; padding: 1rem;
  border: 1px solid var(--pm-border); border-radius: 12px; background: var(--pm-surface);
  text-decoration: none; transition: border-color .15s, transform .15s; }
.gs-game:hover { border-color: var(--pm-primary); transform: translateY(-2px); }
.gs-game-name { font-weight: 600; color: var(--pm-text); }
.gs-game-price { font-size: .85rem; color: var(--pm-primary); font-weight: 600; }
.gs-game-slots { font-size: .75rem; color: var(--pm-text-dim); }

.gs-empty { text-align: center; padding: 2rem 1rem; border: 1px dashed var(--pm-border);
  border-radius: 14px; background: var(--pm-surface); }
.gs-empty h3 { font-size: 1.15rem; margin: 0 0 .4rem; color: var(--pm-text); }
.gs-empty p { margin: 0 auto; max-width: 60ch; color: var(--pm-text-dim); font-size: .9rem; }

.gs-tiers { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.gs-tier { position: relative; display: flex; flex-direction: column; gap: .7rem;
  padding: 1.4rem 1.2rem; border: 1px solid var(--pm-border); border-radius: 14px;
  background: var(--pm-surface); }
.gs-tier-popular { border-color: var(--pm-primary); box-shadow: 0 0 0 1px var(--pm-primary) inset; }
.gs-tier-badge { position: absolute; top: -.65rem; left: 50%; transform: translateX(-50%);
  background: var(--pm-primary); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; }
.gs-tier-name { margin: 0; font-size: 1rem; color: var(--pm-text-dim); font-weight: 600; }
.gs-tier-price { font-size: 1.9rem; font-weight: 700; color: var(--pm-text); line-height: 1; }
.gs-tier-price span { font-size: .85rem; font-weight: 500; color: var(--pm-text-dim); }
.gs-tier-specs { margin: 0; display: grid; gap: .3rem; font-size: .85rem; color: var(--pm-text-dim); }
.gs-tier-slots { color: var(--pm-primary); font-weight: 600; }
.gs-tier .btn { margin-top: auto; }

/* ---- the configurator ---- */
.gs-builder { display: grid; gap: 1.5rem; grid-template-columns: 1.4fr 1fr;
  padding: 1.6rem; border: 1px solid var(--pm-border); border-radius: 16px;
  background: var(--pm-surface); }
@media (max-width: 820px) { .gs-builder { grid-template-columns: 1fr; } }

.gs-builder-controls { display: grid; gap: 1.4rem; align-content: start; }
.gs-slider { display: grid; gap: .5rem; }
.gs-slider-head { display: flex; align-items: baseline; justify-content: space-between; }
.gs-slider-label { font-weight: 600; color: var(--pm-text); font-size: .9rem; }
.gs-slider output { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--pm-primary); }
.gs-slider input[type=range] { width: 100%; accent-color: var(--pm-primary); height: 1.4rem; }
.gs-select select { width: 100%; }

.gs-builder-summary { display: flex; flex-direction: column; gap: .7rem;
  padding: 1.3rem; border-radius: 12px; background: var(--pm-surface-2);
  border: 1px solid var(--pm-border); }
.gs-summary-price { display: flex; align-items: baseline; gap: .3rem; }
.gs-summary-amount { font-size: 2.3rem; font-weight: 700; color: var(--pm-text); line-height: 1;
  font-variant-numeric: tabular-nums; }
.gs-summary-per { color: var(--pm-text-dim); font-size: .9rem; }
.gs-summary-list { margin: 0; display: grid; gap: .25rem; font-size: .88rem; color: var(--pm-text-dim); }
.gs-summary-slots { margin: 0; font-size: .82rem; font-weight: 600; color: var(--pm-primary); }
.gs-builder-summary .btn { margin-top: auto; }

/* ==========================================================================
   Plan comparison (partials/plan-compare.inc.php)
   ========================================================================== */
.plan-compare { margin-top: 1rem; }
.pc-wrap { overflow-x: auto; }                 /* wide tables scroll, page never does */
.pc-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.pc-table th, .pc-table td { padding: .8rem 1rem; text-align: center;
  border-bottom: 1px solid var(--pm-border); font-size: .9rem; color: var(--pm-text); }
.pc-table thead th { vertical-align: bottom; }
.pc-table tbody th[scope=row], .pc-corner { text-align: left; color: var(--pm-text-dim); font-weight: 600; }
.pc-name { display: block; font-weight: 700; font-size: 1rem; }
.pc-price { display: block; font-size: 1.35rem; font-weight: 700; color: var(--pm-primary); }
.pc-price small { font-size: .75rem; font-weight: 500; color: var(--pm-text-dim); }
.pc-popular { background: color-mix(in srgb, var(--pm-primary) 8%, transparent); }
.pc-actions td { border-bottom: 0; }
.pc-foot { margin-top: .9rem; }

/* A tier no node can hold: shown, not hidden, hiding it loses the sale,
   selling it books something we cannot provision. */
.gs-tier-out { opacity: .55; }
.gs-tier-out .gs-tier-price { color: var(--pm-text-dim); }
.gs-tier-badge-out { background: var(--pm-text-dim); }
.gs-tier .is-disabled { pointer-events: none; opacity: .7; }
.game-poster-blank { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-weight: 800; font-size: 2rem; letter-spacing: .05em;
  color: var(--pm-text-dim); background: var(--pm-surface-2); }

/* ---- game nodes admin ---- */
.gn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem; }
.gn-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.gn-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .gn-grid { grid-template-columns: 1fr; } }
.gn-dl { margin-top: .6rem; }
.gn-form { display: grid; gap: .7rem; align-content: start; }
.gn-form .btn { justify-self: start; }
.gn-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--pm-text); }
.gn-warn { padding: .7rem .9rem; border-radius: 8px; border-left: 3px solid var(--pm-primary);
  background: var(--pm-surface-2); }
.gn-meter { height: 8px; border-radius: 999px; background: var(--pm-surface-2);
  overflow: hidden; border: 1px solid var(--pm-border); }
.gn-meter span { display: block; height: 100%; background: var(--pm-primary); }
.gn-tiers { display: flex; gap: .35rem; flex-wrap: wrap; }
.gn-tier { font-size: .75rem; padding: .15rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--pm-primary) 15%, transparent); color: var(--pm-text); }
.gn-tier-no { background: var(--pm-surface-2); color: var(--pm-text-dim);
  text-decoration: line-through; }
.gs-note { display: block; margin-top: .35rem; color: var(--pm-text-dim); font-size: .78rem; }

/* ---- billing / name fields (partials/billing-fields.inc.php) ---- */
.bf-grid { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.bf-half { grid-column: span 1; }
.bf-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .bf-grid { grid-template-columns: 1fr; } .bf-half { grid-column: 1 / -1; } }
.bf-grid .form-label { margin: 0; }
/* A field we are still waiting on, so the customer can see what to fix. */
.bf-missing .form-input { border-color: var(--pm-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pm-primary) 20%, transparent); }
.bf-card { max-width: 720px; }
.bf-actions { display: flex; gap: .6rem; justify-content: space-between; align-items: center;
  margin-top: 1.2rem; flex-wrap: wrap; }
.bf-why { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--pm-border); max-width: 62ch; }

/* ==========================================================================
   Service detail, hero, action row, fact tiles, rail
   Replaces the old narrow right-rail layout, where the access details (the
   part a customer actually came for) overflowed and scrolled sideways.
   ========================================================================== */
.svc-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.svc-col { display: grid; gap: 1.25rem; min-width: 0; }
.svc-rail { display: grid; gap: 1.25rem; position: sticky; top: 1rem; }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: 1fr; } .svc-rail { position: static; } }

/* ---- hero ---- */
.svc-hero-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.svc-hero-id { display: flex; gap: .9rem; align-items: center; min-width: 0; }
.svc-hero-icon { flex: none; width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: color-mix(in srgb, var(--pm-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pm-primary) 30%, transparent); }
.svc-hero-name { margin: 0; font-size: 1.45rem; font-weight: 700; color: var(--pm-text);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; word-break: break-word; }
.svc-hero-state { font-size: .8rem; font-weight: 600; color: var(--pm-text-dim); }
.svc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.svc-dot-ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.svc-dot-off { background: var(--pm-text-dim); }
.svc-hero-meta { margin: .3rem 0 0; font-size: .88rem; color: var(--pm-text-dim);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.svc-chip { padding: .1rem .5rem; border-radius: 999px; font-size: .76rem;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border); color: var(--pm-text); }
.svc-hero-stat { text-align: right; display: grid; gap: .3rem; justify-items: end; }
.svc-hero-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pm-text-dim); }
.svc-hero-price { font-size: 1.5rem; font-weight: 700; color: var(--pm-text); }
.svc-hero-price small { font-size: .8rem; font-weight: 500; color: var(--pm-text-dim); }

/* ---- the big action row ---- */
.svc-actions { display: flex; gap: .6rem; flex-wrap: wrap; padding-top: 1rem;
  border-top: 1px solid var(--pm-border); }
.svc-actions form { margin: 0; }
.svc-act { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .7rem 1.15rem; border-radius: 11px; font-size: .92rem; font-weight: 600;
  border: 1px solid var(--pm-border); background: var(--pm-surface-2); color: var(--pm-text);
  text-decoration: none; transition: transform .12s, filter .12s, border-color .12s; }
.svc-act:hover:not([disabled]) { transform: translateY(-1px); border-color: var(--pm-primary); color: var(--pm-text); }
.svc-act[disabled] { opacity: .42; cursor: not-allowed; }
.svc-act-i { font-size: 1rem; line-height: 1; }
.svc-act-primary { background: var(--pm-primary); border-color: var(--pm-primary); color: #fff; }
.svc-act-primary:hover { filter: brightness(1.08); color: #fff; }
.svc-act-go   { background: #16a34a; border-color: #16a34a; color: #fff; }
.svc-act-stop { background: #dc2626; border-color: #dc2626; color: #fff; }
.svc-act-info { background: #2563eb; border-color: #2563eb; color: #fff; }
.svc-act-warn { background: transparent; border-color: #b45309; color: #b45309; }
.svc-act-go:hover, .svc-act-stop:hover, .svc-act-info:hover { filter: brightness(1.1); color: #fff; }

/* ---- fact tiles ---- */
.svc-tiles { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.svc-tile { display: flex; align-items: center; gap: .7rem; min-width: 0;
  padding: .85rem 1rem; border-radius: 13px;
  background: var(--pm-surface); border: 1px solid var(--pm-border); }
.svc-tile-icon { flex: none; font-size: 1.1rem; opacity: .85; }
.svc-tile-body { display: grid; min-width: 0; }
.svc-tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pm-text-dim); }
.svc-tile-value { font-size: .92rem; font-weight: 600; color: var(--pm-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-tile-value small { font-weight: 400; color: var(--pm-text-dim); }
.svc-tile-copy { flex: none; margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--pm-text-dim); font-size: .95rem; padding: .2rem .3rem; border-radius: 6px; }
.svc-tile-copy:hover { color: var(--pm-primary); background: var(--pm-surface-2); }

/* ---- credentials ---- */
.svc-creds { display: grid; gap: .55rem; margin-top: .8rem; }
.svc-cred { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .8rem; border-radius: 10px; background: var(--pm-surface-2); }
.svc-cred-label { font-size: .78rem; color: var(--pm-text-dim); min-width: 118px; }
.svc-cred code { font-size: .88rem; word-break: break-all; }
.svc-cred-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.svc-cred-actions form { margin: 0; }

/* ---- quick actions rail ---- */
.svc-quick { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; }
.svc-q { display: grid; place-items: center; gap: .35rem; padding: .9rem .5rem;
  border-radius: 11px; text-decoration: none; text-align: center; font-size: .82rem; font-weight: 600;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border); color: var(--pm-text);
  transition: border-color .12s, transform .12s; }
.svc-q:hover { border-color: var(--pm-primary); transform: translateY(-1px); color: var(--pm-text); }
.svc-q span { font-size: 1.25rem; line-height: 1; }

/* ---- activity ---- */
.svc-log li { display: grid; grid-template-columns: 1.4rem 1fr auto auto; gap: .7rem;
  align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--pm-border); font-size: .88rem; }
.svc-log li:last-child { border-bottom: 0; }
.svc-log-icon { opacity: .8; }
.svc-log-what { color: var(--pm-text); }
.svc-log-who, .svc-log-when { color: var(--pm-text-dim); font-size: .8rem; white-space: nowrap; }
.svc-danger-summary { cursor: pointer; margin: 0; }

/* The portal sets a global link colour with `.portal-main a:not(.btn)`, which
   is specific enough to beat a bare `.svc-act-primary`, so the primary
   button rendered its label in brand purple ON brand purple, i.e. invisible.
   These win it back explicitly rather than reaching for !important. */
.portal-main .svc-actions a.svc-act { color: var(--pm-text); text-decoration: none; }
.portal-main .svc-actions a.svc-act-primary,
.portal-main .svc-actions a.svc-act-primary:hover { color: #fff; text-decoration: none; }
.portal-main .svc-quick a.svc-q,
.portal-main .svc-quick a.svc-q:hover { color: var(--pm-text); text-decoration: none; }
.portal-main .svc-tile a { color: var(--pm-text); }

/* ---- order: game search + edition picker ---- */
.ord-search { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.ord-search .form-input { flex: 1; }
.ord-search-count { font-size: .8rem; color: var(--pm-text-dim); white-space: nowrap; }
.ord-eds { display: flex; gap: .5rem; flex-wrap: wrap; }
.ord-ed { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .55rem .9rem; border-radius: 10px; font-size: .88rem; font-weight: 600;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border); color: var(--pm-text);
  transition: border-color .12s, transform .12s; }
.ord-ed:hover { border-color: var(--pm-primary); transform: translateY(-1px); }
.ord-ed.on { border-color: var(--pm-primary);
  background: color-mix(in srgb, var(--pm-primary) 14%, transparent); }
.ord-ed em { font-style: normal; font-size: .7rem; padding: .08rem .4rem; border-radius: 999px;
  background: var(--pm-primary); color: #fff; }

/* ---- order: game size picker ---- */
.ord-sizes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ord-size { display: grid; gap: .25rem; text-align: left; cursor: pointer;
  padding: .85rem 1rem; border-radius: 12px; font: inherit;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border); color: var(--pm-text);
  transition: border-color .12s, transform .12s; }
.ord-size:hover { border-color: var(--pm-primary); transform: translateY(-1px); }
.ord-size.on { border-color: var(--pm-primary);
  background: color-mix(in srgb, var(--pm-primary) 14%, transparent); }
.ord-size strong { font-size: 1.05rem; }
.ord-size b { font-size: 1.15rem; color: var(--pm-primary); }
.ord-size b i { font-size: .75rem; font-style: normal; font-weight: 500; color: var(--pm-text-dim); }
.ord-size.is-out { opacity: .5; cursor: not-allowed; }
.ord-size.is-out em { font-style: normal; font-size: .72rem; color: var(--pm-text-dim); }
.gs-editions { display: block; font-size: .7rem; color: var(--pm-text-dim); }

/* ---- order: custom size builder ---- */
.ord-size-custom { border-style: dashed; }
.ord-size-custom b { color: var(--pm-text-dim); }
.ord-custom { display: grid; gap: 1.1rem; grid-template-columns: 1fr auto; align-items: center;
  margin-top: .9rem; padding: 1.1rem; border-radius: 12px;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border); }
@media (max-width: 620px) { .ord-custom { grid-template-columns: 1fr; } }
.ord-custom-controls { display: grid; gap: 1rem; }
.ord-slider { display: grid; gap: .4rem; }
.ord-slider-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .86rem; font-weight: 600; color: var(--pm-text); }
.ord-slider-head output { color: var(--pm-primary); font-variant-numeric: tabular-nums; }
.ord-slider input[type=range] { width: 100%; accent-color: var(--pm-primary); }
.ord-custom-price { text-align: right; white-space: nowrap; }
.ord-custom-price span { font-size: 1.9rem; font-weight: 700; color: var(--pm-text);
  font-variant-numeric: tabular-nums; }
.ord-custom-price small { color: var(--pm-text-dim); font-size: .85rem; }

/* A size we will build but must add hardware for: offered, honestly labelled. */
.ord-size-wait { border-style: dashed; }
.ord-size-note { display: block; font-style: normal; font-size: .7rem; color: var(--pm-text-dim); }
.ord-custom-note { margin: .5rem 0 0; font-size: .78rem; color: var(--pm-text-dim);
  max-width: 30ch; text-align: right; }

/* Order will be built by hand: prominent, but not an error, nothing is wrong. */
.ord-sum-manual { display: block; margin: 0 0 .9rem; padding: .75rem .9rem; border-radius: 10px;
  font-size: .82rem; line-height: 1.5; color: var(--pm-text);
  background: color-mix(in srgb, var(--pm-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pm-primary) 35%, transparent); }
.ord-sum-manual strong { display: block; margin-bottom: .2rem; }

/* ==========================================================================
   Size builder: overflow and drag feel
   The horizontal scrollbar came from .ord-custom-price's `white-space: nowrap`
   cascading into the capacity note, so a two-line sentence was forced onto one
   very long line and pushed the whole step sideways.
   ========================================================================== */
.ord-custom-price { white-space: nowrap; }
.ord-custom-note { white-space: normal; }          /* the note must wrap */

/* Nothing in this step may widen the page. */
.ord-step, .ord-main { min-width: 0; }
.ord-sizes, .ord-custom, .ord-custom-controls { min-width: 0; max-width: 100%; }
.ord-custom > * { min-width: 0; }
.ord-slider { min-width: 0; }
.ord-slider input[type=range] { max-width: 100%; }

/* Tiles wrap instead of scrolling: narrower minimum, and they may shrink. */
.ord-sizes { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
.ord-size { min-width: 0; overflow-wrap: anywhere; }

/* ---- drag feel ----
   The value snaps in 1 GB steps, so the THUMB is what should feel continuous.
   Transition only transform/background: animating `left` would fight the
   browser's own thumb positioning and stutter. */
.ord-slider input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 22px; background: transparent; cursor: grab; touch-action: none;
}
.ord-slider input[type=range]:active { cursor: grabbing; }
.ord-slider input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--pm-border);
}
.ord-slider input[type=range]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--pm-border);
}
.ord-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--pm-primary); border: 2px solid var(--pm-surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ord-slider input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pm-surface);
  background: var(--pm-primary); box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ord-slider input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.ord-slider input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.22); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pm-primary) 22%, transparent);
}
.ord-slider input[type=range]:hover::-moz-range-thumb { transform: scale(1.12); }
.ord-slider input[type=range]:active::-moz-range-thumb {
  transform: scale(1.22); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pm-primary) 22%, transparent);
}
.ord-slider input[type=range]:focus-visible { outline: 2px solid var(--pm-primary); outline-offset: 4px; }

/* The readout changes on every step, so ease it rather than letting it flicker. */
.ord-slider-head output { transition: color .12s ease; }
.ord-custom-price span { transition: color .12s ease; }

@media (prefers-reduced-motion: reduce) {
  .ord-slider input[type=range]::-webkit-slider-thumb,
  .ord-slider input[type=range]::-moz-range-thumb { transition: none; }
}

/* ==========================================================================
   Service action row: one height for every control
   "Open panel" is an <a> and the power controls are <button>s. .svc-act set
   padding and font-size but never font-family or line-height, so the anchor
   inherited the theme (Karla / 20.6px) while the buttons fell back to the UA
   default (Arial / normal, ~17px), 45px against 40px, which reads as one
   oversized button. Everything metric is stated here so neither the theme nor
   the user agent gets a vote.
   ========================================================================== */
.svc-act {
  font-family: inherit;
  line-height: 1.25;
  min-height: 44px;
  padding-block: 0;                 /* height comes from min-height, not padding */
  white-space: nowrap;              /* a narrow row must never wrap one to two lines */
  justify-content: center;
  align-self: center;               /* .svc-actions is a flex row: don't stretch */
  box-sizing: border-box;
}
.svc-actions form { display: flex; align-items: center; }
.svc-actions form .svc-act { width: 100%; }

/* A fixed square for the glyph, so a colour emoji (⚡) and a text glyph (▶)
   occupy the same box and cannot change the button's height between them. */
.svc-act-i {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  font-size: 1rem;
  line-height: 1;
}

/* ==========================================================================
   Card grids: don't also stack
   `.portal-card + .portal-card { margin-top: 1.2rem }` exists for cards
   stacked one under another in normal flow. It has no way to know it is
   inside a grid, so every card after the first in a grid row was pushed down
   1.2rem, and because grid items stretch, that card also came out 1.2rem
   SHORTER than its neighbour. Two service cards side by side therefore sat at
   different heights on different baselines.

   Every one of these containers already spaces its children with `gap`, so
   the margin is pure damage. `[class*="-grid"]` catches the rest by
   convention (wz-, srv-, prd-, svc-, bf-, pm-grid ...).
   ========================================================================== */
.portal-plans > .portal-card + .portal-card,
[class*="-grid"] > .portal-card + .portal-card {
  margin-top: 0;
}

/* A money-losing figure on the admin overview: red, and never wrapped. */
.adm-loss { color: #d64541; font-weight: 700; white-space: nowrap; }

/* Admin partners table: inline rate editor and stacked row actions. */
.pn-inline { display: flex; gap: .35rem; align-items: center; margin: 0; }
.pn-rate { width: 76px; padding: .3rem .45rem; font-size: .85rem; }
.pn-actions { white-space: nowrap; }
.pn-actions form { display: inline-block; margin: 0 .25rem 0 0; }
.pn-about td { padding-top: 0; border-top: 0; }

/* ==========================================================================
   Partner dashboard and application, inside the portal shell.
   These use the portal's own tokens, which already handle both themes.
   ========================================================================== */
.pn-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1.2rem; }
.pn-stat {
  padding: 1.1rem 1.2rem; border-radius: 13px; min-width: 0;
  background: var(--pm-surface); border: 1px solid var(--pm-border);
}
.pn-stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pm-text-dim); }
.pn-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--pm-text); font-variant-numeric: tabular-nums; }
.pn-stat-note { font-size: .78rem; color: var(--pm-text-dim); }

.pn-link { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pn-link input {
  flex: 1 1 320px; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem;
}
.pn-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .04em; }
.pn-pending {
  padding: .9rem 1.1rem; border-radius: 11px; margin-bottom: 1.2rem;
  background: color-mix(in srgb, #b45309 14%, transparent);
  border: 1px solid color-mix(in srgb, #b45309 45%, transparent);
}

/* Partner: choosing your own referral code. Collapsed by default because most
   partners never touch it, and an always-open editor invites a change that
   silently breaks links they have already handed out. */
.pn-code-edit { margin-top: .4rem; }
.pn-code-edit summary { cursor: pointer; font-size: .88rem; color: var(--pm-text-dim); }
.pn-code-edit summary:hover { color: var(--pm-text); }
.pn-code-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin: .8rem 0 .5rem; }
.pn-code-form .form-label { flex: 0 1 260px; min-width: 0; }
.pn-code-input { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.pn-code-warn { max-width: 60ch; }

/* ==========================================================================
   Homepage signup: the name row
   The theme spaces fields with `.main-header .form-label:not(:last-child)`.
   Each name field is the ONLY child of its column, so it is always the last
   child and never picks up that margin, leaving the name row flush against
   the email field. The gap belongs on the row instead.
   ========================================================================== */
.main-header .header-form .form-row { margin-bottom: 15px; }
.main-header .header-form .form-row .form-label { margin-bottom: 0; }

/* The animated gradient wordmark moved onto the real Dashboard button, but on
   the TEXT only: the button keeps its own styling and does not animate.

   Painting text with a gradient needs a transparent text fill, which is why
   the label is wrapped in its own span. Applying it to the <a> would make the
   gradient fill the whole button instead. */
.theme-navbar .nav-dash .grad-text {
  background: linear-gradient(to right, #fd004c 20%, #fe9000 40%, #b102b7 70%, #3363ff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}
/* The gradient's blue end would disappear into a blue button, so this one is
   dark. It is the only change to the button, and it is what makes the text
   legible at all. */
.theme-navbar .nav-dash {
  background: #14152a;
  border-color: #2a2c44;
}
.theme-navbar .nav-dash:hover { background: #1b1d38; border-color: #3a3d5c; }
.light-theme .theme-navbar .nav-dash { background: #0b0c1b; border-color: #0b0c1b; }

@media (prefers-reduced-motion: reduce) {
  .theme-navbar .nav-dash .grad-text { animation: none; }
}

/* Partner payouts: the request form and the staff queue. */
.pn-payout-form { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.pn-payout-form .form-label { flex: 1 1 220px; min-width: 0; }
.pn-payout-to { max-width: 220px; overflow-wrap: anywhere; }
.pn-ref { width: 130px; padding: .3rem .45rem; font-size: .85rem; }

/* Partner payouts: open requests, and the split-amount form. */
.pn-open { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.pn-open li {
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
  padding: .55rem .8rem; border-radius: 9px;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border);
}
.pn-amount-field { flex: 0 1 140px; }

/* Partner client setup: subdomain suffix sits against the input. */
.pc-domain-input { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.pc-domain-input .form-input { flex: 1 1 auto; min-width: 0; }
.pc-suffix { flex: none; color: var(--pm-text-dim); font-size: .9rem; white-space: nowrap; }
.pn-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================================
   Tables inside cards
   .portal-card carries overflow-x:auto, so a wide table made the whole CARD
   scroll sideways, taking its heading and padding with it. The scroll belongs
   to the table alone.
   ========================================================================== */
.portal-card { overflow-x: visible; }
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.table-scroll > .portal-table { margin-bottom: 0; }
.kpi-sub { font-size: .78rem; color: var(--pm-text-dim); margin-top: .15rem; }

/* ==========================================================================
   Support and team access
   ========================================================================== */
.sp-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.sp-rail { position: sticky; top: 1rem; }
@media (max-width: 1080px) { .sp-grid { grid-template-columns: 1fr; } .sp-rail { position: static; } }
.sp-links { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .45rem; }
.sp-links a { font-size: .9rem; }

.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tk-head > div { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tk-thread { display: grid; gap: .9rem; }
.tk-msg {
  padding: 1.05rem 1.25rem; border-radius: 13px;
  background: var(--pm-surface); border: 1px solid var(--pm-border);
}
/* Staff replies are tinted so a customer can see at a glance who said what. */
.tk-msg-staff {
  background: color-mix(in srgb, var(--pm-primary) 8%, var(--pm-surface));
  border-color: color-mix(in srgb, var(--pm-primary) 28%, var(--pm-border));
}
.tk-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tk-msg-body { font-size: .93rem; line-height: 1.6; color: var(--pm-text); overflow-wrap: anywhere; }

.ac-invite { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 0; border-bottom: 1px solid var(--pm-border); }
.ac-invite:last-child { border-bottom: 0; }
.ac-invite-actions { display: flex; gap: .5rem; }
.ac-invite-actions form { margin: 0; }
.ac-invite-form { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.ac-invite-form .form-label { flex: 1 1 220px; min-width: 0; }

/* Destructive admin action: available, but never the eye-catching one. */
.pn-danger { color: #dc2626; border-color: rgba(220, 38, 38, .45); }
.pn-danger:hover { color: #fff; background: #dc2626; border-color: #dc2626; }

/* ==========================================================================
   Partner API screen
   ========================================================================== */
.pn-head-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.api-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0; }
.api-form .form-input { flex: 1 1 220px; min-width: 0; }

.api-scope { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .85rem; }
.api-scope .para-2 { font-weight: 400; margin: 0; }

/* A secret shown once. Loud on purpose: it cannot be recovered from this
   page, so it needs to look like something to act on rather than to skim. */
.api-reveal { border-color: #2ecc71; }
.api-secret {
  display: block; padding: .7rem .85rem; border-radius: 9px;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border);
  color: var(--pm-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; word-break: break-all; user-select: all;
}

.api-mask { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.api-url { word-break: break-all; max-width: 320px; }
.api-dead { opacity: .55; }
.api-sub { font-size: .95rem; font-weight: 700; margin: 1.4rem 0 .4rem; }

.api-code {
  margin: 0 0 1rem; padding: .9rem 1rem; border-radius: 9px; overflow-x: auto;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border);
  color: var(--pm-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.6;
}

/* Inline <code> in body copy: same treatment, so PH-Event-Id and the header
   names read as code in both themes rather than as pale text on pale ground. */
.portal-main code:not(.api-secret):not(.api-mask) {
  background: var(--pm-surface-2); border: 1px solid var(--pm-border);
  color: var(--pm-text); border-radius: 5px; padding: .08em .38em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
}

/* The event reference table reads as two columns of prose, so let the name
   size to its content instead of both sprawling to half the card. */
.api-events td:first-child, .api-events th:first-child { width: 1%; white-space: nowrap; }
.api-events td:last-child { color: var(--pm-muted); }

/* The API call to action on the partner dashboard. */
.pn-api-cta { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.pn-api-cta-text { flex: 1 1 320px; min-width: 0; }
.pn-api-cta-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Webhook event picker. */
.api-picker { display: grid; gap: .5rem; }
.api-mode { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.api-mode input { margin-top: .28rem; flex: none; }
.api-mode > span { display: grid; gap: .1rem; }
.api-mode .para-2 { margin: 0; }

.api-picker-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .5rem 1.2rem; margin-top: .35rem; padding: .8rem .9rem;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border); border-radius: 10px;
}
.api-family { border: 0; margin: 0; padding: 0; min-width: 0; }
.api-family legend {
  padding: 0; margin-bottom: .3rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pm-muted);
}
.api-event { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; padding: .18rem 0; }
.api-event input { margin-top: .3rem; flex: none; }
.api-event > span { display: grid; gap: .05rem; min-width: 0; }
.api-event .para-2 { margin: 0; font-size: .76rem; }

.api-edit-row td { padding-top: 0; border-top: 0; }
.api-edit summary { cursor: pointer; font-size: .85rem; color: var(--pm-muted); }
.api-edit[open] summary { margin-bottom: .6rem; }
.api-events-cell { min-width: 150px; }

/* ==========================================================================
   Theme-swapped icons
   ==========================================================================
   The theme ships two <img> per icon, .for-light-theme and .for-dark-theme,
   and expects one to be hidden. Neither selector existed in any stylesheet,
   so both drew on top of each other. Most obvious on the game servers filter
   button, where the white light-mode icon rendered as a white block against
   the dark page. */
/* Link text on dark surfaces. The brand blue is for button FACES; as text on
   our own card backgrounds it sits at 4.44:1 and misses AA by a hair. */
:root { --pm-link: #7c97ff; }
.light-theme { --pm-link: #2c46c9; }

.for-light-theme { display: none; }
.light-theme .for-light-theme { display: inline-block; }
.light-theme .for-dark-theme { display: none; }

/* ==========================================================================
   Marketing text fallbacks
   ==========================================================================
   .para-2 is the theme's small-print class and it is used on every marketing
   page, but a colour is only ever set for it inside .portal-main, .plans-sec
   and .se-ii. Everywhere else it inherited, which on a near-black page meant
   the browser default black: the FAQ footer measured 1.08:1 against its own
   background. .list-link had the same problem, styled only inside
   .theme-footer, so its links fell back to #0000EE at 2.06:1.

   Scoped under body:not(.ph-shell) so the portal, which has its own scale,
   is untouched. */
body:not(.ph-shell) .para-2 { color: var(--pm-muted, #9aa4bf); }
body:not(.ph-shell) a.list-link { color: var(--pm-link, #7c97ff); text-decoration: none; }
body:not(.ph-shell) a.list-link:hover { text-decoration: underline; }

/* FAQ footer. Was a bare paragraph of invisible text; now it reads as the
   deliberate "still stuck?" step it is meant to be. */
.ph-faq-foot {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem .9rem;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--pm-border, #23283d);
  border-radius: var(--pm-radius, 14px);
  background: var(--pm-surface-2, #121529);
  text-align: center;
}
.ph-faq-foot .ph-faq-foot-lead { color: var(--pm-text, #e9edf7); font-weight: 700; margin: 0; }
.ph-faq-foot .ph-faq-foot-sub { color: var(--pm-muted, #9aa4bf); font-size: .86rem; margin: 0; width: 100%; }
.ph-faq-foot a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid var(--pm-border, #23283d);
  background: var(--pm-surface, #0f1223);
  color: var(--pm-text, #e9edf7);
  font-size: .86rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.ph-faq-foot a:hover {
  border-color: var(--pm-primary, #4c6fff);
  color: var(--pm-primary, #4c6fff);
  transform: translateY(-1px);
  text-decoration: none;
}
.ph-faq-foot a.is-primary {
  /* Deeper than --pm-primary on purpose: white on #4c6fff is 4.18:1, which
     misses AA. #3a55d6 is the same hue at 6.09:1. */
  background: #3a55d6;
  border-color: #3a55d6;
  color: #fff;
}
.ph-faq-foot a.is-primary:hover { color: #fff; filter: brightness(1.08); }

/* ==========================================================================
   Testimonials and the trust block that stands in for them
   ========================================================================== */
.ph-quote, .ph-trust-card {
  height: 100%;
  background: var(--pm-surface, #0f1223);
  border: 1px solid var(--pm-border, #23283d);
  border-radius: var(--pm-radius, 14px);
  padding: 1.5rem 1.4rem;
  transition: border-color .15s ease, transform .15s ease;
}
.ph-quote:hover, .ph-trust-card:hover { border-color: var(--pm-primary, #4c6fff); transform: translateY(-2px); }

.ph-quote-stars { color: #f5b544; letter-spacing: 2px; font-size: .95rem; margin-bottom: .6rem; }
.ph-quote-text { color: var(--pm-text, #e9edf7); font-size: .95rem; line-height: 1.6; margin: 0 0 1.1rem; }
.ph-quote-by { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ph-quote-av {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--pm-border, #23283d);
}
.ph-quote-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pm-surface-2, #121529); color: var(--pm-primary, #4c6fff);
  font-weight: 800; font-size: .82rem; letter-spacing: .5px;
}
.ph-quote-who { display: flex; flex-direction: column; line-height: 1.35; }
.ph-quote-who strong { color: var(--pm-text, #e9edf7); font-size: .9rem; }
.ph-quote-who span { color: var(--pm-muted, #9aa4bf); font-size: .78rem; }
.ph-quote-src { color: var(--pm-muted, #9aa4bf); font-size: .74rem; margin-left: auto; text-decoration: none; }
a.ph-quote-src:hover { color: var(--pm-link, #7c97ff); text-decoration: underline; }

.ph-trust-title { color: var(--pm-text, #e9edf7); font-size: 1.02rem; font-weight: 800; margin: 0 0 .55rem; }
.ph-trust-body { color: var(--pm-muted, #9aa4bf); font-size: .88rem; line-height: 1.6; margin: 0 0 .9rem; }
/* 6.83:1 on the card, against 4.44:1 for the raw brand blue. */
.ph-trust-link { color: var(--pm-link, #7c97ff); font-size: .84rem; font-weight: 700; text-decoration: none; }
.ph-trust-link:hover { text-decoration: underline; }
.ph-trust-foot {
  color: var(--pm-muted, #9aa4bf); font-size: .82rem; text-align: center;
  margin: 1.4rem auto 0; max-width: 62ch; opacity: .9;
}

/* ==========================================================================
   VPS comparison matrix
   ==========================================================================
   The theme's compare-table styling is scoped to .se-v, which the partial
   keeps, so only the few things the demo markup never needed are set here. */
.vps-matrix .compare-table td.left-corner { font-weight: 600; }
.vps-matrix .compare-table .check-icon { width: 18px; height: 18px; }
.se-v .filter-nav .tab { cursor: pointer; }
.se-v .custom-thead .tabs .tab { cursor: pointer; }

/* ==========================================================================
   Feature grid
   ==========================================================================
   The box is an <a> now rather than a <div> with a decorative arrow, so it
   needs the anchor defaults removed and a hover state that says it is
   clickable. The theme's own .box rules still do the rest, which is why the
   partial keeps that class. */
.box.ph-feat {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.box.ph-feat:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--pm-primary, #4c6fff);
  box-shadow: 0 12px 30px rgba(0, 96, 254, .14);
}
.box.ph-feat .box-title { color: var(--pm-text, #e9edf7); }
.box.ph-feat .box-para  { color: var(--pm-muted, #9aa4bf); }

/* The arrow row carries a label now. It was an unexplained glyph before, and
   an arrow that does not say where it goes is decoration. */
.box.ph-feat .arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
}
.box.ph-feat .ph-feat-cta {
  color: var(--pm-link, #7c97ff);
  font-size: .78rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .15s ease, transform .15s ease;
}
.box.ph-feat:hover .ph-feat-cta { opacity: 1; transform: translateX(0); }
.box.ph-feat .arrow img { transition: transform .15s ease; }
.box.ph-feat:hover .arrow img { transform: translateX(3px); }

/* Touch has no hover, so the label would never appear. Show it always there. */
@media (hover: none) {
  .box.ph-feat .ph-feat-cta { opacity: 1; transform: none; }
}

/* The refund window is a property of the term, so it belongs on the term
   button rather than in small print somewhere else on the page. */
.ord-term-refund {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--pm-muted, #9aa4bf);
}
.ord-term.on .ord-term-refund { color: var(--pm-link, #7c97ff); }

/* ==========================================================================
   Products panel icons
   ==========================================================================
   <use> references into the inlined sprite. They inherit colour from the tile,
   which is the whole reason they are not <img>. The theme sized `.frame img`
   and `.item .icon` as images, so the equivalent boxes are set here. */
.ph-pico { width: 100%; height: 100%; display: block; color: inherit; }
.theme-navbar .side-box .app-box .frame .ph-pico { width: 28px; height: 28px; }
.theme-navbar .side-box .app-box { text-decoration: none; }
/* Colour the glyph directly rather than leaning on inherit through .frame.
   Inheriting left the tile icons white in light mode, i.e. invisible on a
   white tile, which is the exact failure this whole set was meant to avoid. */
.theme-navbar .side-box .app-box .ph-pico { color: #fff; }
.light-theme .theme-navbar .side-box .app-box .ph-pico { color: var(--darkBlue, #0b0c1b); }
.theme-navbar .side-box .app-box .frame { align-items: center; }

/* Row icons in the "Go to" list. The theme never gave .item a colour, so the
   anchor fell back to the browser default #0000EE and the icons inherited it,
   which is where the blue blobs came from. Colour is set deliberately here and
   the glyphs get a little more room so the finer ones stay legible. */
.ph-pico-wrap { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; }
.ph-pico-wrap .ph-pico { width: 24px; height: 24px; }
.theme-navbar .side-box .items .item { color: #fff; text-decoration: none; }
.light-theme .theme-navbar .side-box .items .item { color: var(--darkBlue); }
.theme-navbar .side-box .items .item .ph-pico { color: var(--pm-link, #7c97ff); }
.theme-navbar .side-box .items .item:hover .ph-pico { color: #fff; }
.light-theme .theme-navbar .side-box .items .item:hover .ph-pico { color: var(--darkBlue); }

/* The tab strip wraps to two rows now that the tabs have real names, and the
   theme's sliding indicator only knows about one row, so it is retired rather
   than left pointing at the wrong tab. The .active class already shows which
   tab is chosen. */
.theme-navbar .side-box .f-nav .indicator { display: none; }
.theme-navbar .side-box .f-nav { gap: .25rem .35rem; }

@media only screen and (max-width: 767.98px) {
  .theme-navbar .side-box .app-box .frame .ph-pico { width: 24px; height: 24px; }
}

/* ==========================================================================
   Admin ticket queue
   ========================================================================== */
.tkt-bar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; }
.tkt-views { display: flex; flex-wrap: wrap; gap: .3rem; }
.tkt-view {
  padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  color: var(--pm-muted); background: var(--pm-surface-2); border: 1px solid var(--pm-border);
  text-decoration: none; white-space: nowrap;
}
.tkt-view:hover { color: var(--pm-text); text-decoration: none; }
.tkt-view.on { background: var(--pm-primary); border-color: var(--pm-primary); color: #fff; }
.tkt-n {
  display: inline-block; min-width: 1.25rem; padding: 0 .3rem; margin-left: .25rem;
  border-radius: 999px; background: #c0392b; color: #fff;
  font-size: .68rem; font-weight: 800; text-align: center; line-height: 1.25rem;
}
.tkt-search { display: flex; gap: .4rem; }
.tkt-search .form-input { min-width: 16rem; }

.tkt-bulk { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.tkt-bulk-danger { display: flex; gap: .4rem; align-items: center; }
.tkt-bulk-danger .form-input { width: 8rem; }

.tkt-table td { vertical-align: top; }
.tkt-table tr.tkt-hot td { background: rgba(192, 57, 43, .07); }
.tkt-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.tkt-subject { color: var(--pm-text); font-weight: 600; text-decoration: none; }
.tkt-subject:hover { color: var(--pm-link); }
.tkt-tag {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 4px;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border);
  color: var(--pm-muted); font-size: .68rem; font-weight: 700; vertical-align: middle;
}
.tkt-tag-spam { background: rgba(192, 57, 43, .16); border-color: rgba(192, 57, 43, .4); color: #e8705f; }
.tkt-tag-cust { background: rgba(46, 160, 97, .16); border-color: rgba(46, 160, 97, .4); color: #57c98a; }
.tkt-tag-note { background: rgba(245, 181, 68, .16); border-color: rgba(245, 181, 68, .4); color: #f5b544; }

/* ---- one ticket ---- */
.tkt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.2rem; align-items: start; }
@media (max-width: 991.98px) { .tkt-grid { grid-template-columns: minmax(0, 1fr); } }

.tkt-msg { padding: 1rem 0; border-bottom: 1px solid var(--pm-border); }
.tkt-msg:last-child { border-bottom: 0; padding-bottom: 0; }
.tkt-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.tkt-msg-head strong { color: var(--pm-text); font-size: .88rem; }
.tkt-msg-when { color: var(--pm-muted); font-size: .74rem; margin-left: auto; }
.tkt-msg-body { color: var(--pm-text); font-size: .9rem; line-height: 1.6; word-break: break-word; }
.tkt-msg-staff { border-left: 3px solid var(--pm-primary); padding-left: .9rem; }
.tkt-msg-sys .tkt-msg-body { color: var(--pm-muted); font-size: .82rem; font-style: italic; }
.tkt-msg-note { background: rgba(245, 181, 68, .06); border-left: 3px solid #f5b544; padding-left: .9rem; }

.tkt-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.tkt-set { display: flex; gap: .4rem; margin-bottom: .6rem; }
.tkt-set .form-input { flex: 1 1 auto; }
.tkt-set:last-child { margin-bottom: 0; }

.tkt-meta { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .35rem .6rem; margin: 0; }
.tkt-meta dt { color: var(--pm-muted); font-size: .78rem; }
.tkt-meta dd { color: var(--pm-text); font-size: .82rem; margin: 0; word-break: break-word; }

.tkt-also li { font-size: .8rem; margin-bottom: .45rem; color: var(--pm-muted); }
.tkt-also a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-right: .35rem; }

.btn-fill-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn-fill-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }

/* ==========================================================================
   Admin service page: what the server says
   ========================================================================== */
.svc-upstream { border-left: 3px solid var(--pm-border); }
.svc-upstream.is-ok { border-left-color: #2ea061; }
.svc-upstream.is-missing { border-left-color: #c0392b; }
.svc-upstream.is-unknown { border-left-color: #f5b544; }
.svc-upstream-head { color: var(--pm-text); font-weight: 700; margin: 0 0 .6rem; }
.svc-upstream.is-ok .svc-upstream-head { color: #57c98a; }
.svc-upstream.is-missing .svc-upstream-head { color: #e8705f; }
.svc-mark { display: inline-flex !important; gap: .3rem; align-items: center; vertical-align: middle; }
.svc-mark .form-input { width: 13rem; padding: .25rem .5rem; font-size: .8rem; height: auto; }

/* ==========================================================================
   Admin customer pages
   ========================================================================== */
.cust-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cust-actions form { margin: 0; }
.cust-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
.cust-form .form-label { margin: 0; }
.cust-form-foot, .cust-form > div, .cust-form > .cust-check { grid-column: 1 / -1; }
.cust-form-foot { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
@media (max-width: 575.98px) { .cust-form { grid-template-columns: minmax(0, 1fr); } }
.cust-check { display: inline-flex; align-items: center; gap: .4rem; color: var(--pm-muted); font-size: .84rem; margin: 0; }
.cust-credit { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cust-credit .form-input { width: auto; }
.cust-credit input[type="number"] { width: 7rem; }
.cust-credit .cust-credit-note { flex: 1 1 14rem; }
.cust-note { padding: .7rem 0; border-top: 1px solid var(--pm-border); }
.cust-note.is-pinned { border-left: 3px solid #f5b544; padding-left: .7rem; background: rgba(245, 181, 68, .05); }
.cust-note-body { color: var(--pm-text); font-size: .86rem; line-height: 1.5; word-break: break-word; }
.cust-note-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .3rem;
  color: var(--pm-muted); font-size: .72rem; }
.cust-note-meta form { margin: 0; }
.cust-link { background: none; border: 0; padding: 0; color: var(--pm-link, #7c97ff); font-size: .72rem; cursor: pointer; }
.cust-link:hover { text-decoration: underline; }

/* ==========================================================================
   Header contact item
   ========================================================================== */
.theme-navbar .nav-bottom .info .item { display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; text-decoration: none; }
.light-theme .theme-navbar .nav-bottom .info .item { color: var(--darkBlue, #0b0c1b); }
.theme-navbar .nav-bottom .info .item .ph-nav-mail { flex: 0 0 auto; opacity: .85; }
.theme-navbar .nav-bottom .info .item:hover .text { text-decoration: underline; }