/* ===== SMM PWR — global red+white theme (Bootstrap 3 override) ===== */
:root{--pwr-red:#E11733;--pwr-red2:#FF3B57;--pwr-ink:#14161d;--pwr-muted:#6f7587;--pwr-line:#eef0f5;--pwr-bg:#ffffff;
  /* 20 Aug: card surface as a token. The values are exactly the ones .well/.panel
     already use in each mode - they were repeated in three places, so a block that
     did not know about them (see .pwr-cp below) ended up transparent. */
  --pwr-card:#ffffff;--pwr-card-sh:0 12px 30px rgba(20,20,40,.05);}
/* --- iOS Safari bottom white strip fix (Aug 2) ---------------------
   Symptom: a white strip appeared below the dark footer, level with the
   browser's bottom bar. Measured: no gap in the document (document height =
   footer bottom edge). The white came from Safari painting its bottom bar and
   the overscroll area with the page CANVAS colour; the canvas colour was not
   declared on html, so it was inherited from body and was white.
   Fix: pin the canvas to the footer colour.
   --- r15 UPDATE: the footer now takes the weather-mode colour (light in sun
   mode, cream in cloudy, dark in rainy), so a hard-coded dark canvas turned
   into a dark strip under a light footer. Simplified rule: canvas =
   var(--pwr-bg). Rainy --pwr-bg became #14161d in r14, so dark mode is
   unchanged; light and cloudy canvases now match their footer. */
html{background:var(--pwr-bg)}
/* Signed-in pages have no dark footer - the page ends with light content.
   A dark canvas then showed as a dark band under the content (and behind the
   iOS bottom bar). Keep the canvas light on signed-in pages; guest pages keep
   the dark canvas that matches their dark footer.
   Browsers without :has support ignore this rule. */
html:has(.navbar a[href="/logout"]){background:var(--pwr-bg)}

/* The footer is intentionally guest-only. On short account pages (orders,
   add funds, tickets) the dark canvas above showed as empty space once the
   content ended; stretching the body to the viewport lets it paint its own
   background (per weather mode) instead. Guest pages are unaffected - the
   selector only matches the signed-in navbar's logout link. */
body:has(.navbar a[href="/logout"]){min-height:100vh}

body{background:var(--pwr-bg);color:var(--pwr-ink);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--pwr-red)}
a:hover,a:focus{color:#b3122a;text-decoration:none}
hr{border-color:var(--pwr-line)}

/* ---- top navbar ---- */
.navbar-default{background:#fff;border:none;border-bottom:1px solid var(--pwr-line);box-shadow:0 2px 14px rgba(20,20,40,.05);border-radius:0;margin-bottom:26px}
.navbar-default .navbar-brand{color:var(--pwr-ink);font-weight:800;letter-spacing:.3px;
  height:auto;padding:12px 18px 12px 14px;display:flex;align-items:center}
.navbar-default .navbar-brand>img{max-height:36px;width:auto;display:block}
.navbar-default .navbar-brand:hover{color:var(--pwr-red)}
.navbar-default .navbar-nav>li>a{color:var(--pwr-muted);font-weight:700;border-radius:10px;margin:8px 3px;padding:10px 16px}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:var(--pwr-red);background:#fff5f6}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#fff;background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));box-shadow:0 8px 18px rgba(225,23,51,.3)}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background:#fff5f6;color:var(--pwr-red)}
.navbar-default .navbar-nav>li>a .navbar-icon{margin-right:7px}
.navbar-default .badge{background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));color:#fff;font-weight:800;padding:6px 12px;border-radius:20px}
.navbar-toggle .icon-bar{background:var(--pwr-red)}
.navbar-nav .caret{border-top-color:currentColor}

/* ---- buttons ---- */
.btn{border-radius:10px;font-weight:700}
.btn-primary,.btn-primary:focus{background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));border:none;color:#fff;box-shadow:0 8px 18px rgba(225,23,51,.28)}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary{background:linear-gradient(135deg,var(--pwr-red),#b3122a);border:none;color:#fff}
.btn-success{background:linear-gradient(135deg,#22c67e,#0f9d63);border:none}
.btn-default{background:#fff;border:1.5px solid var(--pwr-line);color:#3a3f4b}
.btn-default:hover,.btn-default:focus{background:#fff5f6;border-color:#f6c9cf;color:var(--pwr-red)}
.btn-link{color:var(--pwr-red)}

/* ---- nav-pills (filter/category tabs) ---- */
.nav-pills{gap:8px;display:flex;flex-wrap:wrap}
.nav-pills>li>a{border-radius:11px;color:var(--pwr-muted);font-weight:700;background:#fff;border:1px solid var(--pwr-line)}
.nav-pills>li>a:hover{background:#fff5f6;color:var(--pwr-red)}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(225,23,51,.28)}

/* ---- forms ---- */
.form-control{border-radius:11px;border:1.5px solid var(--pwr-line);box-shadow:none;height:46px;background:#fbfcfe;color:var(--pwr-ink)}
.form-control:focus{border-color:var(--pwr-red);box-shadow:0 0 0 3px rgba(225,23,51,.12);background:#fff}
textarea.form-control{height:auto}
.control-label,label{font-weight:700;color:#3a3f4b}
.input-group-addon{border-radius:11px;border:1.5px solid var(--pwr-line);background:#faf7f8}

/* ---- cards / wells / panels ---- */
/* Card background stays OPAQUE (#fff).
   TRIED AND REVERTED: with rgba(255,255,255,.8) the SMMPWR watermark still did
   not show through on wide-table pages (services, new order) -- effective
   opacity was 28% x 20% = 5.6%, which is nothing.
   Making it visible needs the card ~50% transparent, and that tints the price
   tables pink. A change with no benefit was not kept.
   The watermark does show on pages where content does not cover the background:
   the home-page SEO section, /about, /contact, /faq, /affiliate-program,
   blog posts, and the side margins of every page. */
.well,.panel{border-radius:16px;border:1px solid var(--pwr-line);box-shadow:0 12px 30px rgba(20,20,40,.05);background:#fff}
.well{padding:24px}
.panel{overflow:hidden}
.panel-default>.panel-heading{background:#faf7f8;border-color:var(--pwr-line);font-weight:800;color:var(--pwr-ink)}
.panel-primary>.panel-heading{background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));border-color:transparent}

/* ---- tables ---- */
.table{background:#fff;border-radius:14px;overflow:hidden}
.table>thead>tr>th{border-bottom:2px solid var(--pwr-line);color:var(--pwr-muted);text-transform:uppercase;font-size:11.5px;letter-spacing:.4px;font-weight:800;padding:14px 16px}
.table>tbody>tr>td{padding:14px 16px;border-top:1px solid var(--pwr-line);vertical-align:middle}
.table-hover>tbody>tr:hover{background:#fff5f6}
.table-striped>tbody>tr:nth-of-type(odd){background:#fbfcfe}

/* Wide tables (orders, refill, subscriptions) squeeze the narrow columns
   because the link column asks for 40% of the row. Keep ids, dates and
   amounts on one line and let the long text columns absorb the slack. */
.nowrap,.table .nowrap{white-space:nowrap}
@media (min-width:768px){
  .table>thead>tr>th{white-space:nowrap}
  .table>thead>tr>th,.table>tbody>tr>td{padding-left:12px;padding-right:12px}
  /* A table cell's max-width is ignored in auto layout, so the link column
     grows to fit the longest URL and starves the service name. Constraining
     an inner inline-block does work — the column can no longer ask for more
     than 320px and the leftover width goes to the service column. */
  /* the upstream panel's own .width-40 wins on specificity and forces the table
     to 1720px on a 1440px screen, so every other column gets squeezed and
     ids/dates break across two lines. !important is the only way to drop it. */
  .table td.width-40,.table th.width-40{width:auto!important}
  .pwr-clip{display:inline-block;max-width:320px;overflow-wrap:anywhere;vertical-align:middle}
}

/* ---- labels / badges (order statuses) ---- */
.label{border-radius:20px;padding:.35em .8em;font-weight:800;font-size:78%}
.label-success{background:#e7f8f0;color:#0f9d63}
.label-info{background:#e9f0ff;color:#2b6ef2}
.label-primary{background:#fdeaed;color:var(--pwr-red)}
.label-warning{background:#fff2e0;color:#e08600}
.label-danger{background:#fdeaed;color:var(--pwr-red)}
.label-default{background:#f1f2f6;color:var(--pwr-muted)}

/* ---- dropdowns ---- */
.dropdown-menu{border-radius:12px;border:1px solid var(--pwr-line);box-shadow:0 16px 40px rgba(20,20,40,.12);padding:6px;margin-top:6px}
.dropdown-menu>li>a,.dropdown-item{border-radius:8px;padding:9px 13px;font-weight:600;color:#3a3f4b}
.dropdown-menu>li>a:hover,.dropdown-item:hover,.dropdown-menu>.active>a{background:#fff5f6;color:var(--pwr-red)}

/* ---- misc accents ---- */
.pagination>li>a,.pagination>li>span{color:var(--pwr-red);border-color:var(--pwr-line)}
.pagination>.active>a,.pagination>.active>a:hover,.pagination>.active>span{background:var(--pwr-red);border-color:var(--pwr-red);color:#fff}
.progress{border-radius:20px;background:#f0f1f5}
.progress-bar{background:linear-gradient(90deg,var(--pwr-red2),var(--pwr-red))}
.text-primary{color:var(--pwr-red)!important}
.text-danger{color:var(--pwr-red)!important}
.alert{border-radius:12px}
.alert-success{background:#e7f8f0;border-color:#c9efdd;color:#0f9d63}
.alert-danger{background:#fdeaed;border-color:#f6cdd4;color:#c01027}
.alert-info{background:#e9f0ff;border-color:#cfe0ff;color:#2b6ef2}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:var(--pwr-red);border-bottom-color:transparent}
::selection{background:rgba(225,23,51,.18)}
a.forgot-password{color:var(--pwr-red)}

/* keep the custom login untouched (it is self-scoped under .pwr-login) */

/* ---- provider facts: average time + daily delivery capacity ---- */
/* ---- AVERAGE TIME COLOUR BANDS (user request, 29 Jul) ------------------
   OVER 30 min -> red | 30 min and under -> green | UNDER 1 min -> blue (seconds)
   script.js assigns the band class (bandClass() + bandRemaining()). The base
   .pwr-avg is NEUTRAL: a cell whose duration cannot be parsed gets no colour,
   because colour is a claim and we do not know which band it belongs in.
   The pulsing dot runs only in the GREEN and BLUE bands, meaning "flowing".
   Red keeps a static dot - making a slow service glow reads as the opposite. */
.pwr-avg{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#374151;white-space:nowrap}
.pwr-avg:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.pwr-avg-ok{color:#0f9d63}
.pwr-avg-ok:before{box-shadow:0 0 0 0 rgba(15,157,99,.55);animation:pwrpulse-dot 1.8s ease-out infinite}
.pwr-avg-slow{color:#c01027}
.pwr-avg-sec{color:#2b6ef2}
.pwr-avg-sec:before{box-shadow:0 0 0 0 rgba(43,110,242,.55);animation:pwrpulse-blue 1.8s ease-out infinite}
@keyframes pwrpulse-dot{to{box-shadow:0 0 0 7px rgba(15,157,99,0)}}
@keyframes pwrpulse-blue{to{box-shadow:0 0 0 7px rgba(43,110,242,0)}}
/* ---- REAL MEASURED TIMES UNDER 20 MINUTES: live flame ------------------
   User request (26 Jul). The threshold is HIZLI_ESIK = 20 minutes in script.js.
   WHAT THE FLAME MEANS: "this service is blazing fast" (user, 29 Jul).
   Only the supplier's published real duration is used; with no duration the
   cell stays empty and no flame appears (no invented data).
   The dot is HIDDEN on these rows: dot plus flame together looked cluttered.
   29 Jul: the flame no longer OVERRIDES THE COLOUR - colour belongs to the
   duration, the flame belongs to speed. */
.pwr-avg-fast:before{display:none}
.pwr-flame{width:14px;height:14px;flex:0 0 14px;transform-origin:50% 88%;
  animation:pwrFlame 1.15s ease-in-out infinite;
  filter:drop-shadow(0 1px 3px rgba(255,90,0,.45))}
@keyframes pwrFlame{
  0%,100%{transform:scale(1) rotate(-1.5deg);opacity:.95}
  32%{transform:scale(1.16) rotate(2.5deg);opacity:1}
  64%{transform:scale(.94) rotate(-2.5deg);opacity:.9}
}
@media (prefers-reduced-motion:reduce){.pwr-flame{animation:none}}
/* The "flame instead of ID" variant was removed the same day (Aug 2). */
/* .pwr-speed removed (Jul 27): the delivery-speed badge is no longer
   printed; the panel shows only the measured average completion time. */
.pwr-svc-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;align-items:stretch}
/* 🐞 THE SELECTOR MUST BE CHILD, NOT DESCENDANT: "span" was a descendant
   selector, so spans INSIDE the chip (the flame wrapper, for instance) also
   picked up the chip style -> nested padding and border, the chip grew from
   34px to 65px, and sibling chips stretched with it leaving their content
   STUCK AT THE TOP (the user said "it stays up top"). Measured: 65px vs 34px.
   Alignment also moved from baseline to center: chips keep equal height while
   their content is CENTRED vertically. */
.pwr-svc-facts>span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:11px;
  background:#ffffff;border:1px solid var(--pwr-line);font-size:13px;color:var(--pwr-ink)}
/* inner wrappers must not look like chips */
.pwr-svc-facts>span span{padding:0;border:0;background:none;border-radius:0}
.pwr-svc-facts b{white-space:nowrap;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--pwr-muted)}
.pwr-live{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;white-space:nowrap;
  background:#e7f8f0;color:#0f9d63;font-size:11px;font-weight:800;letter-spacing:.2px;vertical-align:1px}
.pwr-drop{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;white-space:nowrap;
  font-size:11px;font-weight:800;letter-spacing:.2px;vertical-align:1px;
  background:#f1f2f6;color:var(--pwr-muted)}
.pwr-drop-low{background:#e7f8f0;color:#0f9d63}
.pwr-drop-mid{background:#fff2e0;color:#e08600}
.pwr-drop-high{background:#fdeaed;color:var(--pwr-red)}
/* Daily capacity badge "Day 10-15K" (user request, 1 Aug): sits next to the
   banded average time in the services table. Neutral blue on purpose - the
   green/red/blue duration bands carry meaning, this pill must not compete. */
.pwr-day{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;white-space:nowrap;
  font-size:11px;font-weight:800;letter-spacing:.2px;vertical-align:1px;
  background:#e9f0fe;color:#2b6ef2}
/* The average-time column stretched 94px past its content, leaving a 106px
   gap between the Day badge and the View button. Shrink the column to its
   content; the freed width goes to the service-name column so long names wrap
   less. Shrinking alone was not enough (width is set by the LONGEST row, 88px
   remained), so the content is also right-aligned - the badge now sits next to
   View on every row. Desktop only: on mobile the rows become cards via
   .pwr-table-cards. */
@media (min-width:768px){
  #service-table th:nth-last-child(2),
  #service-table td:nth-last-child(2){width:1%;white-space:nowrap;text-align:right}
  #service-table td:nth-last-child(2) .pwr-avg{justify-content:flex-end}
}
.pwr-chart{margin:0 0 14px;padding:12px 14px 8px;border:1px solid var(--pwr-line);border-radius:12px;background:#fff}
.pwr-facts-wrap{margin-bottom:2px}
.pwr-nodata{margin:0 0 12px;padding:10px 13px;border-radius:11px;background:#ffffff;
  border:1px dashed var(--pwr-line);color:var(--pwr-muted);font-size:12.5px;font-weight:600}

/* add funds: coin list moved out of the <select>, where it never fitted */
.pwr-pay-info{margin-top:10px}
.pwr-pay-note{display:inline-block;padding:6px 12px;border-radius:20px;background:#e7f8f0;color:#0f9d63;
  font-size:12.5px;font-weight:800;margin-bottom:10px}
.pwr-pay-label{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--pwr-muted);margin-bottom:6px}
.pwr-pay-coins{display:flex;flex-wrap:wrap;gap:6px}
.pwr-pay-coins span{padding:4px 9px;border-radius:8px;background:#ffffff;border:1px solid var(--pwr-line);
  font-size:11.5px;font-weight:800;color:#3a3f4b;letter-spacing:.2px}
#method{text-overflow:ellipsis}
.pwr-chart-hd{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--pwr-muted);margin-bottom:6px}
.pwr-spark{display:block;width:100%;height:46px}

/* =====================================================================
   RESPONSIVE — phone & tablet
   ===================================================================== */
img{max-width:100%;height:auto}
.table td,.table th{word-break:break-word}

/* ---- tablet: let wide tables scroll inside their card ---- */
@media (max-width:991px){
  .navbar-default{margin-bottom:18px}
  .well{padding:18px}
  .well>.table,.well>form>.table{margin-bottom:0}
  .well-float,.well{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table>thead>tr>th,.table>tbody>tr>td{padding:12px 12px}
  .nav-pills>li>a{padding:8px 13px;font-size:13.5px}
  .col-md-8.col-md-offset-2{padding-left:8px;padding-right:8px}
}

/* ---- phone ---- */
@media (max-width:767px){
  body{font-size:14.5px}
  .container,.container-fluid{padding-left:12px;padding-right:12px}
  .navbar-default{margin-bottom:14px}
  .navbar-default .navbar-brand{padding-left:12px;font-size:17px}
  .navbar-default .navbar-brand>img{max-height:34px;width:auto}
  .navbar-toggle{margin-right:10px;border-color:var(--pwr-line)}
  .navbar-default .navbar-nav>li>a{margin:2px 6px;padding:11px 14px}
  .navbar-default .navbar-nav .badge{display:inline-block}
  .navbar-nav .open .dropdown-menu{box-shadow:none;border:none;background:transparent}

  .well{padding:14px;border-radius:14px;overflow-x:visible}
  .well-float{overflow-x:visible}

  /* filter / status pills: search jumps to its own full-width line */
  .nav-pills{gap:7px;margin-bottom:12px}
  .nav-pills>li{float:none}
  .nav-pills>li>a{padding:8px 12px;font-size:13px}
  .nav-pills>li.search,.nav-pills>li.pull-right{float:none!important;width:100%;order:-1;margin:0 0 10px}
  .nav-pills>li.search .input-group,.nav-pills>li.search form{width:100%}
  .nav-pills .dropdown,.nav-pills .dropdown>.btn{width:auto;max-width:100%}
  .nav-pills .dropdown>.btn{white-space:normal;text-align:left}

  /* --- tables become cards (labels are injected by script.js) --- */
  .pwr-table-cards{display:block;background:transparent;border-radius:0}
  .pwr-table-cards>thead{display:none}
  .pwr-table-cards>tbody{display:block}
  .pwr-table-cards>tbody>tr{display:block;background:#fff;border:1px solid var(--pwr-line);
    border-radius:14px;padding:4px 14px;margin:0 0 12px;box-shadow:0 6px 18px rgba(20,20,40,.05)}
  /* label on its own line, value below — never squeezes long service names */
  .pwr-table-cards>tbody>tr>td{display:block;width:auto!important;
    padding:9px 0!important;border-top:1px solid var(--pwr-line)!important;text-align:left;
    font-size:14px;line-height:1.45;white-space:normal!important;overflow-wrap:anywhere}
  .pwr-table-cards>tbody>tr>td:first-child{border-top:none!important}
  .pwr-table-cards>tbody>tr>td:before{content:attr(data-th);display:block;margin-bottom:2px;
    font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--pwr-muted)}
  .pwr-table-cards>tbody>tr>td[data-th=""]:before{content:none}
  .pwr-table-cards>tbody>tr>td[data-th=""]:empty{display:none}
  .pwr-table-cards>tbody>tr>td.width-40,.pwr-table-cards .width-service-name{width:auto}
  .pwr-table-cards .service-name{font-weight:600}
  .pwr-clip{max-width:100%}
  /* category / section header rows */
  .pwr-table-cards>tbody>tr.pwr-row-group{background:transparent;border:none;box-shadow:none;padding:0;margin:20px 0 8px}
  .pwr-table-cards>tbody>tr.pwr-row-group>td{display:block;border:none!important;padding:0!important;
    text-align:left;font-size:15px}
  .pwr-table-cards .order-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

  /* forms: 16px keeps iOS Safari from zooming on focus */
  .form-control{font-size:16px;height:48px}
  select.form-control{font-size:16px}
  #order-form>.btn-primary,#order-form button[type=submit],
  .well>form>button[type=submit]{width:100%;height:50px;font-size:16px}

  .pagination{display:flex;flex-wrap:wrap;gap:6px}
  .pagination>li>a,.pagination>li>span{border-radius:9px}
  .modal-dialog{margin:10px}
  .modal-content{border-radius:14px}
  .alert{font-size:14px}
}

/* ---- very small phones ---- */
@media (max-width:400px){
  .pwr-table-cards>tbody>tr>td:before{flex-basis:44%;font-size:10.5px}
  .pwr-table-cards>tbody>tr{padding:2px 12px}
  .well{padding:12px}
  .btn-xs{padding:4px 9px}
}

/* =====================================================================
   Landing content (home, sign up) — the crawlable copy under the hero
   ===================================================================== */
/* ---- landing content under the hero (this is what search engines read) ---- */
.pwr-landing{background:#fff;color:#14161d;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.pwr-landing .pl-wrap{max-width:920px;margin:0 auto;padding:72px 24px 88px}
.pwr-landing h2{font-size:33px;line-height:1.18;font-weight:800;letter-spacing:-.6px;margin:52px 0 16px;color:#14161d}
.pwr-landing h2:first-child{margin-top:0}
.pwr-landing h3{font-size:21px;font-weight:800;margin:32px 0 10px;color:#14161d}
.pwr-landing p{font-size:16.5px;line-height:1.72;color:#3f4552;margin:0 0 16px}
.pwr-landing ul,.pwr-landing ol{margin:0 0 18px;padding-left:22px}
.pwr-landing li{font-size:16.5px;line-height:1.7;color:#3f4552;margin-bottom:8px}
.pwr-landing a{color:#E11733;font-weight:700}
.pwr-landing a:hover{color:#b3122a;text-decoration:underline}
.pwr-landing strong{color:#14161d;font-weight:800}
.pwr-landing table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15.5px}
/* r19: in light mode the table header background was #f6f7fb, which read as a
   grey smudge on a white page. Set to white; separation comes from the bottom
   border. Cloudy and rainy variants keep their own tone (below). */
.pwr-landing th{text-align:left;padding:12px 14px;background:#fff;border-bottom:2px solid #eef0f5;
  font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#6f7587}
.pwr-landing td{padding:12px 14px;border-bottom:1px solid #eef0f5;color:#3f4552}
.pwr-landing blockquote{margin:0 0 20px;padding:16px 20px;border-left:3px solid #E11733;
  background:#fff5f6;border-radius:0 12px 12px 0}
.pwr-landing blockquote p{margin:0;color:#14161d}
.pwr-landing hr{border:none;border-top:1px solid #eef0f5;margin:44px 0}
@media (max-width:767px){
  .pwr-landing .pl-wrap{padding:44px 20px 60px}
  .pwr-landing h2{font-size:26px;margin:38px 0 12px}
  .pwr-landing h3{font-size:19px}
  .pwr-landing p,.pwr-landing li{font-size:16px}
  .pwr-landing table{display:block;overflow-x:auto}
}

/* ---- SMMPWR handwriting watermark: font + motion ----------------------
   @font-face lives HERE (global style.css), NOT in layout.twig.
   Reason: the watermark block in the layout is excluded on the sign-in page,
   yet the font is still needed there, because the lower SEO section of the
   home page carries the watermark too.
   The font is only downloaded on pages that use it (browsers load it lazily).
   Dancing Script Bold, SIL OFL 1.1 - licence at /pwr/font/OFL.txt          */
@font-face{font-family:'PwrHand';
  src:url('/pwr/font/dancing.woff2?v=2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@keyframes pwrWrite{
  0%   {clip-path:inset(0 100% 0 0)}   /* empty */
  40%  {clip-path:inset(0 0 0 0)}      /* written */
  72%  {clip-path:inset(0 0 0 0)}      /* hold */
  100% {clip-path:inset(0 0 0 100%)}   /* soldan silindi */
}

/* ---- HOME PAGE: watermark inside the lower SEO section ----------------
   The sign-in hero has its own 3D terminal and carries NO watermark. The user
   asked for it "in the SEO part further down the home page" -> so it lives
   inside the .pwr-landing section only, drawn with ::before (no DOM change).
   .pl-wrap z-index:1 is REQUIRED, or the text sits under the watermark.    */
.pwr-landing{position:relative;overflow:hidden}
.pwr-landing::before{content:"SMMPWR";
  /* THE UNIT ON top MATTERS: the section is 5057px tall, so a percentage
       pushed the watermark ~2300px down, where it landed inside the SEO copy
       and was not visible (measured). With vh it sits on the section's FIRST
       screen, right in front of the reader once they scroll past the sign-in
       hero and reach the SEO text. */
  /* USER REQUEST: THE CENTRE OF THE SEO SECTION. Earlier attempts:
       top:46%  -> the user could not see it
       top:42vh -> clipped 29px at the top ("way too high")
       top:50vh -> centred on the section's FIRST screen, but the section is
                   5057px tall so the user still said "still too high".
       top:50%  -> centred on the WHOLE section (this is the one that was wanted). */
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-32deg);
  font-family:'PwrHand','Segoe Script','Brush Script MT',cursive;font-weight:700;
  font-size:min(24vw,30vh);line-height:.9;letter-spacing:.005em;
  white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
  color:#E11733;opacity:.28;
  text-shadow:
    2px 2px 0 #d0142e, 4px 4px 0 #c01229, 6px 6px 0 #b01025,
    8px 8px 0 #a00e21, 10px 10px 0 #900c1d, 12px 12px 0 #7f0a19,
    14px 14px 26px rgba(94,10,24,.28);
  animation:pwrWrite 11s ease-in-out infinite}
.pwr-landing .pl-wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .pwr-landing::before{animation:none;clip-path:none}
}
@media print{.pwr-landing::before{display:none}}

/* ---- mobile horizontal overflow (28 Jul) ----
   On a 390px screen every page was 394px wide; the page could be swiped sideways
   and Lighthouse reported "content wider than screen".
   ROOT CAUSE: Bootstrap 3 gives .row a -15px margin, but this theme's .container
   padding is 12px. When the two do not match, 3px spills out on each side. The
   same mismatch exists on .navbar-header (the only overflow on the home page).
   The .pwr-wm watermark is UNRELATED - position:fixed + overflow:hidden does not
   widen the document.
   Options measured (390px, /faq):
     no change           -> overflow 4px, content 396px
     .container 15px     -> overflow 0px, content 390px   <- CHOSEN
     .row margin -12px   -> overflow 0px, content 390px   (equivalent, but fights the framework)
     .row margin 0       -> overflow 0px, content 366px   (narrows content by 24px, bad)
   Mobile only; at >=768px the layout is already correct. */
@media (max-width:767px){
  .container{padding-left:15px;padding-right:15px}
  .navbar > .container > .navbar-header,
  .navbar > .container-fluid > .navbar-header,
  .navbar-header{margin-left:0;margin-right:0}
}

/* 28 Jul: on /api and /signup an H4 / H3 followed the H1 directly -> a heading
   hierarchy skip (H1>H4, H1>H3). The labels were promoted semantically to H2;
   these classes keep the old sizes so nothing changes VISUALLY
   (Bootstrap 3: h4=18px, h3=24px). */
.pwr-h4size{font-size:18px}
.pwr-h3size{font-size:24px}

/* ================================================================
   DISPLAY MODES — Sunny (default) / Cloudy (soft) / Rainy (dark)
   User request 31 Jul: "a dark one, a light one, and a middle one that is easy
   on the eyes — like rainy, sunny, overcast". The mode travels on
   html[data-pwr-mode], the choice is stored in localStorage under 'pwr_mode',
   and the switch is pinned to the bottom right.
   ================================================================ */
/* The copy moved into the menu leaves the fixed position (.pwr-wx-li block below). */
.pwr-wx{position:fixed;right:16px;bottom:16px;z-index:99998;display:flex;gap:2px;
  background:#fff;border:1px solid #e3e5ee;border-radius:999px;padding:4px;
  box-shadow:0 6px 22px rgba(20,22,29,.16)}
.pwr-wx button{border:0;background:transparent;font-size:17px;line-height:1;
  padding:7px 9px;border-radius:999px;cursor:pointer;opacity:.5;transition:opacity .15s,background .15s}
.pwr-wx button:hover{opacity:1}
.pwr-wx button.pwr-wx-on{background:#fde8ec;opacity:1;box-shadow:inset 0 0 0 1px var(--pwr-red)}
body.pwr-ck-on .pwr-wx{bottom:calc(var(--pwr-ck-h,0px) + 14px)}
@media (max-width:560px){.pwr-wx{right:10px;bottom:10px;padding:3px}.pwr-wx button{font-size:15px;padding:6px 8px}}

/* ---------- CLOUDY: sicak gri, dusuk parlaklik, gozu yormaz ---------- */
/* r14: in dark mode the page background (#101218) and the footer/canvas
   (#14161d) were two different darks, visible as a seam. The rainy --pwr-bg
   and all background surfaces were unified to #14161d site-wide; card tones
   (#161922 / #1a1d26) are unchanged. */
html[data-pwr-mode="cloudy"]{--pwr-ink:#2e3037;--pwr-muted:#5e6474;--pwr-line:#d9d6cc;--pwr-bg:#e6e4dd;
  --pwr-card:#f2f0e9;--pwr-card-sh:0 8px 22px rgba(40,38,30,.06)}
html[data-pwr-mode="cloudy"] body{background:#e6e4dd}
html[data-pwr-mode="cloudy"] .navbar-default{background:#f2f0e9;box-shadow:0 2px 12px rgba(40,38,30,.06)}
html[data-pwr-mode="cloudy"] .well,
html[data-pwr-mode="cloudy"] .panel{background:#f2f0e9;box-shadow:0 8px 22px rgba(40,38,30,.06)}
html[data-pwr-mode="cloudy"] .panel-default>.panel-heading{background:#ece9e1}
html[data-pwr-mode="cloudy"] .form-control{background:#eeece4}
html[data-pwr-mode="cloudy"] .form-control:focus{background:#f6f4ed}
html[data-pwr-mode="cloudy"] .input-group-addon{background:#ece9e1}
html[data-pwr-mode="cloudy"] .btn-default{background:#f2f0e9;color:#3d4049}
html[data-pwr-mode="cloudy"] .nav-pills>li>a{background:#f2f0e9}
html[data-pwr-mode="cloudy"] .table{background:#f2f0e9}
html[data-pwr-mode="cloudy"] .table-striped>tbody>tr:nth-of-type(odd){background:#ece9e1}
html[data-pwr-mode="cloudy"] .table-hover>tbody>tr:hover{background:#f0e6e2}
html[data-pwr-mode="cloudy"] .dropdown-menu{background:#f2f0e9;border-color:#d9d6cc}
html[data-pwr-mode="cloudy"] .modal-content{background:#f2f0e9}
html[data-pwr-mode="cloudy"] .progress{background:#dedbd1}
html[data-pwr-mode="cloudy"] .pwr-chart{background:#ece9e1}
html[data-pwr-mode="cloudy"] .pwr-nodata{background:#ece9e1}
html[data-pwr-mode="cloudy"] .pwr-pay-coins span{background:#ece9e1}
html[data-pwr-mode="cloudy"] .pwr-table-cards>tbody>tr{background:#f2f0e9}
html[data-pwr-mode="cloudy"] .pwr-fast-feed{background:#f2f0e9;border-color:#d9d6cc;border-top-color:var(--pwr-red);box-shadow:0 6px 20px rgba(40,38,30,.07)}
html[data-pwr-mode="cloudy"] .pff-card{background:#ece9e1;border-color:#dfdccf}
html[data-pwr-mode="cloudy"] .pff-name{color:#2e3037}
html[data-pwr-mode="cloudy"] .pff-sub,
html[data-pwr-mode="cloudy"] .pff-foot{color:#5e6474}
html[data-pwr-mode="cloudy"] .pff-foot{border-top-color:#dfdccf}
html[data-pwr-mode="cloudy"] .pff-title{color:#2e3037}
html[data-pwr-mode="cloudy"] .pwr-wx{background:#f2f0e9;border-color:#d9d6cc}

/* ---------- RAINY: dark mode ---------- */
html[data-pwr-mode="rainy"]{--pwr-ink:#e2e5ee;--pwr-muted:#98a0b3;--pwr-line:#2a2e3a;--pwr-bg:#14161d;
  --pwr-card:#1a1d26;--pwr-card-sh:0 12px 30px rgba(0,0,0,.35)}
html[data-pwr-mode="rainy"] body{background:#14161d}
html[data-pwr-mode="rainy"] .navbar-default{background:#161922;box-shadow:0 2px 14px rgba(0,0,0,.35)}
html[data-pwr-mode="rainy"] .navbar-default .navbar-brand{color:#e2e5ee}
html[data-pwr-mode="rainy"] .navbar-default .navbar-nav>li>a:hover,
html[data-pwr-mode="rainy"] .navbar-default .navbar-nav>li>a:focus{background:rgba(225,23,51,.12)}
html[data-pwr-mode="rainy"] .navbar-default .navbar-nav>.open>a,
html[data-pwr-mode="rainy"] .navbar-default .navbar-nav>.open>a:hover,
html[data-pwr-mode="rainy"] .navbar-default .navbar-nav>.open>a:focus{background:rgba(225,23,51,.12)}
html[data-pwr-mode="rainy"] .well,
html[data-pwr-mode="rainy"] .panel{background:#1a1d26;box-shadow:0 12px 30px rgba(0,0,0,.35)}
html[data-pwr-mode="rainy"] .panel-default>.panel-heading{background:#161922;color:#e2e5ee}
html[data-pwr-mode="rainy"] .form-control{background:#1d212c;color:#e2e5ee}
html[data-pwr-mode="rainy"] .form-control:focus{background:#222635}
html[data-pwr-mode="rainy"] .form-control::placeholder{color:#6b7284}
html[data-pwr-mode="rainy"] .input-group-addon{background:#161922;color:#98a0b3}
html[data-pwr-mode="rainy"] .btn-default{background:#1d212c;color:#c9cedb}
html[data-pwr-mode="rainy"] .btn-default:hover,
html[data-pwr-mode="rainy"] .btn-default:focus{background:rgba(225,23,51,.14);color:#ff8a9c;border-color:#5a2430}
html[data-pwr-mode="rainy"] .nav-pills>li>a{background:#1d212c}
html[data-pwr-mode="rainy"] .nav-pills>li>a:hover{background:rgba(225,23,51,.14)}
html[data-pwr-mode="rainy"] .table{background:#1a1d26;color:#e2e5ee}
html[data-pwr-mode="rainy"] .table-striped>tbody>tr:nth-of-type(odd){background:#161922}
html[data-pwr-mode="rainy"] .table-hover>tbody>tr:hover{background:#221d26}
html[data-pwr-mode="rainy"] .dropdown-menu{background:#1a1d26;border-color:#2a2e3a}
html[data-pwr-mode="rainy"] .dropdown-menu>li>a,
html[data-pwr-mode="rainy"] .dropdown-item{color:#c9cedb}
html[data-pwr-mode="rainy"] .dropdown-menu>li>a:hover,
html[data-pwr-mode="rainy"] .dropdown-item:hover,
html[data-pwr-mode="rainy"] .dropdown-menu>.active>a{background:rgba(225,23,51,.14);color:#ff8a9c}
html[data-pwr-mode="rainy"] .modal-content{background:#1a1d26;color:#e2e5ee}
html[data-pwr-mode="rainy"] .close{color:#e2e5ee;opacity:.6;text-shadow:none}
html[data-pwr-mode="rainy"] .progress{background:#232734}
html[data-pwr-mode="rainy"] .label-primary,
html[data-pwr-mode="rainy"] .label-danger{background:rgba(225,23,51,.18);color:#ff8a9c}
html[data-pwr-mode="rainy"] .label-warning{background:rgba(224,134,0,.18);color:#f2a94f}
html[data-pwr-mode="rainy"] .label-default{background:#232734;color:#98a0b3}
html[data-pwr-mode="rainy"] .alert-danger{background:rgba(225,23,51,.12);border-color:#5a2430;color:#ff8a9c}
html[data-pwr-mode="rainy"] .alert-success{background:rgba(15,157,99,.12);border-color:#1c4a38;color:#4fd39a}
html[data-pwr-mode="rainy"] .pwr-chart{background:#161922}
html[data-pwr-mode="rainy"] .pwr-nodata{background:#161922}
html[data-pwr-mode="rainy"] .pwr-pay-coins span{background:#161922}
html[data-pwr-mode="rainy"] .pwr-table-cards>tbody>tr{background:#1a1d26}
html[data-pwr-mode="rainy"] a:hover,
html[data-pwr-mode="rainy"] a:focus{color:#ff8a9c}
html[data-pwr-mode="rainy"] .pwr-fast-feed{background:#1a1d26;border-color:#2a2e3a;border-top-color:var(--pwr-red);box-shadow:0 6px 24px rgba(0,0,0,.4)}
html[data-pwr-mode="rainy"] .pff-card{background:#161922;border-color:#262b36}
html[data-pwr-mode="rainy"] .pff-name{color:#e2e5ee}
html[data-pwr-mode="rainy"] .pff-title{color:#e2e5ee}
html[data-pwr-mode="rainy"] .pff-sub,
html[data-pwr-mode="rainy"] .pff-foot{color:#98a0b3}
html[data-pwr-mode="rainy"] .pff-foot{border-top-color:#262b36}
html[data-pwr-mode="rainy"] .pff-badge{background:rgba(43,110,242,.18);color:#7ba4f7}
html[data-pwr-mode="rainy"] .pwr-wx{background:#1a1d26;border-color:#2a2e3a;box-shadow:0 6px 22px rgba(0,0,0,.5)}
html[data-pwr-mode="rainy"] .pwr-wx button.pwr-wx-on{background:rgba(225,23,51,.16)}

/* Description box and data tiles now follow the weather modes (they used to
   stay white in every mode). */
html[data-pwr-mode="cloudy"] .border-solid{background:#ece9e1;border-color:#d9d6cc}
html[data-pwr-mode="cloudy"] .pwr-svc-facts>span{background:#e6e3da;border-color:#d9d6cc}
html[data-pwr-mode="cloudy"] .pwr-drop{background:#e0ddd3}
html[data-pwr-mode="rainy"] .border-solid{background:#161922;border-color:#2a2e3a;color:#e2e5ee}
html[data-pwr-mode="rainy"] .pwr-svc-facts>span{background:#232734;border-color:#2f3442}
html[data-pwr-mode="rainy"] .pwr-live{background:rgba(15,157,99,.16);color:#4fd39a}
html[data-pwr-mode="rainy"] .pwr-drop{background:#232734;color:#98a0b3}
html[data-pwr-mode="rainy"] .pwr-drop-low{background:rgba(15,157,99,.16);color:#4fd39a}
html[data-pwr-mode="rainy"] .pwr-drop-mid{background:rgba(224,134,0,.16);color:#f2a94f}
html[data-pwr-mode="rainy"] .pwr-drop-high{background:rgba(225,23,51,.18);color:#ff8a9c}
html[data-pwr-mode="rainy"] .pwr-day{background:rgba(43,110,242,.16);color:#7ea8ff}
html[data-pwr-mode="rainy"] .pwr-pay-note{background:rgba(15,157,99,.16);color:#4fd39a}
html[data-pwr-mode="rainy"] .pwr-pay-coins span{color:#c9cedb}
html[data-pwr-mode="rainy"] .pwr-pay-label{color:#98a0b3}
/* In dark mode the black "SMM" in the logo disappeared: invert turns black
   into white, and hue-rotate(180) keeps the red where it was. */
html[data-pwr-mode="rainy"] .navbar-default .navbar-brand>img{filter:invert(1) hue-rotate(180deg)}

/* ---- Screenshots of the live panel -------------------------------------
   The site is text-heavy and had no images at all beyond the logo, which
   made the delivery-data claim hard to believe at a glance. These are real
   captures of the live price list and the service card, not mockups.
   width/height are set on the <img> so the layout does not shift (CLS), and
   everything below the fold is lazy-loaded. */
.pwr-shot{margin:26px 0;max-width:900px}
.pwr-shot img{width:100%;height:auto;display:block;border:1px solid #e6e8ef;border-radius:10px;box-shadow:0 10px 30px rgba(16,20,40,.10)}
.pwr-shot figcaption{margin-top:9px;font-size:13px;line-height:1.55;color:#6b7280}
html[data-pwr-mode="cloudy"] .pwr-shot img{border-color:#d9dde8}
html[data-pwr-mode="rainy"] .pwr-shot img{border-color:#2a3040;box-shadow:0 10px 30px rgba(0,0,0,.5)}
html[data-pwr-mode="rainy"] .pwr-shot figcaption{color:#9aa3b2}
@media (max-width:767px){.pwr-shot{margin:18px 0}.pwr-shot figcaption{font-size:12px}}

/* ---- Sticky navigation + in-page jump links ----------------------------
   The home page is one long document (about 6,500px). Reaching pricing or the
   FAQ meant scrolling the whole way back up, because the navbar was
   navbar-static-top and scrolled away with the page.
   position:sticky keeps the bar in normal flow, so the hero height script
   (which measures the navbar and writes --pwr-nav) still reports the same
   number; only the paint position changes. */
.navbar.navbar-static-top{position:sticky;top:0;z-index:1035}
/* Anchor targets must clear the sticky bar, otherwise a jump link leaves the
   heading hidden underneath it. */
.pwr-landing [id]{scroll-margin-top:84px}
.pwr-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.pwr-jump a{display:inline-block;padding:7px 14px;border:1px solid #e3e6ef;border-radius:999px;background:#fff;
  color:#39405a;font-size:13px;font-weight:700;text-decoration:none;line-height:1.2}
.pwr-jump a:hover,.pwr-jump a:focus{border-color:#E11733;color:#E11733;text-decoration:none}
/* r12: the old cloudy values were BLUISH whites (#f4f6fb / #f7f8fc), which
   simply read as "still white" on screen. The correct palette is the cream
   family. */
html[data-pwr-mode="cloudy"] .pwr-jump a{background:#ece8dd;border-color:#d9d6cc;color:#2e3037}
html[data-pwr-mode="cloudy"] .pwr-jump a:hover,
html[data-pwr-mode="cloudy"] .pwr-jump a:focus{border-color:#E11733;color:#E11733}
html[data-pwr-mode="rainy"] .pwr-jump a{background:#161a24;border-color:#2a3040;color:#c8cedb}
html[data-pwr-mode="rainy"] .pwr-jump a:hover{border-color:#FF3B57;color:#FF6B7E}
@media (max-width:767px){.pwr-jump{gap:6px;margin-bottom:18px}.pwr-jump a{padding:6px 11px;font-size:12px}}

/* ---- Landing/SEO section in the two non-default modes -------------------
   The long SEO section had its colours hard-coded (white background, near
   black text). That was invisible while the modes were opt-in, but the mode
   now follows the operating system, so a dark-mode visitor was landing on a
   dark navbar above a white wall of text. These rules put the section in the
   same mode as the rest of the page. */
/* r12: the cloudy set was completed to mirror the rainy set, and the bluish
   tones were replaced with the cream palette (background #f2f0e9, line
   #d9d6cc, ink #2e3037, muted #5e6474). */
html[data-pwr-mode="cloudy"] .pwr-landing{background:#f2f0e9;color:#2e3037}
html[data-pwr-mode="cloudy"] .pwr-landing h2,
html[data-pwr-mode="cloudy"] .pwr-landing h3,
html[data-pwr-mode="cloudy"] .pwr-landing strong{color:#2e3037}
html[data-pwr-mode="cloudy"] .pwr-landing p,
html[data-pwr-mode="cloudy"] .pwr-landing li,
html[data-pwr-mode="cloudy"] .pwr-landing td{color:#4d5261}
html[data-pwr-mode="cloudy"] .pwr-landing th{background:#e9e5d8;border-bottom-color:#d9d6cc;color:#5e6474}
html[data-pwr-mode="cloudy"] .pwr-landing td{border-bottom-color:#e0dcd1}
html[data-pwr-mode="cloudy"] .pwr-landing blockquote{background:#f5e9e5}
html[data-pwr-mode="cloudy"] .pwr-landing hr{border-top-color:#e0dcd1}

html[data-pwr-mode="rainy"] .pwr-landing{background:#14161d;color:#e2e5ee}
html[data-pwr-mode="rainy"] .pwr-landing h2,
html[data-pwr-mode="rainy"] .pwr-landing h3,
html[data-pwr-mode="rainy"] .pwr-landing strong{color:#f0f2f7}
html[data-pwr-mode="rainy"] .pwr-landing p,
html[data-pwr-mode="rainy"] .pwr-landing li,
html[data-pwr-mode="rainy"] .pwr-landing td{color:#aeb5c4}
html[data-pwr-mode="rainy"] .pwr-landing a{color:#ff6b7e}
html[data-pwr-mode="rainy"] .pwr-landing a:hover{color:#ff8a9c}
html[data-pwr-mode="rainy"] .pwr-landing th{background:#161922;border-bottom-color:#262b36;color:#98a0b3}
html[data-pwr-mode="rainy"] .pwr-landing td{border-bottom-color:#232734}
html[data-pwr-mode="rainy"] .pwr-landing blockquote{background:#1a1015;border-left-color:#ff3b57}
html[data-pwr-mode="rainy"] .pwr-landing blockquote p{color:#f0f2f7}
html[data-pwr-mode="rainy"] .pwr-landing hr{border-top-color:#232734}

/* ---- 4 Aug r4: on TOUCH devices the top menu must never float over the
   content. iOS Safari drifts sticky/fixed bars over the page whenever the
   user pinch-zooms (any page) or views the zoomed-out price list; the user
   reported the menu sliding down over the theme repeatedly. On touch the
   navbar is therefore a normal in-flow header row (scrolls away with the
   page) on EVERY page, the New order stats side panel (injected sticky by
   svc.js, hence !important) joins the flow too, and sideways overflow is
   clipped. Desktop pointers keep the sticky bar. The watermark layer is
   NOT touched here - the user wants it visible on phones. ---- */
@media (hover:none) and (pointer:coarse){
  .navbar.navbar-static-top{position:static}
  html,body{overflow-x:clip}
  .pwr-side{position:static!important}
  /* r8 - FIRM RULE: guest pages end BLACK at the very bottom (dark footer +
     dark canvas + dark area behind the browser bar). The light canvas from r6
     was reverted. Signed-in pages keep a light canvas (the html:has rule
     above; they have no footer either).
     On .pwr-landing pages such as api/signup the page background is painted by
     the ::before layer below rather than by BODY: with a transparent body, the
     stretched area behind the browser bar is painted from the canvas (dark)
     while the page itself looks unchanged. Painter z-index:-1 keeps it under
     the content and over the dark canvas. */
  body:has(.pwr-landing){background:transparent;position:relative}
  body:has(.pwr-landing)::before{content:'';position:absolute;inset:0;
    z-index:-1;background:var(--pwr-bg);pointer-events:none}
  /* r15: the old "canvas is always dark on touch" rule (r9) was removed. It
     dated from the dark-footer era; once the footer took the mode colour it
     turned into a black strip under a light footer. The canvas now follows the
     mode everywhere via html{background:var(--pwr-bg)} at the top of this
     file: light in sun mode, cream in cloudy, dark in rainy. */
}

/* viewport-fit=cover (layout.twig) extends the page behind the home
   indicator; keep the weather switch in the bottom corner above that line.
   Browsers without env() drop the line and keep the previous bottom value. */
.pwr-wx{bottom:calc(16px + env(safe-area-inset-bottom))}
@media (max-width:560px){
  .pwr-wx{bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* ---- r11: in cloudy mode the footer follows the light palette and the
   canvas chain follows it too, so no dark canvas or overscroll area is left
   under a light footer. The dark footer in sun and dark mode was already
   correct and was NOT touched. Colours are the site cloudy palette:
   background #e6e4dd, card #f2f0e9, ink #2e3037, muted #5e6474. Placing this
   block last is deliberate: source order plus specificity let it override the
   dark-canvas touch rules in cloudy mode. ---- */
/* r16: on pages WITH a footer the canvas matches the footer cream (#f2f0e9)
   exactly; on signed-in (footerless) pages it stays body cream (#e6e4dd). */
html[data-pwr-mode="cloudy"]{background:#f2f0e9}
html[data-pwr-mode="cloudy"]:has(.navbar a[href="/logout"]){background:#e6e4dd}
html[data-pwr-mode="cloudy"] .pwr-foot{background:#f2f0e9;color:#5e6474}
html[data-pwr-mode="cloudy"] .pwr-foot a{color:#5e6474}
html[data-pwr-mode="cloudy"] .pwr-foot a:hover,
html[data-pwr-mode="cloudy"] .pwr-foot a:focus{color:#2e3037}
html[data-pwr-mode="cloudy"] .pwr-foot h2{color:#2e3037}
html[data-pwr-mode="cloudy"] .pwr-foot .pf-name{color:#2e3037}
html[data-pwr-mode="cloudy"] .pwr-foot .pf-lead{color:#5e6474}
html[data-pwr-mode="cloudy"] .pwr-foot .pf-note{color:#8a8577}
html[data-pwr-mode="cloudy"] .pwr-foot .pf-bar{border-top-color:rgba(46,48,55,.14);color:#8a8577}

/* ---- r13: the footer now takes the tone of whichever mode is active -
   light in sun mode (below), cream in cloudy (above), dark in rainy (base
   design). The selector is written as ":not(rainy):not(cloudy)" because on the
   FIRST paint the data-pwr-mode attribute may not be on html yet and the
   default must count as sun mode; that form also excludes cloudy and rainy by
   itself, so there is no specificity race. The rainy dark footer was
   deliberately left alone. */
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot{background:#ffffff;color:#6f7587}
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot a{color:#6f7587}
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot a:hover,
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot a:focus{color:#14161d}
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot h2{color:#14161d}
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot .pf-name{color:#14161d}
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot .pf-lead{color:#6f7587}
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot .pf-note{color:#9aa0ad}
html:not([data-pwr-mode="rainy"]):not([data-pwr-mode="cloudy"]) .pwr-foot .pf-bar{border-top-color:rgba(20,22,29,.12);color:#9aa0ad}

/* r17: when a manually processed payment method is selected, the panel
   injects its own #instruction_instruction block. Ours is empty and adds
   nothing but an "Instruction" label, and it does not come from the template,
   so it is hidden in CSS. The card flow runs through our pwr-card-note (Open a
   ticket) block instead. If a method ever gets a real instruction to show,
   this rule must be removed. */
#instruction_instruction{display:none!important}


/* r20: sun mode is FULL WHITE everywhere. The r19 fix (table header) was
   already correct; the remaining greys were the palette itself. The canvas,
   .pwr-wm and the mobile painter all read var(--pwr-bg), so moving it from
   #f6f7fb to #ffffff whitened all three at once; the sun footer and the
   badge/box backgrounds followed. Remaining Bootstrap leftovers - pre
   (#f5f5f5) and disabled/readonly form controls (#eee) - are whitened below.
   The cloudy and rainy palettes were NOT touched (rule: canvas = footer, one
   palette per mode). */
html:not([data-pwr-mode="cloudy"]):not([data-pwr-mode="rainy"]) pre{background:#fff}
html:not([data-pwr-mode="cloudy"]):not([data-pwr-mode="rainy"]) .form-control[disabled],
html:not([data-pwr-mode="cloudy"]):not([data-pwr-mode="rainy"]) .form-control[readonly],
html:not([data-pwr-mode="cloudy"]):not([data-pwr-mode="rainy"]) fieldset[disabled] .form-control{background:#fff}

/* r21 (Aug 5): the currency menu carries 58 entries. In a single column it ran
   far past the fold and covered the page, so it is laid out as a compact GRID
   that fits in one screen without scrolling.
   Targeting: the menu is identified by its own links (a[data-rate-key]) rather
   than by position, so the category dropdown next to it is untouched.
   The grid is applied only while the menu is OPEN - Bootstrap toggles
   .open > .dropdown-menu to display:block, and that is the rule being replaced.
   Colours, hover and mode palettes come from the existing .dropdown-menu rules
   above; only layout is added here. */
.open > .dropdown-menu.pwr-cur-menu,
.dropdown-menu.pwr-cur-menu.pwr-cur-open {
  display: grid;
  grid-template-columns: repeat(6, minmax(88px, 1fr));
  gap: 2px;
  /* align with the trigger's left edge; script.js nudges the block back inside
     the viewport if that would push it off an edge */
  left: 0;
  right: auto;
  width: auto;
  max-width: calc(100vw - 20px);
  /* safety net: if a future list grows beyond one screen it scrolls inside
     itself instead of stretching the page */
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dropdown-menu.pwr-cur-menu > li > a {
  padding: 7px 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 991px) {
  .open > .dropdown-menu.pwr-cur-menu,
  .dropdown-menu.pwr-cur-menu.pwr-cur-open { grid-template-columns: repeat(5, minmax(76px, 1fr)); }
}
@media (max-width: 767px) {
  .open > .dropdown-menu.pwr-cur-menu,
  .dropdown-menu.pwr-cur-menu.pwr-cur-open {
    grid-template-columns: repeat(4, minmax(68px, 1fr));
    max-height: min(64vh, 440px);
  }
  .dropdown-menu.pwr-cur-menu > li > a { padding: 7px 5px; font-size: 12px }
}


/* r22 (Aug 5): in the service dropdown the ID badge is as wide as its content, so
   a long badge ("VIP SERVICES") and a short one ("8") pushed the service name and
   the price to different x positions on every row - the list read as ragged.
   The badge gets a fixed minimum width ONLY inside the open results list, so every
   row starts its text at the same place. The closed selection box is deliberately
   left alone: it holds a single value and looks correct as is. */
/* r22 revised: forcing the badge itself to a fixed width made a one-digit ID sit
   inside a 92px grey block - aligned, but visually top-heavy. Instead the badge
   keeps its natural size and is taken out of the flow; the row reserves a fixed
   left gutter, so every service name and price still starts at the same x. */


/* r22 (Aug 5): the service ID badge used the panel's grey .badge fill, which sat
   heavy next to the service name. It now carries the brand red with white text,
   so the ID reads as part of our identity instead of a leftover chip. The red is
   the same in all three display modes - it is brand, not palette. */
.select2-selection__id,
span[class*="select2-selection__id-"] {
  background: var(--pwr-red) !important;
  background-color: var(--pwr-red) !important;
  color: #fff !important;
}

/* Service ID badge in the orders table (added by script.js from data-svc): the
   table never printed the ID, so a row could not be matched back to the price
   list. Brand red, same reading as the ID badge elsewhere. */
.pwr-ord-id {
  display: inline-block;
  background: var(--pwr-red);
  color: #fff;
  border-radius: 7px;
  padding: 2px 8px;
  margin-right: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Service name that script.js recovers for rows whose service no longer exists
   (see pwr-order-id). Sits right after the ID badge and reads exactly like the
   name the panel prints itself, so a row looks the same either way. */
.pwr-ord-name {
  vertical-align: middle;
}

/* Service ID badge in the price list (script.js wraps the ID text in .pwr-id-tag).
   Same brand-red pill as the orders table and the new order dropdown, so the ID
   reads the same way wherever it appears. */
.pwr-id-tag {
  display: inline-block;
  background: var(--pwr-red);
  color: #fff;
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
@keyframes pc-at{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* --- panel: Crisp 360x610 (normal) / 400x730 (wide screen) */
@keyframes pc-input{0%{opacity:0;transform:translateY(3%)}100%{opacity:1;transform:none}}
@keyframes pc-zip{0%,50%{transform:translateY(0)}75%{transform:translateY(-5px)}100%{transform:translateY(0)}}


/* ---- Appearance mode switch in the top menu -----------------------------
   In the bottom right corner it collided with the chat launcher; it is now a
   list item in the navbar next to Blog / Affiliates.

   Alignment: the neighbouring menu items are 56px high with their centres at
   28px, so the box is given the same height and centred vertically (before
   measuring it hung 14px too high).

   Icons: the emoji in layout.twig looked crude next to the thin grey menu
   typography. The emoji is hidden with font-size:0 and replaced by line icons
   that inherit the menu colour - no template change needed. */
.navbar .pwr-wx-li{display:flex;align-items:center;height:56px;float:left}

.navbar .pwr-wx{position:static;right:auto;bottom:auto;z-index:auto;
  background:transparent;border:0;box-shadow:none;padding:0;margin-left:10px;gap:1px}
.navbar .pwr-wx button{position:relative;width:32px;height:30px;padding:0;border-radius:9px;
  font-size:0;line-height:0;opacity:1;color:var(--pwr-muted,#6f7587);background:transparent;
  transition:color .12s ease, background-color .12s ease}
.navbar .pwr-wx button::before{content:'';position:absolute;inset:0;background-color:currentColor;
  -webkit-mask:var(--pwr-ik) center/17px 17px no-repeat;mask:var(--pwr-ik) center/17px 17px no-repeat}
.navbar .pwr-wx button:hover{color:var(--pwr-ink,#14161d);background:var(--pwr-bg,#f6f7fb)}
.navbar .pwr-wx button.pwr-wx-on{color:var(--pwr-red,#E11733);background:#fde8ec;box-shadow:none}
.navbar .pwr-wx button[data-mode="sunny"]{--pwr-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.2v2.2M12 19.6v2.2M4.6 4.6l1.6 1.6M17.8 17.8l1.6 1.6M2.2 12h2.2M19.6 12h2.2M4.6 19.4l1.6-1.6M17.8 6.2l1.6-1.6'/%3E%3C/svg%3E")}
.navbar .pwr-wx button[data-mode="cloudy"]{--pwr-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 8.6a4.3 4.3 0 0 1 8.1 1.5'/%3E%3Cpath d='M17.2 19H7a4 4 0 0 1 0-8 4.6 4.6 0 0 1 .6 0A4.3 4.3 0 0 1 16 10.2h1.2a4.4 4.4 0 0 1 0 8.8z'/%3E%3C/svg%3E")}
/* Dark mode = night: a moon instead of a rain cloud (user request). */
.navbar .pwr-wx button[data-mode="rainy"]{--pwr-ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 13.3A8.6 8.6 0 0 1 10.7 3.2a8.6 8.6 0 1 0 10.1 10.1z'/%3E%3C/svg%3E")}
html[data-pwr-mode="cloudy"] .navbar .pwr-wx,
html[data-pwr-mode="rainy"] .navbar .pwr-wx{background:transparent;border:0;box-shadow:none}
html[data-pwr-mode="rainy"] .navbar .pwr-wx button{color:#98a0b3}
html[data-pwr-mode="rainy"] .navbar .pwr-wx button:hover{color:#e2e5ee;background:#1a1d26}
html[data-pwr-mode="rainy"] .navbar .pwr-wx button.pwr-wx-on{color:#ff6b80;background:rgba(225,23,51,.18)}
/* when the menu collapses into the hamburger, keep this on its own row */
@media (max-width:767px){
  .navbar .pwr-wx-li{height:auto;padding:8px 15px;float:none}
  .navbar .pwr-wx{margin-left:0}
}


/* ================================================================
   SIGNED-IN NAVBAR  (replaces the earlier breakpoint ladder)

   WHY: the menu grew to 14 items (New order / Services / Orders /
   Subscriptions / Drip-feed / Refill / Add funds / Refunds / API /
   Affiliates / Child panel / Tickets / Mass order / Updates).
   The panel's OWN script.js measures ONCE on page load:
       sumWidth = right + left + brand + 30;
       if (sumWidth > $(window).width())  nav.addClass('navbar-collapsed-before');
   That class collapses the bar to a hamburger INDEPENDENTLY of media queries.
   The user's screen is 1920 physical / 125% Windows scaling = 1536 CSS px
   (body 1521) and the 14-item menu landed exactly above that limit, so the
   menu disappeared at 100% zoom and came back when zoomed out.

   FIX (two layers):
   1) The ladder was re-measured for 14 items:
        >=1900     roomy default (untouched, measured need 1898)
        1600-1899  step A: 13px / 9px side padding   (need ~1471)
        1300-1599  step B: 12px / 5px side padding   (need ~1230)
        <1300      dropdown menu (Bootstrap 3's 767px threshold moved here)
   2) At >=1300 the panel's JS collapser is NEUTRALISED: the
      .navbar-collapsed-before rules are reverted, so even if its measurement
      is wrong the desktop menu stays horizontal (late font loading inflated
      the measurement).

   The menu block is also CENTRED (user: "the new order part is too far left"):
   container-fluid flex, the left menu is centred between the logo and the
   account block with auto margins.

   Scope: signed-in navbar only -> html:has(.navbar a[href="/logout"])
   ================================================================ */

/* ---------- MASAUSTU (>=1300): yatay, ortali, JS daralticisi etkisiz ---------- */
@media (min-width:1300px){
  html:has(.navbar a[href="/logout"]) .navbar>.container-fluid{
    display:flex;align-items:center;flex-wrap:nowrap}
  /* the #navbar box is removed (display:contents) -> logo, menu and account
     block become 3 columns of the same flex row; the side columns share equal
     space, so the menu sits in the MIDDLE OF THE SCREEN. If the side content is
     wider than its share (narrow screen) it takes its own width, the menu
     shifts left but never OVERFLOWS. */
  /* the logo is CENTRED in its own column (user: "centre the logo too, pull it
     a little further right") - on a narrow screen the column shrinks to the
     content and it falls back to the left automatically */
  html:has(.navbar a[href="/logout"]) .navbar-header{
    float:none;display:flex;align-items:center;justify-content:center;flex:1 1 0;width:auto}
  html:has(.navbar a[href="/logout"]) #navbar{
    display:contents!important;height:auto!important;overflow:visible!important;
    border-top:0;box-shadow:none}
  html:has(.navbar a[href="/logout"]) .navbar-left-block{
    float:none;display:flex;align-items:center;flex:0 0 auto;margin:0;width:auto}
  html:has(.navbar a[href="/logout"]) .navbar-right-block{
    float:none!important;display:flex;align-items:center;justify-content:flex-end;
    flex:1 1 0;margin:0;width:auto}
  html:has(.navbar a[href="/logout"]) .navbar-nav>li{float:none;width:auto}
  html:has(.navbar a[href="/logout"]) .navbar-nav>li>a{white-space:nowrap}
  /* panelin JS daralticisini masaustunde geri al */
  html:has(.navbar a[href="/logout"]) .navbar-toggle{display:none!important}
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-header{width:auto}
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-nav{width:auto}
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-nav li{width:auto}
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-right{width:auto;float:none!important}
}

/* ---------- A kademesi: 1600-1899 ---------- */
@media (min-width:1600px) and (max-width:1979px){
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-nav>li>a{margin:8px 1px;padding:10px 9px;font-size:13px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand{padding-left:12px;padding-right:6px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand>img{max-height:40px}
  html:has(.navbar a[href="/logout"]) .navbar-default .badge{padding:5px 9px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx{margin-left:4px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx button{width:27px}
}

/* ---------- step B: 1300-1599 ----------
   Three sub-steps. The user twice said "the labels are too close together":
     1500-1599 : left menu side padding 11px -> 22px between items (menu 997px)
     1440-1499 : side padding 8px  -> 16px between items (menu 913px)
     1300-1439 : side padding 5px  -> 10px between items (menu 829px) - tight,
                 anything wider OVERFLOWS
   There are 14 items: every 1px of side padding costs 28px in total.
   CENTRING TRADE-OFF: past 912px the menu starts drifting off centre, because
   centring requires the side columns to be >= the account block (~273px)
   (1488 - 2x273 = 942). That is why the wide padding was given to the LEFT menu
   only and the right-hand Account/Logout kept at 6px: every 1px on the right
   costs 2px of centring.
   Measured (1536): menu 997, logo-to-menu gap 62px, centre offset -27px.
   Raising the side padding to 12px pushed the menu to 1025 and cut the logo gap
   to 30px (the menu sticks to the logo) - tried and reverted. */
@media (min-width:1500px) and (max-width:1599px){
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-nav>li>a{margin:8px 0;padding:10px 8px;font-size:12px}
  /* The slack goes to the LEFT menu; the account block on the right stays
     tight, so the menu is both widely spaced and barely off centre (every 1px
     of right-hand padding costs 2px of centring). */
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-left-block>li>a{padding-left:11px;padding-right:11px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-right-block>li>a{padding-left:6px;padding-right:6px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand{padding-left:10px;padding-right:4px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand>img{max-height:38px}
  html:has(.navbar a[href="/logout"]) .navbar-default .badge{padding:4px 7px;font-size:11px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx{margin-left:2px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx button{width:24px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx-li{padding-left:2px}
}
@media (min-width:1440px) and (max-width:1499px){
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-nav>li>a{margin:8px 0;padding:10px 8px;font-size:12px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand{padding-left:10px;padding-right:4px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand>img{max-height:38px}
  html:has(.navbar a[href="/logout"]) .navbar-default .badge{padding:4px 7px;font-size:11px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx{margin-left:2px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx button{width:24px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx-li{padding-left:2px}
}
@media (min-width:1300px) and (max-width:1439px){
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-nav>li>a{margin:8px 0;padding:10px 5px;font-size:12px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand{padding-left:10px;padding-right:4px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand>img{max-height:38px}
  html:has(.navbar a[href="/logout"]) .navbar-default .badge{padding:4px 7px;font-size:11px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx{margin-left:2px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx button{width:24px}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx-li{padding-left:2px}
}

/* ---------- <1300: collapsed (hamburger) menu ---------- */
@media (max-width:1299px){
  html:has(.navbar a[href="/logout"]) .navbar-header{float:none}
  html:has(.navbar a[href="/logout"]) .navbar-toggle{display:block}
  html:has(.navbar a[href="/logout"]) .navbar-collapse{border-top:1px solid rgba(0,0,0,.07);max-height:80vh;overflow-y:auto}
  html:has(.navbar a[href="/logout"]) .navbar-collapse.collapse{display:none!important}
  html:has(.navbar a[href="/logout"]) .navbar-collapse.collapse.in{display:block!important}
  html:has(.navbar a[href="/logout"]) .navbar-nav{float:none!important;margin:7px -15px}
  html:has(.navbar a[href="/logout"]) .navbar-nav>li{float:none}
  html:has(.navbar a[href="/logout"]) .navbar-nav.navbar-right{float:none!important;margin-right:-15px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-nav>li>a{margin:2px 6px;padding:11px 14px}
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-nav .badge{display:inline-block}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx-li{height:auto;padding:8px 15px;float:none}
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx{margin-left:0}
}


/* ================================================================
   LEFT MENU (LAYOUT ONLY)
   DO NOT TOUCH COLOURS (user instruction): background / text / active pill
   colour all come FROM THE THEME.
   User reference: the reference panel ("make it exactly like that").
   Structure: solid coloured left column - WHITE logo block on top - white menu
   text - active item as a WHITE PILL - balance/Account/Logout on a white strip
   ABOVE THE RIGHT of the content.
   Twig is NOT TOUCHED - CSS only. Scope: signed in + >=1300px.
   ================================================================ */
@media (min-width:1300px){

  html:has(.navbar a[href="/logout"]) body{ padding-left:252px; padding-top:88px; }

  /* ---------- sol kolon ---------- */
  html:has(.navbar a[href="/logout"]) .navbar{
    position:fixed; top:0; left:0; bottom:0; width:252px; margin:0;
    border-radius:0;
    z-index:1030; overflow-y:auto; overflow-x:hidden;
  }
  html:has(.navbar a[href="/logout"]) .navbar>.container-fluid{
    display:flex; flex-direction:column; align-items:stretch;
    min-height:100%; width:100%; padding:0; margin:0;
  }

  /* ---------- white logo block on top ---------- */
  /* NOTE: the horizontal ladder from 11 Aug gives .navbar-header flex:1 1 0.
     In a VERTICAL column that stretched the logo block across the whole gap
     and made it 178px wide, so it is pinned to a fixed size here. */
  html:has(.navbar a[href="/logout"]) .navbar-header{
    float:none; display:flex; align-items:center; justify-content:flex-start; width:auto;
    flex:0 0 88px; height:88px; min-height:0; max-height:88px;
    padding:0 16px; margin:0; overflow:hidden;
  }
  html:has(.navbar a[href="/logout"]) .navbar-brand{
    float:none; display:flex; align-items:center; justify-content:center;
    width:100%; height:auto; line-height:1; padding:0; margin:0;
  }
  /* NOTE: the earlier ladder contains ".navbar-default .navbar-brand>img{max-height:38px}";
     its specificity is higher and kept the logo small -> override with the SAME specificity. */
  /* KNOWN TRAP: a PNG from our own server was linked with content:url but it
     DID NOT LOAD on the panel's page -> the img alt text ("SMM PWR") showed
     instead and the user reported it repeatedly. Reverted to the panel's OWN
     logo (same origin, always loads), only enlarged. DO NOT USE content:url. */
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand>img,
  html:has(.navbar a[href="/logout"]) .navbar-brand>img{
    width:auto; max-width:190px; max-height:64px; height:auto;
  }
  /* keeps the alt text from showing broken when the logo fails to load */
  html:has(.navbar a[href="/logout"]) .navbar-brand{ font-size:0; }
  html:has(.navbar a[href="/logout"]) .navbar-brand>img{ font-size:0; color:transparent; }
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-brand{ padding:0; margin:0; width:100%; }

  /* ---------- menu govdesi ---------- */
  html:has(.navbar a[href="/logout"]) #navbar{
    display:flex!important; flex-direction:column; flex:1 1 auto;
    width:100%; height:auto!important; max-height:none;
    padding:14px 0 0; margin:0; overflow:visible!important; border:0; box-shadow:none;
  }
  html:has(.navbar a[href="/logout"]) .navbar-left-block{
    float:none!important; display:block; width:100%; margin:0;
  }
  html:has(.navbar a[href="/logout"]) .navbar-nav{ float:none!important; width:100%; margin:0; }
  html:has(.navbar a[href="/logout"]) .navbar-nav>li{ float:none; display:block; width:100%; }

  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-nav>li>a{
    display:block; margin:3px 12px; padding:11px 18px;
    font-size:14px; font-weight:600; line-height:1.2; letter-spacing:.1px;
    white-space:nowrap;
  }
  
  /* ---------- balance + Account + Logout: white strip ABOVE THE CONTENT, right ---------- */
  html:has(.navbar a[href="/logout"]) .navbar-right-block{
    position:fixed; top:0; left:252px; right:0; height:88px; z-index:1035;
    display:flex; align-items:center; justify-content:flex-end; gap:6px;
    float:none!important; width:auto; margin:0; padding:0 22px 0 12px;
    /* KNOWN TRAP: the strip was FIXED but had NO BACKGROUND -> when the page
       scrolled, content text passed underneath and tangled with
       Account/Logout/balance (user reported). Opaque surface + upper layer.
       Not a theme COLOUR change - the strip's own surface. */
    background-color:var(--pwr-bg); border-bottom:1px solid var(--pwr-line);
  }
  /* NOTE: the "collapsed-before li{width:100%}" rule below also applied to the
     RIGHT STRIP, splitting every item into an equal share spread along the bar,
     so it is cancelled for the right block. */
  html:has(.navbar a[href="/logout"]) .navbar-right-block>li,
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-right-block>li{
    float:none; display:block; width:auto!important; flex:0 0 auto;
  }
  html:has(.navbar a[href="/logout"]) .navbar-default .navbar-right-block>li>a{
    display:block; margin:0; padding:8px 12px; font-size:14px; font-weight:600;

  }
    /* CURRENCY PICKER FIX: in the left-menu layout the dropdown landed at y=-104,
     i.e. ABOVE the screen (58 currencies = 340px tall, and the positioning was
     written for the old top navbar). Measured: adding .open gave display=grid
     but x=605 y=-104. Fix: pin the list to the VIEWPORT, right under the strip. */
  html:has(.navbar a[href="/logout"]) .navbar-right-block .dropdown-menu,
  html:has(.navbar a[href="/logout"]) #currencies-list{
    position:fixed!important; top:92px!important; right:18px!important;
    left:auto!important; bottom:auto!important; transform:none!important;
    max-height:72vh; overflow-y:auto; z-index:1050;
    /* TRAP: display:grid had been written UNCONDITIONALLY -> the menu never
       closed. The grid now applies ONLY in the .open state (below). Size and
       colour only here. */
    padding:10px; color:var(--pwr-ink);
    /* NOTE: with position:fixed the list stayed TRANSPARENT: the text of the
       "Fastest services" box underneath bled through it (user reported). This is
       NOT a theme colour change - it restores the dropdown's own opaque surface. */
    background-color:var(--pwr-bg); border:1px solid var(--pwr-line);
    box-shadow:0 14px 38px rgba(0,0,0,.22);
  }
  /* four-column grid when open; when closed Bootstrap's display:none applies */
  html:has(.navbar a[href="/logout"]) .dropdown-currencies.open>.dropdown-menu,
  html:has(.navbar a[href="/logout"]) .open>#currencies-list{
    display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:2px;
  }
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx-li{
    height:auto; float:none; display:flex; align-items:center; padding:0 4px;
  }
  html:has(.navbar a[href="/logout"]) .navbar .pwr-wx{ margin-left:0; }

  /* ---------- panelin JS daralticisi etkisiz ---------- */
  html:has(.navbar a[href="/logout"]) .navbar-toggle{ display:none!important; }
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-header{ width:auto; }
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-nav,
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-nav li{ width:100%; }
  html:has(.navbar a[href="/logout"]) .navbar-collapsed-before .navbar-right{ width:auto; float:none!important; }

  /* ---------- SEARCH BOX: the reference panel pattern (measured) ----------
     the reference panel: input 48px high - borderless - 8px radius (left) - 14px text -
     button 46x48 with 8px radius (right) - all inside a white card with 24px
     padding.
     COLOURS FROM THE THEME: a neutral translucent layer for the input surface
     (works in both dark and light mode); the button keeps the theme's own colour. */
  html:has(.navbar a[href="/logout"]) .input-group .form-control,
  html:has(.navbar a[href="/logout"]) input[name="search"],
  html:has(.navbar a[href="/logout"]) #history-search .form-control{
    height:48px; font-size:14px; padding:0 14px;
    border-radius:8px 0 0 8px;
    /* DO NOT set background/border here - so the field looks identical to the
       ones on New order, the theme's own .form-control surface is used (white in
       light mode, dark in dark mode). The earlier "rgba(128,128,128,.10)" layer
       was REMOVED. */
  }
  html:has(.navbar a[href="/logout"]) .input-group .input-group-btn .btn,
  html:has(.navbar a[href="/logout"]) #history-search .btn{
    height:48px; min-width:46px; border:0; border-radius:0 8px 8px 0;
  }
  html:has(.navbar a[href="/logout"]) .input-group{ width:100%; }
  /* the search box stayed SHORT (the reference panel uses 841px). The whole container chain is
     opened to full width so the box stretches to the end of the row. */
  html:has(.navbar a[href="/logout"]) #history-search,
  html:has(.navbar a[href="/logout"]) form[action*="orders"],
  html:has(.navbar a[href="/logout"]) .nav-pills .search,
  html:has(.navbar a[href="/logout"]) li.search{
    width:100%; max-width:none; float:none; display:block;
  }
  html:has(.navbar a[href="/logout"]) .input-group .form-control{ width:100%; }


  /* ---------- NEW ORDER PLATFORM BOXES (the reference panel measurements: 135x42, 8px radius) ----------
     COLOURS FROM THE THEME: background/text use the var(--pwr-*) variables, the
     selected one uses the theme's red. No hard-coded colour, so it works in both
     dark and light mode. */
  html:has(.navbar a[href="/logout"]) .pwr-platforms{
    display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px;
  }
  /* 25 Aug 2026 - user: "just the category image", the count must go.
     The chip is now an icon-only square at EVERY width (phones were already
     like this since the 25 Aug mobile pass).
     ⛔ min-width:135px was sized for "icon + name + count"; with the text gone
        it would leave a wide empty box. */
  html:has(.navbar a[href="/logout"]) .pwr-plat{
    display:inline-flex; align-items:center; justify-content:center;
    width:60px; min-width:0; height:60px; padding:0;
    border:1px solid var(--pwr-line); border-radius:12px;
    /* correction: the box had been made red; the user said "no, do not make the
       boxes red, I meant the NUMBERS inside them" -> plain box, theme colours. */
    background:transparent; color:var(--pwr-ink); overflow:hidden;
  }
  /* name and count hidden - icon only.
     ⛔ Hide the direct spans as well: if the class names are renamed in
        script.js (which happened on 14 Aug 2026) this safety net still holds. */
  html:has(.navbar a[href="/logout"]) .pwr-plat > span{ display:none }
  html:has(.navbar a[href="/logout"]) .pwr-plat .fab,
  html:has(.navbar a[href="/logout"]) .pwr-plat .fas{ font-size:24px; opacity:1 }
  /* The class names are pwr-plat-name / pwr-plat-counts, written by script.js.
     They used to be pwr-plat-ad / pwr-plat-say; the rename landed in the script
     but not here, so from 14 to 15 Aug 2026 these two rules matched nothing and
     the chips lost their layout (see the phone rule further down). */
  /* 25 Aug 2026: name and count hidden - "just the category image".
     The old rules (name flex + red count pill) are kept in git history; if the
     labels ever come back, restore them from the 24 Aug version. */
  html:has(.navbar a[href="/logout"]) .pwr-plat-name,
  html:has(.navbar a[href="/logout"]) .pwr-plat-counts{ display:none }
  html:has(.navbar a[href="/logout"]) .pwr-plat.pwr-selected{
    border-color:var(--pwr-red); color:var(--pwr-red);
  }
  /* ---------- content: the reference panel pattern (10 of its tabs measured, all identical) ----------
     the reference panel: 250px sidebar - page background rgb(234,242,241) - content at x=265
     (15px after the bar) - white cards with 8px radius. Ours uses a light tone
     tinted towards the brand red. */
    html:has(.navbar a[href="/logout"]) .container{
    width:auto; max-width:none; margin-left:15px; margin-right:15px;
  }
  }

/* ================================================================
   SIGN-IN SCREEN LOGO 50% LARGER (user instruction)
   Measured: .pl-brand 171x40 -> about 257x60 once enlarged by 50%.
   transform:scale is used so the mark (SVG) and the wordmark grow together
   without breaking their PROPORTIONS; not a single measurement is edited by
   hand and COLOURS are not touched.
   Scope: the sign-in screen only (.pl-brand exists on no other page).
   ================================================================ */
.pl-brand{
  transform:scale(1.5);
  transform-origin:left center;
  will-change:transform;
}
@media (max-width:920px){
  /* 1.5x overflows on a phone - 1.25x is enough there */
  .pl-brand{ transform:scale(1.25); }

}

/* ================================================================
   PLATFORM BOXES ON PHONES: ICON ONLY  (user request, 25 Aug 2026)
   "on the phone show only the category icons, no labels - it is too crowded"

   History, so nobody flip-flops this again:
     16 Aug - icon-only 46x46 squares (first request: "on the phone show only
              the icon, it looks bad")
     24 Aug - name + count came back in a 2-3 column grid, because the user
              asked to "fit 2-3 columns" and 16 bare icons were hard to tell
              apart (BlueSky cloud vs Website globe vs Report flag)
     25 Aug - user wants the clean look again -> labels hidden once more.
              THIS IS THE CURRENT INTENT. Do not "improve" it by adding the
              names back without being asked.

   ⛔ NOT the old fixed-46px flex-wrap: the platform count grew to 20, and at a
      fixed width the last row ends up ragged. auto-fill fills each row to the
      full width, so the block reads as a tidy icon strip.
   ⛔ The chip only ever holds <i> + two <span>s, so hiding every direct span
      keeps this correct even if the class names are renamed in script.js
      (exactly what silently broke on 14 Aug 2026).
   ================================================================ */
@media (max-width:780px){
  .pwr-platforms{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
    gap:8px; margin:0 0 16px;
  }
  .pwr-plat{
    display:inline-flex; align-items:center; justify-content:center;
    width:auto; min-width:0; height:56px; padding:0;
    border:1px solid var(--pwr-line); border-radius:12px;
    background:transparent; color:var(--pwr-ink); overflow:hidden;
  }
  /* name and count hidden - icon only on phones */
  .pwr-plat > span{ display:none; }
  .pwr-plat .pwr-plat-name,
  .pwr-plat .pwr-plat-counts{ display:none; }
  .pwr-plat .fab, .pwr-plat .fas{ font-size:23px; opacity:1; }
  .pwr-plat.pwr-selected{ border-color:var(--pwr-red); }
}

/* ================================================================
   PLATFORM CHIPS BETWEEN THE PHONE AND THE SIDEBAR LAYOUT (781-1299px)
   The full chip styling lives inside the >=1300px sidebar block and the
   icon-only variant inside the <=780px one, so tablets and landscape phones
   fell through the gap with completely unstyled buttons: the name and the
   count ran together as "Instagram141" / "Kick11" (reported 15 Aug 2026).
   Same design as the desktop chip, only more compact so twelve of them still
   fit a narrow content column. The width bounds mean this cannot leak onto
   phones, so the html:has(...) guard used by the desktop block is not needed.
   ================================================================ */
@media (min-width:781px) and (max-width:1299px){
  .pwr-platforms{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
  /* 25 Aug 2026: icon only here too - "just the category image". */
  .pwr-plat{
    display:inline-flex; align-items:center; justify-content:center;
    width:54px; height:54px; padding:0;
    border:1px solid var(--pwr-line); border-radius:12px;
    background:transparent; color:var(--pwr-ink); overflow:hidden;
  }
  .pwr-plat .fab, .pwr-plat .fas{ font-size:22px; opacity:1; }
  .pwr-plat > span{ display:none; }
  .pwr-plat .pwr-plat-name,
  .pwr-plat .pwr-plat-counts{ display:none; }
  .pwr-plat.pwr-selected{ border-color:var(--pwr-red); color:var(--pwr-red); }
}


/* PWR-DARKPAL-v1 */
/* Tailwind colour palette - badge/status utilities (wins over sa_, end of file) */
.bg-white{background-color:#fff}.bg-black{background-color:#000}.text-white{color:#fff}.text-black{color:#000}.border-white{border-color:#fff}.border-black{border-color:#000}
.bg-slate-50{background-color:#f8fafc}.text-slate-50{color:#f8fafc}.border-slate-50{border-color:#f8fafc}
.bg-slate-100{background-color:#f1f5f9}.text-slate-100{color:#f1f5f9}.border-slate-100{border-color:#f1f5f9}
.bg-slate-200{background-color:#e2e8f0}.text-slate-200{color:#e2e8f0}.border-slate-200{border-color:#e2e8f0}
.bg-slate-300{background-color:#cbd5e1}.text-slate-300{color:#cbd5e1}.border-slate-300{border-color:#cbd5e1}
.bg-slate-400{background-color:#94a3b8}.text-slate-400{color:#94a3b8}.border-slate-400{border-color:#94a3b8}
.bg-slate-500{background-color:#64748b}.text-slate-500{color:#64748b}.border-slate-500{border-color:#64748b}
.bg-slate-600{background-color:#475569}.text-slate-600{color:#475569}.border-slate-600{border-color:#475569}
.bg-slate-700{background-color:#334155}.text-slate-700{color:#334155}.border-slate-700{border-color:#334155}
.bg-slate-800{background-color:#1e293b}.text-slate-800{color:#1e293b}.border-slate-800{border-color:#1e293b}
.bg-slate-900{background-color:#0f172a}.text-slate-900{color:#0f172a}.border-slate-900{border-color:#0f172a}
.bg-gray-50{background-color:#f9fafb}.text-gray-50{color:#f9fafb}.border-gray-50{border-color:#f9fafb}
.bg-gray-100{background-color:#f3f4f6}.text-gray-100{color:#f3f4f6}.border-gray-100{border-color:#f3f4f6}
.bg-gray-200{background-color:#e5e7eb}.text-gray-200{color:#e5e7eb}.border-gray-200{border-color:#e5e7eb}
.bg-gray-300{background-color:#d1d5db}.text-gray-300{color:#d1d5db}.border-gray-300{border-color:#d1d5db}
.bg-gray-400{background-color:#9ca3af}.text-gray-400{color:#9ca3af}.border-gray-400{border-color:#9ca3af}
.bg-gray-500{background-color:#6b7280}.text-gray-500{color:#6b7280}.border-gray-500{border-color:#6b7280}
.bg-gray-600{background-color:#4b5563}.text-gray-600{color:#4b5563}.border-gray-600{border-color:#4b5563}
.bg-gray-700{background-color:#374151}.text-gray-700{color:#374151}.border-gray-700{border-color:#374151}
.bg-gray-800{background-color:#1f2937}.text-gray-800{color:#1f2937}.border-gray-800{border-color:#1f2937}
.bg-gray-900{background-color:#111827}.text-gray-900{color:#111827}.border-gray-900{border-color:#111827}
.bg-red-50{background-color:#fef2f2}.text-red-50{color:#fef2f2}.border-red-50{border-color:#fef2f2}
.bg-red-100{background-color:#fee2e2}.text-red-100{color:#fee2e2}.border-red-100{border-color:#fee2e2}
.bg-red-200{background-color:#fecaca}.text-red-200{color:#fecaca}.border-red-200{border-color:#fecaca}
.bg-red-300{background-color:#fca5a5}.text-red-300{color:#fca5a5}.border-red-300{border-color:#fca5a5}
.bg-red-400{background-color:#f87171}.text-red-400{color:#f87171}.border-red-400{border-color:#f87171}
.bg-red-500{background-color:#ef4444}.text-red-500{color:#ef4444}.border-red-500{border-color:#ef4444}
.bg-red-600{background-color:#dc2626}.text-red-600{color:#dc2626}.border-red-600{border-color:#dc2626}
.bg-red-700{background-color:#b91c1c}.text-red-700{color:#b91c1c}.border-red-700{border-color:#b91c1c}
.bg-red-800{background-color:#991b1b}.text-red-800{color:#991b1b}.border-red-800{border-color:#991b1b}
.bg-red-900{background-color:#7f1d1d}.text-red-900{color:#7f1d1d}.border-red-900{border-color:#7f1d1d}
.bg-orange-50{background-color:#fff7ed}.text-orange-50{color:#fff7ed}.border-orange-50{border-color:#fff7ed}
.bg-orange-100{background-color:#ffedd5}.text-orange-100{color:#ffedd5}.border-orange-100{border-color:#ffedd5}
.bg-orange-200{background-color:#fed7aa}.text-orange-200{color:#fed7aa}.border-orange-200{border-color:#fed7aa}
.bg-orange-300{background-color:#fdba74}.text-orange-300{color:#fdba74}.border-orange-300{border-color:#fdba74}
.bg-orange-400{background-color:#fb923c}.text-orange-400{color:#fb923c}.border-orange-400{border-color:#fb923c}
.bg-orange-500{background-color:#f97316}.text-orange-500{color:#f97316}.border-orange-500{border-color:#f97316}
.bg-orange-600{background-color:#ea580c}.text-orange-600{color:#ea580c}.border-orange-600{border-color:#ea580c}
.bg-orange-700{background-color:#c2410c}.text-orange-700{color:#c2410c}.border-orange-700{border-color:#c2410c}
.bg-orange-800{background-color:#9a3412}.text-orange-800{color:#9a3412}.border-orange-800{border-color:#9a3412}
.bg-orange-900{background-color:#7c2d12}.text-orange-900{color:#7c2d12}.border-orange-900{border-color:#7c2d12}
.bg-amber-50{background-color:#fffbeb}.text-amber-50{color:#fffbeb}.border-amber-50{border-color:#fffbeb}
.bg-amber-100{background-color:#fef3c7}.text-amber-100{color:#fef3c7}.border-amber-100{border-color:#fef3c7}
.bg-amber-200{background-color:#fde68a}.text-amber-200{color:#fde68a}.border-amber-200{border-color:#fde68a}
.bg-amber-300{background-color:#fcd34d}.text-amber-300{color:#fcd34d}.border-amber-300{border-color:#fcd34d}
.bg-amber-400{background-color:#fbbf24}.text-amber-400{color:#fbbf24}.border-amber-400{border-color:#fbbf24}
.bg-amber-500{background-color:#f59e0b}.text-amber-500{color:#f59e0b}.border-amber-500{border-color:#f59e0b}
.bg-amber-600{background-color:#d97706}.text-amber-600{color:#d97706}.border-amber-600{border-color:#d97706}
.bg-amber-700{background-color:#b45309}.text-amber-700{color:#b45309}.border-amber-700{border-color:#b45309}
.bg-amber-800{background-color:#92400e}.text-amber-800{color:#92400e}.border-amber-800{border-color:#92400e}
.bg-amber-900{background-color:#78350f}.text-amber-900{color:#78350f}.border-amber-900{border-color:#78350f}
.bg-yellow-50{background-color:#fefce8}.text-yellow-50{color:#fefce8}.border-yellow-50{border-color:#fefce8}
.bg-yellow-100{background-color:#fef9c3}.text-yellow-100{color:#fef9c3}.border-yellow-100{border-color:#fef9c3}
.bg-yellow-200{background-color:#fef08a}.text-yellow-200{color:#fef08a}.border-yellow-200{border-color:#fef08a}
.bg-yellow-300{background-color:#fde047}.text-yellow-300{color:#fde047}.border-yellow-300{border-color:#fde047}
.bg-yellow-400{background-color:#facc15}.text-yellow-400{color:#facc15}.border-yellow-400{border-color:#facc15}
.bg-yellow-500{background-color:#eab308}.text-yellow-500{color:#eab308}.border-yellow-500{border-color:#eab308}
.bg-yellow-600{background-color:#ca8a04}.text-yellow-600{color:#ca8a04}.border-yellow-600{border-color:#ca8a04}
.bg-yellow-700{background-color:#a16207}.text-yellow-700{color:#a16207}.border-yellow-700{border-color:#a16207}
.bg-yellow-800{background-color:#854d0e}.text-yellow-800{color:#854d0e}.border-yellow-800{border-color:#854d0e}
.bg-yellow-900{background-color:#713f12}.text-yellow-900{color:#713f12}.border-yellow-900{border-color:#713f12}
.bg-green-50{background-color:#f0fdf4}.text-green-50{color:#f0fdf4}.border-green-50{border-color:#f0fdf4}
.bg-green-100{background-color:#dcfce7}.text-green-100{color:#dcfce7}.border-green-100{border-color:#dcfce7}
.bg-green-200{background-color:#bbf7d0}.text-green-200{color:#bbf7d0}.border-green-200{border-color:#bbf7d0}
.bg-green-300{background-color:#86efac}.text-green-300{color:#86efac}.border-green-300{border-color:#86efac}
.bg-green-400{background-color:#4ade80}.text-green-400{color:#4ade80}.border-green-400{border-color:#4ade80}
.bg-green-500{background-color:#22c55e}.text-green-500{color:#22c55e}.border-green-500{border-color:#22c55e}
.bg-green-600{background-color:#16a34a}.text-green-600{color:#16a34a}.border-green-600{border-color:#16a34a}
.bg-green-700{background-color:#15803d}.text-green-700{color:#15803d}.border-green-700{border-color:#15803d}
.bg-green-800{background-color:#166534}.text-green-800{color:#166534}.border-green-800{border-color:#166534}
.bg-green-900{background-color:#14532d}.text-green-900{color:#14532d}.border-green-900{border-color:#14532d}
.bg-emerald-50{background-color:#ecfdf5}.text-emerald-50{color:#ecfdf5}.border-emerald-50{border-color:#ecfdf5}
.bg-emerald-100{background-color:#d1fae5}.text-emerald-100{color:#d1fae5}.border-emerald-100{border-color:#d1fae5}
.bg-emerald-200{background-color:#a7f3d0}.text-emerald-200{color:#a7f3d0}.border-emerald-200{border-color:#a7f3d0}
.bg-emerald-300{background-color:#6ee7b7}.text-emerald-300{color:#6ee7b7}.border-emerald-300{border-color:#6ee7b7}
.bg-emerald-400{background-color:#34d399}.text-emerald-400{color:#34d399}.border-emerald-400{border-color:#34d399}
.bg-emerald-500{background-color:#10b981}.text-emerald-500{color:#10b981}.border-emerald-500{border-color:#10b981}
.bg-emerald-600{background-color:#059669}.text-emerald-600{color:#059669}.border-emerald-600{border-color:#059669}
.bg-emerald-700{background-color:#047857}.text-emerald-700{color:#047857}.border-emerald-700{border-color:#047857}
.bg-emerald-800{background-color:#065f46}.text-emerald-800{color:#065f46}.border-emerald-800{border-color:#065f46}
.bg-emerald-900{background-color:#064e3b}.text-emerald-900{color:#064e3b}.border-emerald-900{border-color:#064e3b}
.bg-teal-50{background-color:#f0fdfa}.text-teal-50{color:#f0fdfa}.border-teal-50{border-color:#f0fdfa}
.bg-teal-100{background-color:#ccfbf1}.text-teal-100{color:#ccfbf1}.border-teal-100{border-color:#ccfbf1}
.bg-teal-200{background-color:#99f6e4}.text-teal-200{color:#99f6e4}.border-teal-200{border-color:#99f6e4}
.bg-teal-300{background-color:#5eead4}.text-teal-300{color:#5eead4}.border-teal-300{border-color:#5eead4}
.bg-teal-400{background-color:#2dd4bf}.text-teal-400{color:#2dd4bf}.border-teal-400{border-color:#2dd4bf}
.bg-teal-500{background-color:#14b8a6}.text-teal-500{color:#14b8a6}.border-teal-500{border-color:#14b8a6}
.bg-teal-600{background-color:#0d9488}.text-teal-600{color:#0d9488}.border-teal-600{border-color:#0d9488}
.bg-teal-700{background-color:#0f766e}.text-teal-700{color:#0f766e}.border-teal-700{border-color:#0f766e}
.bg-teal-800{background-color:#115e59}.text-teal-800{color:#115e59}.border-teal-800{border-color:#115e59}
.bg-teal-900{background-color:#134e4a}.text-teal-900{color:#134e4a}.border-teal-900{border-color:#134e4a}
.bg-sky-50{background-color:#f0f9ff}.text-sky-50{color:#f0f9ff}.border-sky-50{border-color:#f0f9ff}
.bg-sky-100{background-color:#e0f2fe}.text-sky-100{color:#e0f2fe}.border-sky-100{border-color:#e0f2fe}
.bg-sky-200{background-color:#bae6fd}.text-sky-200{color:#bae6fd}.border-sky-200{border-color:#bae6fd}
.bg-sky-300{background-color:#7dd3fc}.text-sky-300{color:#7dd3fc}.border-sky-300{border-color:#7dd3fc}
.bg-sky-400{background-color:#38bdf8}.text-sky-400{color:#38bdf8}.border-sky-400{border-color:#38bdf8}
.bg-sky-500{background-color:#0ea5e9}.text-sky-500{color:#0ea5e9}.border-sky-500{border-color:#0ea5e9}
.bg-sky-600{background-color:#0284c7}.text-sky-600{color:#0284c7}.border-sky-600{border-color:#0284c7}
.bg-sky-700{background-color:#0369a1}.text-sky-700{color:#0369a1}.border-sky-700{border-color:#0369a1}
.bg-sky-800{background-color:#075985}.text-sky-800{color:#075985}.border-sky-800{border-color:#075985}
.bg-sky-900{background-color:#0c4a6e}.text-sky-900{color:#0c4a6e}.border-sky-900{border-color:#0c4a6e}
.bg-blue-50{background-color:#eff6ff}.text-blue-50{color:#eff6ff}.border-blue-50{border-color:#eff6ff}
.bg-blue-100{background-color:#dbeafe}.text-blue-100{color:#dbeafe}.border-blue-100{border-color:#dbeafe}
.bg-blue-200{background-color:#bfdbfe}.text-blue-200{color:#bfdbfe}.border-blue-200{border-color:#bfdbfe}
.bg-blue-300{background-color:#93c5fd}.text-blue-300{color:#93c5fd}.border-blue-300{border-color:#93c5fd}
.bg-blue-400{background-color:#60a5fa}.text-blue-400{color:#60a5fa}.border-blue-400{border-color:#60a5fa}
.bg-blue-500{background-color:#3b82f6}.text-blue-500{color:#3b82f6}.border-blue-500{border-color:#3b82f6}
.bg-blue-600{background-color:#2563eb}.text-blue-600{color:#2563eb}.border-blue-600{border-color:#2563eb}
.bg-blue-700{background-color:#1d4ed8}.text-blue-700{color:#1d4ed8}.border-blue-700{border-color:#1d4ed8}
.bg-blue-800{background-color:#1e40af}.text-blue-800{color:#1e40af}.border-blue-800{border-color:#1e40af}
.bg-blue-900{background-color:#1e3a8a}.text-blue-900{color:#1e3a8a}.border-blue-900{border-color:#1e3a8a}
.bg-indigo-50{background-color:#eef2ff}.text-indigo-50{color:#eef2ff}.border-indigo-50{border-color:#eef2ff}
.bg-indigo-100{background-color:#e0e7ff}.text-indigo-100{color:#e0e7ff}.border-indigo-100{border-color:#e0e7ff}
.bg-indigo-200{background-color:#c7d2fe}.text-indigo-200{color:#c7d2fe}.border-indigo-200{border-color:#c7d2fe}
.bg-indigo-300{background-color:#a5b4fc}.text-indigo-300{color:#a5b4fc}.border-indigo-300{border-color:#a5b4fc}
.bg-indigo-400{background-color:#818cf8}.text-indigo-400{color:#818cf8}.border-indigo-400{border-color:#818cf8}
.bg-indigo-500{background-color:#6366f1}.text-indigo-500{color:#6366f1}.border-indigo-500{border-color:#6366f1}
.bg-indigo-600{background-color:#4f46e5}.text-indigo-600{color:#4f46e5}.border-indigo-600{border-color:#4f46e5}
.bg-indigo-700{background-color:#4338ca}.text-indigo-700{color:#4338ca}.border-indigo-700{border-color:#4338ca}
.bg-indigo-800{background-color:#3730a3}.text-indigo-800{color:#3730a3}.border-indigo-800{border-color:#3730a3}
.bg-indigo-900{background-color:#312e81}.text-indigo-900{color:#312e81}.border-indigo-900{border-color:#312e81}
.bg-violet-50{background-color:#f5f3ff}.text-violet-50{color:#f5f3ff}.border-violet-50{border-color:#f5f3ff}
.bg-violet-100{background-color:#ede9fe}.text-violet-100{color:#ede9fe}.border-violet-100{border-color:#ede9fe}
.bg-violet-200{background-color:#ddd6fe}.text-violet-200{color:#ddd6fe}.border-violet-200{border-color:#ddd6fe}
.bg-violet-300{background-color:#c4b5fd}.text-violet-300{color:#c4b5fd}.border-violet-300{border-color:#c4b5fd}
.bg-violet-400{background-color:#a78bfa}.text-violet-400{color:#a78bfa}.border-violet-400{border-color:#a78bfa}
.bg-violet-500{background-color:#8b5cf6}.text-violet-500{color:#8b5cf6}.border-violet-500{border-color:#8b5cf6}
.bg-violet-600{background-color:#7c3aed}.text-violet-600{color:#7c3aed}.border-violet-600{border-color:#7c3aed}
.bg-violet-700{background-color:#6d28d9}.text-violet-700{color:#6d28d9}.border-violet-700{border-color:#6d28d9}
.bg-violet-800{background-color:#5b21b6}.text-violet-800{color:#5b21b6}.border-violet-800{border-color:#5b21b6}
.bg-violet-900{background-color:#4c1d95}.text-violet-900{color:#4c1d95}.border-violet-900{border-color:#4c1d95}
.bg-purple-50{background-color:#faf5ff}.text-purple-50{color:#faf5ff}.border-purple-50{border-color:#faf5ff}
.bg-purple-100{background-color:#f3e8ff}.text-purple-100{color:#f3e8ff}.border-purple-100{border-color:#f3e8ff}
.bg-purple-200{background-color:#e9d5ff}.text-purple-200{color:#e9d5ff}.border-purple-200{border-color:#e9d5ff}
.bg-purple-300{background-color:#d8b4fe}.text-purple-300{color:#d8b4fe}.border-purple-300{border-color:#d8b4fe}
.bg-purple-400{background-color:#c084fc}.text-purple-400{color:#c084fc}.border-purple-400{border-color:#c084fc}
.bg-purple-500{background-color:#a855f7}.text-purple-500{color:#a855f7}.border-purple-500{border-color:#a855f7}
.bg-purple-600{background-color:#9333ea}.text-purple-600{color:#9333ea}.border-purple-600{border-color:#9333ea}
.bg-purple-700{background-color:#7e22ce}.text-purple-700{color:#7e22ce}.border-purple-700{border-color:#7e22ce}
.bg-purple-800{background-color:#6b21a8}.text-purple-800{color:#6b21a8}.border-purple-800{border-color:#6b21a8}
.bg-purple-900{background-color:#581c87}.text-purple-900{color:#581c87}.border-purple-900{border-color:#581c87}
.bg-pink-50{background-color:#fdf2f8}.text-pink-50{color:#fdf2f8}.border-pink-50{border-color:#fdf2f8}
.bg-pink-100{background-color:#fce7f3}.text-pink-100{color:#fce7f3}.border-pink-100{border-color:#fce7f3}
.bg-pink-200{background-color:#fbcfe8}.text-pink-200{color:#fbcfe8}.border-pink-200{border-color:#fbcfe8}
.bg-pink-300{background-color:#f9a8d4}.text-pink-300{color:#f9a8d4}.border-pink-300{border-color:#f9a8d4}
.bg-pink-400{background-color:#f472b6}.text-pink-400{color:#f472b6}.border-pink-400{border-color:#f472b6}
.bg-pink-500{background-color:#ec4899}.text-pink-500{color:#ec4899}.border-pink-500{border-color:#ec4899}
.bg-pink-600{background-color:#db2777}.text-pink-600{color:#db2777}.border-pink-600{border-color:#db2777}
.bg-pink-700{background-color:#be185d}.text-pink-700{color:#be185d}.border-pink-700{border-color:#be185d}
.bg-pink-800{background-color:#9d174d}.text-pink-800{color:#9d174d}.border-pink-800{border-color:#9d174d}
.bg-pink-900{background-color:#831843}.text-pink-900{color:#831843}.border-pink-900{border-color:#831843}
.bg-rose-50{background-color:#fff1f2}.text-rose-50{color:#fff1f2}.border-rose-50{border-color:#fff1f2}
.bg-rose-100{background-color:#ffe4e6}.text-rose-100{color:#ffe4e6}.border-rose-100{border-color:#ffe4e6}
.bg-rose-200{background-color:#fecdd3}.text-rose-200{color:#fecdd3}.border-rose-200{border-color:#fecdd3}
.bg-rose-300{background-color:#fda4af}.text-rose-300{color:#fda4af}.border-rose-300{border-color:#fda4af}
.bg-rose-400{background-color:#fb7185}.text-rose-400{color:#fb7185}.border-rose-400{border-color:#fb7185}
.bg-rose-500{background-color:#f43f5e}.text-rose-500{color:#f43f5e}.border-rose-500{border-color:#f43f5e}
.bg-rose-600{background-color:#e11d48}.text-rose-600{color:#e11d48}.border-rose-600{border-color:#e11d48}
.bg-rose-700{background-color:#be123c}.text-rose-700{color:#be123c}.border-rose-700{border-color:#be123c}
.bg-rose-800{background-color:#9f1239}.text-rose-800{color:#9f1239}.border-rose-800{border-color:#9f1239}
.bg-rose-900{background-color:#881337}.text-rose-900{color:#881337}.border-rose-900{border-color:#881337}
.sa_badge{padding:.14rem .5rem;min-height:1.15rem;line-height:1.2}


/* PWR-SA-BASE-v1 */
/* sa_ base katmani (yedekten geri) */
:root{ --sa-brand:#E11733; --sa-brand-dark:#c30f28; --sa-ink:#14161D; --sa-muted:#6b7280;
  --sa-border:#e5e7eb; --sa-card:#ffffff; --sa-bg:#ffffff; --sa-active:rgba(225,23,51,.08); }
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-around{justify-content:space-around}
.grow{flex-grow:1}.shrink-0{flex-shrink:0}.basis-0{flex-basis:0}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}
.gap-1{gap:.25rem}.gap-x-1{column-gap:.25rem}.gap-y-1{row-gap:.25rem}
.gap-2{gap:.5rem}.gap-x-2{column-gap:.5rem}.gap-y-2{row-gap:.5rem}
.gap-3{gap:.75rem}.gap-x-3{column-gap:.75rem}.gap-y-3{row-gap:.75rem}
.gap-4{gap:1rem}.gap-x-4{column-gap:1rem}.gap-y-4{row-gap:1rem}
.gap-5{gap:1.25rem}.gap-x-5{column-gap:1.25rem}.gap-y-5{row-gap:1.25rem}
.gap-6{gap:1.5rem}.gap-x-6{column-gap:1.5rem}.gap-y-6{row-gap:1.5rem}
.gap-8{gap:2rem}.gap-x-8{column-gap:2rem}.gap-y-8{row-gap:2rem}
.space-x-0>*+*{margin-left:0}.space-y-0>*+*{margin-top:0}
.space-x-1>*+*{margin-left:.25rem}.space-y-1>*+*{margin-top:.25rem}
.space-x-2>*+*{margin-left:.5rem}.space-y-2>*+*{margin-top:.5rem}
.space-x-3>*+*{margin-left:.75rem}.space-y-3>*+*{margin-top:.75rem}
.space-x-4>*+*{margin-left:1rem}.space-y-4>*+*{margin-top:1rem}
.space-x-6>*+*{margin-left:1.5rem}.space-y-6>*+*{margin-top:1.5rem}
.divide-x>*+*{border-left-width:1px;border-left-style:solid;border-color:var(--sa-border)}
.divide-y>*+*{border-top-width:1px;border-top-style:solid;border-color:var(--sa-border)}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.static{position:static}
.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.inset-0{inset:0}
.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}
.max-h-72{max-height:18rem}.max-h-60{max-height:15rem}.max-h-96{max-height:24rem}
.border{border-width:1px;border-style:solid;border-color:var(--sa-border)}.border-0{border-width:0}
.border-t{border-top-width:1px;border-top-style:solid;border-color:var(--sa-border)}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-color:var(--sa-border)}.border-l{border-left-width:1px;border-left-style:solid;border-color:var(--sa-border)}.border-r{border-right-width:1px;border-right-style:solid;border-color:var(--sa-border)}
.border-b-0{border-bottom-width:0}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-t-0{border-top-width:0}
.border-t-4{border-top-width:4px;border-top-style:solid}.border-x-4{border-left-width:4px;border-right-width:4px;border-left-style:solid;border-right-style:solid}
.border-b-transparent{border-bottom-color:transparent}.border-l-transparent{border-left-color:transparent}.border-r-transparent{border-right-color:transparent}.border-t-transparent{border-top-color:transparent}
.rounded{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}.rounded-pill{border-radius:9999px}
.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.whitespace-nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.underline{text-decoration:underline}
.hover\:underline:hover{text-decoration:underline}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-green-800{color:#166534}.text-purple-500{color:#a855f7}.bg-green-200{background-color:#bbf7d0}
/* sa_ markali bilesenler (brand #E11733) */
.sa_card{background:var(--sa-card);border:1px solid var(--sa-border);border-radius:.75rem;box-shadow:0 1px 3px rgba(20,22,29,.06)}
.sa_border{border-color:var(--sa-border)!important}.sa_divide>*+*{border-color:var(--sa-border)}
.sa_text{color:var(--sa-ink)}.sa_text_primary{color:var(--sa-brand)}.sa_muted{color:var(--sa-muted)}
.sa_rounded{border-radius:.5rem}
.sa_input,.sa_input_search{width:100%;border:1px solid var(--sa-border);border-radius:.5rem;padding:.5rem .75rem;background:#fff;color:var(--sa-ink);line-height:1.4}
.sa_input:focus,.sa_input_search:focus{outline:none;border-color:var(--sa-brand);box-shadow:0 0 0 3px var(--sa-active)}
.sa_btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.5rem 1rem;border-radius:.5rem;border:1px solid var(--sa-border);background:#fff;color:var(--sa-ink);font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}
.sa_btn:hover{background:#f8f8f9}
.sa_btn_primary{background:var(--sa-brand);border-color:var(--sa-brand);color:#fff}.sa_btn_primary:hover{background:var(--sa-brand-dark);border-color:var(--sa-brand-dark)}
.sa_badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;padding:.05rem .4rem;border-radius:9999px;background:var(--sa-brand);color:#fff;font-size:.72rem;font-weight:600;line-height:1.3}
.sa_bg_active{background:var(--sa-active)}.sa_bg_dropdown{background:#fff}.sa_shadow_dropdown{box-shadow:0 10px 30px rgba(20,22,29,.14)}
.sa_item_active_bg{color:var(--sa-brand)}.sa_item_active_bg.active,li.active>.sa_item_active_bg{background:var(--sa-active);border-radius:.5rem}
.hover\:\[\&\>\*\]\:sa_bg_active:hover>*{background:var(--sa-active)}.hover\:\[\&\>\*\]\:sa_text:hover>*{color:var(--sa-ink)}
@media (min-width:1024px){
 .lg\:flex-row{flex-direction:row}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:col-span-1{grid-column:span 1/span 1}
 .lg\:w-auto{width:auto}.lg\:space-x-2>*+*{margin-left:.5rem}.lg\:space-y-0>*+*{margin-top:0}
}
/* ===== /PWR signed-in app component layer ===== *//* ===== LOGIN social icon grid (.pl-3d) - 17 Aug: its CSS was lost when the
   theme was deleted, so a clean brand-coloured version was rewritten ===== */
.pl-3d{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:340px;margin:0 0 4px}
.pl-3d-i{--c:#8a94a6;position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1/1;border-radius:14px;background:rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(17,24,39,.08),inset 0 0 0 1px rgba(17,24,39,.05);
  color:var(--c);font-size:19px;line-height:1;transition:transform .18s ease,box-shadow .18s ease,color .18s ease;
  animation:pl3dIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*40ms)}
html body .pl-3d .pl-3d-i,html body .pl-3d .pl-3d-i i,html body .pl-3d .pl-3d-i i.fab,html body .pl-3d .pl-3d-i svg{color:var(--c)!important;fill:var(--c)!important;opacity:1!important}
.pl-3d-i svg{width:19px;height:19px;fill:currentColor!important}
.pl-3d-i:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 8px 18px rgba(17,24,39,.16),inset 0 0 0 1px rgba(17,24,39,.06);color:var(--c)}
@keyframes pl3dIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
/* brand colours */
.pl-3d-ig{--c:#E1306C}.pl-3d-tt{--c:#111}.pl-3d-yt{--c:#FF0000}.pl-3d-fb{--c:#1877F2}
.pl-3d-xx{--c:#111}.pl-3d-tg{--c:#229ED9}.pl-3d-tw{--c:#9146FF}.pl-3d-sp{--c:#1DB954}
.pl-3d-dc{--c:#5865F2}.pl-3d-li{--c:#0A66C2}.pl-3d-sc{--c:#FFA000}.pl-3d-rd{--c:#FF4500}
.pl-3d-pi{--c:#E60023}.pl-3d-so{--c:#FF5500}.pl-3d-th{--c:#111}.pl-3d-dz{--c:#A238FF}.pl-3d-gg{--c:#4285F4}
/* tile background in the dark/soft themes + keep Threads/X/TikTok visible */
:root[data-pwr-mode="rainy"] .pl-3d-i,:root[data-pwr-mode="cloudy"] .pl-3d-i{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
:root[data-pwr-mode="rainy"] .pl-3d-tt,:root[data-pwr-mode="rainy"] .pl-3d-xx,:root[data-pwr-mode="rainy"] .pl-3d-th{--c:#f3f4f6}

/* ===== New-version data tables (orders/subscriptions/drip-feed/refill/tickets)
   - the panel gives them 'text-sm w-full'; clean full-width table styling
   (17 Aug: they looked raw and cramped) ===== */
table.w-full{width:100%;border-collapse:collapse;font-size:12.5px}
table.w-full>thead>tr>th{
  text-align:left;padding:11px 14px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:#8a94a6;white-space:nowrap;
  border-bottom:2px solid rgba(17,24,39,.10);background:transparent}
table.w-full>tbody>tr>td{
  padding:11px 14px;border-bottom:1px solid rgba(17,24,39,.07);
  vertical-align:middle;color:#232733}
table.w-full>tbody>tr{transition:background .12s ease}
table.w-full>tbody>tr:hover{background:rgba(225,29,42,.045)}
table.w-full>tbody>tr:last-child>td{border-bottom:none}
table.w-full a{color:var(--pwr-red,#e11d2a)}
/* keep it legible in the Soft/Night modes */
:root[data-pwr-mode="cloudy"] table.w-full>tbody>tr>td,
:root[data-pwr-mode="rainy"] table.w-full>tbody>tr>td{color:#e6e8ee;border-bottom-color:rgba(255,255,255,.08)}
:root[data-pwr-mode="cloudy"] table.w-full>thead>tr>th,
:root[data-pwr-mode="rainy"] table.w-full>thead>tr>th{border-bottom-color:rgba(255,255,255,.14);color:#aeb6c4}
:root[data-pwr-mode="rainy"] table.w-full>tbody>tr:hover{background:rgba(255,255,255,.05)}

/* === sa_ bilesenleri: koyu (rainy) + soft (cloudy) mod === */
html[data-pwr-mode="rainy"]{--sa-bg:#14161d;--sa-card:#171a22;--sa-border:#262c3a;--sa-ink:#e2e5ee;--sa-muted:#98a0b3;--sa-active:rgba(225,23,51,.22)}
html[data-pwr-mode="rainy"] .sa_input,html[data-pwr-mode="rainy"] .sa_input_search{background:#0f131b;border-color:#262c3a;color:#e2e5ee}
html[data-pwr-mode="rainy"] .sa_input::placeholder,html[data-pwr-mode="rainy"] .sa_input_search::placeholder{color:#727a8c}
html[data-pwr-mode="rainy"] .sa_btn{background:#1b1f2a;border-color:#262c3a;color:#e2e5ee}
html[data-pwr-mode="rainy"] .sa_btn:hover{background:#232a3a}
html[data-pwr-mode="rainy"] .sa_bg_dropdown{background:#171a22}
html[data-pwr-mode="rainy"] .bg-white{background-color:#171a22 !important}
html[data-pwr-mode="rainy"] .bg-gray-50,html[data-pwr-mode="rainy"] .bg-gray-100{background-color:#1b202b !important}
html[data-pwr-mode="rainy"] .text-gray-900,html[data-pwr-mode="rainy"] .text-gray-800,html[data-pwr-mode="rainy"] .text-gray-700,html[data-pwr-mode="rainy"] .text-slate-900,html[data-pwr-mode="rainy"] .text-slate-800{color:#e2e5ee !important}
html[data-pwr-mode="rainy"] .text-gray-600,html[data-pwr-mode="rainy"] .text-gray-500,html[data-pwr-mode="rainy"] .text-gray-400,html[data-pwr-mode="rainy"] .text-slate-600,html[data-pwr-mode="rainy"] .text-slate-500{color:#98a0b3 !important}
html[data-pwr-mode="rainy"] .border-gray-100,html[data-pwr-mode="rainy"] .border-gray-200,html[data-pwr-mode="rainy"] .border-gray-300,html[data-pwr-mode="rainy"] .divide-gray-100>*,html[data-pwr-mode="rainy"] .divide-gray-200>*{border-color:#262c3a !important}
html[data-pwr-mode="cloudy"]{--sa-bg:#e6e4dd;--sa-card:#faf8f3;--sa-border:#d9d6cc;--sa-ink:#2e3037;--sa-muted:#5e6474;--sa-active:rgba(225,23,51,.10)}
html[data-pwr-mode="cloudy"] .sa_input,html[data-pwr-mode="cloudy"] .sa_input_search{background:#fbfaf6;border-color:#d9d6cc;color:#2e3037}
html[data-pwr-mode="cloudy"] .sa_btn{background:#fbfaf6;border-color:#d9d6cc;color:#2e3037}
html[data-pwr-mode="cloudy"] .sa_btn:hover{background:#f2efe7}
html[data-pwr-mode="cloudy"] .sa_bg_dropdown{background:#faf8f3}
html[data-pwr-mode="cloudy"] .bg-white{background-color:#faf8f3 !important}
html[data-pwr-mode="cloudy"] .border-gray-100,html[data-pwr-mode="cloudy"] .border-gray-200{border-color:#d9d6cc !important}


/* PWR-TABLEPAD-v1 */
/* app tablolarinda padding'siz hucrelere taban padding (drip-feed yapisik kolon fix) */
table.w-full th:not([class*='px-']):not([class*='pl-']):not([class*='pr-']):not([class*='p-2']):not([class*='p-3']):not([class*='p-4']),
table.w-full td:not([class*='px-']):not([class*='pl-']):not([class*='pr-']):not([class*='p-2']):not([class*='p-3']):not([class*='p-4']){padding:.55rem .7rem}
table.w-full th{text-align:left;font-weight:600}

/* PWR-WM-SOFT-v1 */
.pwr-wm b,.pwr-wm strong,.pwr-wm .pwr-wm-text{opacity:.06 !important}

/* ============================================================
   CHILD PANEL  (child_panel.twig + child_panel_order.twig)
   18 Aug 2026 - the page used to be the panel's stock markup: an empty
   container for anyone without a child panel, and a bare Bootstrap form
   underneath it. Rebuilt in the house language: same 14px cards, 1.5px
   --pwr-line border and red accent as the fast-services tiles, so the three
   appearance modes (sunny / cloudy / rainy) follow without extra rules.
   ============================================================ */
.pwr-cp {
  padding-top: 8px;
  padding-bottom: 40px;
}
/* The logged-in rule further up sets .container to width:auto/max-width:none so
   data tables can use the whole strip beside the sidebar. This page is prose and
   cards, not a table, so it is capped and centred - the selector has to carry the
   same html:has(...) weight to win. */
.pwr-cp,
html:has(.navbar a[href="/logout"]) .container.pwr-cp {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.pwr-cp .pwr-cp-h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--pwr-ink);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}

/* ---- hero ---- */
.pwr-cp-hero {
  border: 1.5px solid var(--pwr-line);
  border-radius: 18px;
  padding: 34px 30px;
  margin-bottom: 26px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--pwr-red) 9%, transparent), transparent 62%);
}
.pwr-cp-kicker {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pwr-red);
}
.pwr-cp-title {
  margin: 0 0 14px;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pwr-ink);
}
.pwr-cp-lead {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--pwr-muted);
}
.pwr-cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pwr-cp-chip {
  display: inline-block;
  border: 1.5px solid var(--pwr-line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pwr-ink);
}
.pwr-cp-chip-price {
  border-color: var(--pwr-red);
  background: var(--pwr-red);
  color: #fff;
}

/* ---- panels the user already owns ---- */
.pwr-cp-owned { margin-bottom: 30px; }
.pwr-cp-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pwr-cp-item {
  border: 1.5px solid var(--pwr-line);
  border-radius: 14px;
  padding: 18px;
}
.pwr-cp-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.pwr-cp-domain {
  font-size: 16px;
  font-weight: 800;
  color: var(--pwr-ink);
  word-break: break-all;
}
.pwr-cp-state {
  flex: none;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  background: color-mix(in srgb, var(--pwr-red) 74%, var(--pwr-ink));
}
.pwr-cp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 14px;
}
.pwr-cp-meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pwr-muted);
}
.pwr-cp-meta dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pwr-ink);
}
.pwr-cp-admin {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--pwr-red);
  text-decoration: none;
}
.pwr-cp-admin:hover,
.pwr-cp-admin:focus { color: var(--pwr-red2); text-decoration: underline; }

/* ---- what you get ---- */
.pwr-cp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}
.pwr-cp-card {
  border: 1.5px solid var(--pwr-line);
  border-radius: 14px;
  padding: 20px 18px;
  transition: transform .18s ease, border-color .18s ease;
}
.pwr-cp-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pwr-red) 45%, var(--pwr-line));
}
.pwr-cp-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--pwr-ink);
}
.pwr-cp-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pwr-muted);
}

/* ---- three steps ---- */
.pwr-cp-steps { margin-bottom: 30px; }
.pwr-cp-steplist {
  list-style: none;
  counter-reset: pwrcp;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.pwr-cp-steplist li {
  counter-increment: pwrcp;
  border: 1.5px solid var(--pwr-line);
  border-radius: 14px;
  padding: 20px 18px;
}
.pwr-cp-steplist li::before {
  content: counter(pwrcp);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 9px;
  background: var(--pwr-red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.pwr-cp-steplist h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--pwr-ink);
}
.pwr-cp-steplist p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pwr-muted);
}

/* ---- order form ---- */
.pwr-cp-form {
  border: 1.5px solid var(--pwr-line);
  border-radius: 18px;
  padding: 28px 26px;
}
.pwr-cp-formbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.pwr-cp-wide { grid-column: 1 / -1; }
.pwr-cp-field label,
.pwr-cp-total label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--pwr-ink);
}
.pwr-cp .form-control {
  height: 46px;
  border: 1.5px solid var(--pwr-line);
  border-radius: 12px;
  /* 20 Aug: this was background:transparent. On a page whose blocks are now solid
     cards the fields disappeared into the card; dropping the override lets the
     theme's own .form-control colours apply (#fbfcfe / #eeece4 / #1d212c). */
  box-shadow: none;
  color: var(--pwr-ink);
  font-size: 14.5px;
}
.pwr-cp .form-control:focus {
  border-color: var(--pwr-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pwr-red) 18%, transparent);
}
.pwr-cp-hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pwr-muted);
}
.pwr-cp-hint code {
  background: color-mix(in srgb, var(--pwr-ink) 8%, transparent);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--pwr-ink);
  font-size: 12px;
}

/* name servers: the one step the customer has to do somewhere else */
.pwr-cp-ns {
  border: 1.5px solid color-mix(in srgb, var(--pwr-red) 32%, var(--pwr-line));
  border-radius: 14px;
  padding: 18px;
}
.pwr-cp-ns h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--pwr-ink);
}
.pwr-cp-ns p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pwr-muted);
}
.pwr-cp-ns ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pwr-cp-ns li {
  border: 1.5px solid var(--pwr-line);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--pwr-ink);
  word-break: break-all;
}

.pwr-cp-total {
  border-top: 1.5px solid var(--pwr-line);
  padding-top: 20px;
}
.pwr-cp .pwr-cp-price {
  max-width: 260px;
  font-weight: 800;
  font-size: 17px;
  cursor: default;
}
.pwr-cp-submit {
  margin-top: 16px;
  border: 0;
  border-radius: 12px;
  padding: 15px 30px;
  background: var(--pwr-red);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: background .18s ease, transform .18s ease;
}
.pwr-cp-submit:hover,
.pwr-cp-submit:focus { background: var(--pwr-red2); color: #fff; transform: translateY(-1px); }
.pwr-cp-submit:focus-visible { outline: 2px solid var(--pwr-ink); outline-offset: 2px; }

/* ---- 20 Aug 2026: SOLID BLOCKS ------------------------------------------
   Every block on this page was outline-only (border + radius, no background),
   so the page read as see-through: the site-wide SMMPWR watermark sits at
   z-index 0 behind the content and was visible THROUGH the order form, which
   is what "cok seffaf" meant. The rest of the panel (tickets, orders, add
   funds) draws its blocks on .well/.panel - an opaque surface plus a soft
   shadow. The same surface is applied here through the token defined at the
   top of this file, so all three modes follow automatically. */
.pwr-cp-hero,
.pwr-cp-item,
.pwr-cp-card,
.pwr-cp-steplist li,
.pwr-cp-form {
  background-color: var(--pwr-card);
  box-shadow: var(--pwr-card-sh);
}
.pwr-cp-card:hover {
  box-shadow: 0 16px 34px rgba(20,20,40,.10);
}
html[data-pwr-mode="rainy"] .pwr-cp-card:hover {
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
/* The name-server box is nested INSIDE the form card, so it cannot use the same
   fill or it would vanish. A 5% red wash over the card keeps it separate and
   matches the red-tinted border it already had. */
.pwr-cp-ns {
  background-color: color-mix(in srgb, var(--pwr-red) 5%, var(--pwr-card));
}
.pwr-cp-ns li {
  background-color: var(--pwr-card);
}

@media (max-width: 1040px) {
  .pwr-cp-grid,
  .pwr-cp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .pwr-cp-formbody,
  .pwr-cp-grid,
  .pwr-cp-list,
  .pwr-cp-steplist { grid-template-columns: minmax(0, 1fr); }
  .pwr-cp-hero { padding: 26px 20px; }
  .pwr-cp-title { font-size: 28px; }
  .pwr-cp-lead { font-size: 14.5px; }
  .pwr-cp-form { padding: 22px 18px; }
  .pwr-cp-submit { width: 100%; }
}


/* ================================================================
   SERVICE NOTICE - SCROLLING TICKER  (user request, 22 Aug 2026)
   "the area I drew with the pen": the WHITE TOP STRIP of the signed-in
   panel, the empty band between the logo and the balance badge.

   That strip is .navbar-right-block (>=1300px: position:fixed, left:252px,
   height:88px, display:flex, justify-content:flex-end). The notice becomes
   its FIRST child with flex:1 1 auto + min-width:0, so it takes whatever
   space balance/Account/Logout leave over - it can never overlap them.

   Below 1300px that strip falls inside the collapsed menu, so the <li> is
   hidden and a full-width band under the navbar takes over instead.

   The motion is pure CSS: the rail carries the SAME text twice and shifts
   by -50%, giving a seamless loop with no JavaScript. It pauses on hover
   and for prefers-reduced-motion.
   To remove the notice, blank out {% set pwr_notice %} in layout.twig.
   ================================================================ */
.pwr-notice-li{ display:none!important }   /* !important: the panel's .navbar-nav>li{display:block} rule is more specific */
.pwr-notice-bar{ display:none }

.pwr-notice{
  display:flex; align-items:center; gap:10px; min-width:0;
}
/* ⛔ NEVER put display here: this block comes AFTER the .pwr-notice-bar{display:none}
   rule above, so a display rule of the same specificity would override it and the
   bar would show on wide screens too (22 Aug measurement: two strips at 1925px). */
.pwr-notice-bar{
  align-items:center; gap:10px; min-width:0;
}
.pwr-notice-badge{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 11px; border-radius:20px;
  background:var(--pwr-red); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  white-space:nowrap;
}
.pwr-notice-badge .fas{ font-size:11px }
.pwr-notice-window{
  position:relative; flex:1 1 auto; min-width:0; overflow:hidden;
  /* soft edges: the line fades in and out instead of being cut with a knife */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}
.pwr-notice-rail{
  display:flex; width:max-content;
  animation:pwr-notice-scroll 46s linear infinite;
}
.pwr-notice-text{
  padding-right:64px; white-space:nowrap;
  font-size:13.5px; font-weight:600; line-height:1.2; color:var(--pwr-ink);
}
/* stop while the pointer rests on it so the customer can read in peace */
.pwr-notice:hover .pwr-notice-rail,
.pwr-notice-bar:hover .pwr-notice-rail{ animation-play-state:paused }

/* ---- BLINK (8 Sep 2026, on request) --------------------------------------
   The notice text pulses so it cannot be missed. It sits on the TEXT, not on
   the rail: the rail already owns the scroll animation and a second animation
   on the same element would replace it.
   Hover switches the blink OFF completely (opacity back to 1) instead of just
   pausing it - a blink paused on the dim half would look like a rendering bug.
   ------------------------------------------------------------------------- */
.pwr-notice-text{ animation:pwr-notice-blink 1.2s linear infinite }
@keyframes pwr-notice-blink{
  0%,44%  { opacity:1 }
  50%,94% { opacity:.15 }
  100%    { opacity:1 }
}
.pwr-notice:hover .pwr-notice-text,
.pwr-notice-bar:hover .pwr-notice-text{ animation:none; opacity:1 }

@keyframes pwr-notice-scroll{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}
@media (prefers-reduced-motion:reduce){
  .pwr-notice-rail{ animation:none }
  .pwr-notice-text:nth-child(2){ display:none }
  .pwr-notice-text{ white-space:normal; padding-right:0; animation:none; opacity:1 }   /* blink off too */
}

/* ---- TOP STRIP (sidebar layout) ---- */
@media (min-width:1300px){
  html:has(.navbar a[href="/logout"]) .pwr-notice-li{
    /* !important: the panel's own "html:has(...) .navbar-nav>li{display:block}"
       rule is more specific (0,3,3) - without it this line never applied. */
    display:flex!important; align-items:center;
    flex:1 1 auto!important; min-width:0; width:auto!important;
    margin:0 18px 0 4px; padding:0;
  }
  html:has(.navbar a[href="/logout"]) .pwr-notice{ width:100% }
}

/* ---- NARROW SCREEN BAND ---- */
@media (max-width:1299px){
  .pwr-notice-bar{
    display:flex; padding:9px 14px;
    background:var(--pwr-bg); border-bottom:1px solid var(--pwr-line);
  }
  .pwr-notice-text{ font-size:12.5px }
  .pwr-notice-rail{ animation-duration:34s }
}
@media (max-width:560px){
  /* on a phone the badge keeps only its icon so the text gets the room */
  .pwr-notice-badge{ padding:0 9px; font-size:0; gap:0 }
  .pwr-notice-badge .fas{ font-size:12px }
}

/* ---- dark theme ---- */
html[data-pwr-mode="rainy"] .pwr-notice-text{ color:#e9edf5 }
html[data-pwr-mode="rainy"] .pwr-notice-bar{ background:#1a1d26; border-bottom-color:#2a2e3a }

/* ================================================================
   /services — GAP BETWEEN THE ID COLUMN AND THE SERVICE NAME  (25 Aug 2026)
   User: "there is far too much space between the service id and the service
   name, halve it".

   Measured at 1536px: the ID text ended at x=397 and the service name began at
   x=442 — a 45px gap. It breaks down as 12px right padding + 22px of slack
   inside the ID cell + 12px left padding. The slack is the browser's automatic
   table layout giving that column more room than "850" needs.

   ⛔ NO FIXED WIDTH (width:60px and friends): ids run 3 AND 4 digits
      (850 ... 1855), so a fixed value would clip the long ones.
   ✅ width:1% + white-space:nowrap is the shrink-to-fit idiom for an auto
      table layout: the column collapses to content+padding, the 22px of slack
      disappears and the gap becomes 12+12 = 24px — half of 45, as asked.

   ⛔ PHONES ARE UNAFFECTED: .pwr-table-cards turns every td into a block with
      width:auto!important further down, which overrides this.
   ================================================================ */
/* 🐞 25 Aug 2026, SAME DAY FIX - the rule below used to say
   nth-child(2). Column 2 is NOT the id, it is the SERVICE NAME
   (thead: ID | Service | Rate per 1000 | ...). So the name column got
   width:1% + white-space:nowrap: it could no longer wrap, and every long
   name ("... | 30 Days Refill | Day 30-50K" plus the .pwr-drop pill)
   ran straight over the "Rate per 1000" value - the price and the name
   were printed on top of each other on the whole price list.
   The id cell is matched by its own data attribute now, not by position,
   so a future column insert cannot repeat this. The group heading row
   (td colspan=100%) has no such attribute and stays untouched. */
#service-table>thead>tr>th:first-child,
#service-table>tbody>tr>td[data-filter-table-service-id]{
  width:1%;
  white-space:nowrap;
}
/* The freed width goes to the service name, which MUST stay wrappable.
   overflow-wrap:anywhere is the safety net for a single very long token
   (no spaces) that would otherwise stick out of the cell. */
#service-table>tbody>tr>td.service-name{
  white-space:normal;
  overflow-wrap:anywhere;
}

/* 27 Aug 2026 - MISSING CLASS. Ticket message bubbles use
   `text-white sa_bg_primary`, but .sa_bg_primary was never defined,
   so the bubble had no background and white text became invisible.
   Follows the same convention as .sa_btn_primary / .sa_text_primary. */
.sa_bg_primary{background:var(--sa-brand)}

/* 13 Sep 2026: Bootstrap pagination kept its stock white background in the
   cloudy/rainy modes (only the .active cell was themed), so pager cells
   glowed white on dark pages. Non-active cells now follow the mode. */
html[data-pwr-mode="cloudy"] .pagination>li>a,html[data-pwr-mode="cloudy"] .pagination>li>span,html[data-pwr-mode="rainy"] .pagination>li>a,html[data-pwr-mode="rainy"] .pagination>li>span{background:transparent}
html[data-pwr-mode="cloudy"] .pagination>li>a:hover,html[data-pwr-mode="rainy"] .pagination>li>a:hover{background:var(--pwr-line)}
html[data-pwr-mode="cloudy"] .pagination>.disabled>span,html[data-pwr-mode="cloudy"] .pagination>.disabled>a,html[data-pwr-mode="rainy"] .pagination>.disabled>span,html[data-pwr-mode="rainy"] .pagination>.disabled>a{background:transparent}