/* Ultimate Poke Idle — Admin Portal v2
   Visual-only layer: IDs, JS hooks and API behavior stay untouched. */

:root {
  --bg: #f3f9fb !important;
  --bg2: #ffffff !important;
  --card: #ffffff !important;
  --card2: #f7fbfc !important;
  --line: #d5e6eb !important;
  --primary: #238bc7 !important;
  --secondary: #32b98a !important;
  --accent: #238bc7 !important;
  --accent2: #32b98a !important;
  --blue: #238bc7 !important;
  --ok: #229f75 !important;
  --danger: #df5e68 !important;
  --gold: #c68b24 !important;
  --txt: #173947 !important;
  --dim: #688590 !important;
  --dim2: #8ca2aa !important;
  --upi-ink: #173947;
  --upi-navy: #164f6b;
  --upi-blue: #238bc7;
  --upi-mint: #32b98a;
  --upi-ice: #f3f9fb;
  --upi-soft: #e8f5f7;
  --upi-border: #d5e6eb;
  --upi-shadow: 0 16px 45px rgba(31, 96, 119, .10);
  --upi-shadow-sm: 0 7px 22px rgba(31, 96, 119, .08);
}

html { color-scheme: light; }

body {
  color: var(--upi-ink) !important;
  font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", system-ui, sans-serif !important;
  background:
    radial-gradient(circle at 93% 2%, rgba(69, 190, 222, .14), transparent 28rem),
    radial-gradient(circle at 5% 94%, rgba(50, 185, 138, .11), transparent 24rem),
    linear-gradient(180deg, #f8fcfd 0%, var(--upi-ice) 100%) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(35, 139, 199, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 139, 199, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

::selection { color: #fff; background: rgba(35, 139, 199, .82); }
.app [style*="#ffa198"],
.wrap [style*="#ffa198"] { color: #b33f4b !important; }

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(35, 139, 199, .19) !important;
  outline-offset: 2px;
}

/* Shared surfaces */
.card,
.kpi,
.pcard,
.links a,
.cl {
  color: var(--upi-ink) !important;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid var(--upi-border) !important;
  box-shadow: var(--upi-shadow-sm) !important;
}

.card {
  border-radius: 22px !important;
  padding: 22px 24px !important;
}

.card h2 {
  color: var(--upi-navy) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -.01em;
}

.hint,
.sub,
label { color: var(--dim) !important; }

label {
  font-weight: 680 !important;
  letter-spacing: .01em;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="datetime-local"],
select,
textarea,
#gv-pkg {
  color: var(--upi-ink) !important;
  background: #f8fcfd !important;
  border: 1px solid #cfe1e6 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(17, 73, 93, .025) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input::placeholder,
textarea::placeholder { color: #96abb2 !important; opacity: 1; }

input:focus,
select:focus,
textarea:focus {
  background: #fff !important;
  border-color: var(--upi-blue) !important;
  box-shadow: 0 0 0 4px rgba(35, 139, 199, .10) !important;
}

button,
.btn,
.mini,
.re {
  border-radius: 11px !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease !important;
}

button:hover,
.btn:hover,
.re:hover { transform: translateY(-1px); }

.btn,
.mini,
.re,
.secret button,
.addrow button,
.cl-actions button {
  color: var(--upi-navy) !important;
  background: #fff !important;
  border: 1px solid #c9e0e6 !important;
  box-shadow: 0 3px 10px rgba(33, 103, 126, .06) !important;
}

.btn.red,
button.go {
  color: #fff !important;
  background: linear-gradient(135deg, #248fc9, #31ba8c) !important;
  border: 0 !important;
  box-shadow: 0 9px 22px rgba(38, 155, 160, .22) !important;
}

.btn.red:hover,
button.go:hover {
  filter: none !important;
  box-shadow: 0 12px 26px rgba(38, 155, 160, .29) !important;
}

.btn.danger,
.cl-actions button.del {
  color: #b43e4a !important;
  border-color: #f0c9ce !important;
  background: #fff8f9 !important;
}

.msg { border-radius: 13px !important; }
.msg.ok,
.msg.err { position: relative; padding-left: 43px !important; }
.msg.ok::before,
.msg.err::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 21px;
  height: 21px;
  transform: translateY(-50%);
  background: center/contain no-repeat;
}
.msg.ok::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/check.png"); }
.msg.err::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/delete.png"); }
.msg.ok {
  color: #18795a !important;
  background: #eefaf5 !important;
  border-color: #9ddbc5 !important;
}
.msg.err {
  color: #ae3c47 !important;
  background: #fff3f4 !important;
  border-color: #f0bcc2 !important;
}

.pill,
.badge {
  font-weight: 780 !important;
  letter-spacing: .025em;
}
.pill.on,
.badge.on {
  color: #18795a !important;
  background: #eaf8f2 !important;
  border-color: #99d8c1 !important;
}
.pill.off,
.badge.no {
  color: #6e858d !important;
  background: #f2f6f7 !important;
  border-color: #d9e4e7 !important;
}
.pill.red {
  color: #b33f4b !important;
  background: #fff0f2 !important;
  border-color: #efbbc1 !important;
}
.pill.gold {
  color: #936315 !important;
  background: #fff8df !important;
  border-color: #ead597 !important;
}
.pill.blue {
  color: #17699a !important;
  background: #edf7fd !important;
  border-color: #b8daf0 !important;
}

/* Reusable branded sprite slots */
.upi-icon,
.nav-ico,
.section-icon,
.links .ic {
  display: inline-block;
  flex: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: auto;
}

.section-icon { width: 24px; height: 24px; vertical-align: -6px; margin-right: 5px; }
.ico-home { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/home.png") !important; }
.ico-online,
.ico-community,
.ico-announce { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/community.png") !important; }
.ico-trainer { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/trainer.png") !important; }
.ico-coins,
.ico-revenue { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/coins.png") !important; }
.ico-achievement,
.ico-referrals { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/achievement.png") !important; }
.ico-ticket,
.ico-codes { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/redeem-ticket.png") !important; }
.ico-package,
.ico-gift { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/packages.png") !important; }
.ico-admin,
.ico-maintenance { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/admin-shield.png") !important; }
.ico-tools,
.ico-wiki { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/world-map.png") !important; }
.ico-market { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/market.png") !important; }
.ico-search { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/search.png") !important; }
.ico-refresh { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/refresh.png") !important; }
.ico-check { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/check.png") !important; }
.ico-delete { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/delete.png") !important; }
.ico-gift { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/gift.png") !important; }
.ico-cart { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/cart.png") !important; }
.ico-pix { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/pix.png") !important; }
.ico-payment { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/payment-card.png") !important; }
.ico-trophy { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/trophy.png") !important; }
.ico-pokedex { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/pokedex.png") !important; }
.ico-route { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/route-pin.png") !important; }
.ico-lock { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/lock.png") !important; }
.ico-warning { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/warning.png") !important; }
.ico-online-state { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/online.png") !important; }

.button-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: -5px;
}

.re[data-re]::before,
#reload::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  vertical-align: -4px;
  background: url("/assets/brand/ultimate-poke-idle/portal-icons/refresh.png") center/contain no-repeat;
}

.pagehead a.re[href="/codigos-admin.html"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  vertical-align: -4px;
  background: url("/assets/brand/ultimate-poke-idle/portal-icons/gift.png") center/contain no-repeat;
}

/* Admin dashboard */
.app {
  grid-template-columns: 276px minmax(0, 1fr) !important;
  background: transparent;
}

.side {
  width: auto;
  color: var(--upi-ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(50, 185, 138, .12), transparent 10rem),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,251,252,.98)) !important;
  border-right: 1px solid var(--upi-border) !important;
  box-shadow: 12px 0 35px rgba(34, 98, 119, .06);
  padding: 24px 18px 18px !important;
  gap: 4px !important;
}

.brand {
  gap: 12px !important;
  padding: 3px 8px 20px !important;
  border-bottom: 1px solid #e3eef1;
}

.brand .shield {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid #c8e5e2 !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #edfafd, #eaf8f2) !important;
  box-shadow: 0 8px 18px rgba(34, 132, 157, .12) !important;
}
.brand .shield img { width: 43px !important; height: 43px !important; }
.brand b { color: var(--upi-navy); font-size: 16px !important; font-weight: 780; }
.brand span { color: #6d8b96 !important; font-weight: 700; }

.side .grp {
  color: #85a0a9 !important;
  padding: 18px 11px 7px !important;
  font-size: 9.5px !important;
  letter-spacing: .17em !important;
}

.side nav { display: grid; gap: 4px; }
.side nav a {
  position: relative;
  color: #58727c !important;
  border: 1px solid transparent;
  border-radius: 13px !important;
  padding: 10px 11px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.side nav a svg { display: none !important; }
.side nav a .nav-ico { width: 25px; height: 25px; }
.side nav a:hover {
  color: var(--upi-navy) !important;
  background: #f0f8fa !important;
  border-color: #d7e9ed;
}
.side nav a.on {
  color: #145271 !important;
  background: linear-gradient(135deg, #eaf7fc, #e8f8f2) !important;
  border-color: #bfe2e3 !important;
  box-shadow: 0 7px 18px rgba(36, 132, 153, .10) !important;
}
.side nav a.on::after {
  content: "";
  position: absolute;
  left: -19px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(var(--upi-blue), var(--upi-mint));
}
.side nav a .n {
  color: #17668e;
  background: #dceff6 !important;
  padding: 2px 8px !important;
}

.side .foot {
  border-top-color: #dce9ed !important;
  margin-top: auto !important;
  padding-top: 16px !important;
}
.side .foot label { color: #748f99 !important; }
.side .foot > label::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  vertical-align: -4px;
  background: url("/assets/brand/ultimate-poke-idle/portal-icons/lock.png") center/contain no-repeat;
}
.skey input {
  color: var(--upi-ink) !important;
  background: #f7fbfc !important;
  border-color: #cee1e6 !important;
}
.skey button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--upi-blue), var(--upi-mint)) !important;
  border: 0 !important;
  min-width: 42px;
}
.skey-st { color: #6b858e !important; }
.skey-st .dot {
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  background: url("/assets/brand/ultimate-poke-idle/portal-icons/offline.png") center/contain no-repeat !important;
}
.skey-st .dot.ok { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/online.png") !important; box-shadow: none !important; }
.skey-st .dot.err { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/warning.png") !important; box-shadow: none !important; }
.side .back { color: #5f7f8a !important; font-weight: 650; }
.side .back:hover { color: var(--upi-blue) !important; }
.side .back::before,
.wrap > .back::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  transform: rotate(180deg);
  background: url("/assets/brand/ultimate-poke-idle/portal-icons/forward.png") center/contain no-repeat;
}

.main {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 34px 38px 72px !important;
}

.pagehead {
  align-items: center !important;
  margin-bottom: 24px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid #dce9ed;
}
.pagehead h1 {
  color: var(--upi-navy);
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 780;
  letter-spacing: -.035em;
}
.pagehead p { color: #6e8790 !important; font-size: 13px !important; }
.pagehead .re {
  color: #18698f !important;
  background: #fff !important;
  border-color: #cbe1e7 !important;
  padding: 9px 14px !important;
  box-shadow: 0 5px 16px rgba(29, 100, 122, .07);
}

section.pane.on { animation: upiFade .24s ease both !important; }
@keyframes upiFade { from { opacity: 0; transform: translateY(8px); } }

.kpis { gap: 14px !important; margin-bottom: 19px !important; }
.kpi {
  min-height: 130px;
  border-radius: 19px !important;
  padding: 20px 19px 16px !important;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  right: -26px;
  top: -28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kc, var(--upi-blue)) 11%, transparent);
}
.kpi::after {
  left: 18px !important;
  right: 18px;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important;
  height: 3px;
  border-radius: 4px 4px 0 0 !important;
}
.kpi b { color: var(--upi-navy); font-size: 27px !important; font-weight: 790; }
.kpi span { color: #66818a !important; font-size: 10.5px !important; letter-spacing: .055em; }
.kpi small { color: #91a4aa !important; margin-top: 6px !important; }

.grid2 { gap: 18px !important; }

#home-online,
#on-list,
#oh-log,
#rv-pkg,
#rv-recent,
#rf-top,
#rf-recent,
#cd-list,
#uses-body { overflow-x: auto; }

table {
  min-width: 620px;
  color: var(--upi-ink) !important;
  border-collapse: separate !important;
  border-spacing: 0;
}
th {
  color: #78919a !important;
  background: #f4f9fa;
  border-top: 1px solid #dce9ec !important;
  border-bottom: 1px solid #dce9ec !important;
  padding: 11px 10px !important;
}
th:first-child { border-left: 1px solid #dce9ec; border-radius: 10px 0 0 10px; }
th:last-child { border-right: 1px solid #dce9ec; border-radius: 0 10px 10px 0; }
td {
  color: #294b58;
  border-bottom-color: #e4eef0 !important;
  padding: 11px 10px !important;
}
tr:hover td { background: #f7fbfc !important; }

.pcard { border-radius: 16px !important; }
.phead .avatar {
  color: transparent;
  background: #edf8f9 url("/assets/brand/ultimate-poke-idle/portal-icons/trainer.png") center/35px no-repeat !important;
  border: 1px solid #d1e8e9;
  border-radius: 14px !important;
}
.prow { color: #6e8790 !important; border-bottom-color: #e1ecef !important; }
.prow b { color: var(--upi-ink) !important; }
.badges img { filter: drop-shadow(0 4px 7px rgba(35,104,126,.16)) !important; }
.badges img.off { filter: grayscale(1) opacity(.32) !important; }
.mon {
  color: var(--upi-ink);
  background: #f7fbfc !important;
  border-color: #d7e7eb !important;
  border-radius: 14px !important;
}
.mon:hover { border-color: #8fcfd3 !important; box-shadow: 0 8px 16px rgba(31,105,127,.09); }
summary { color: #19729f !important; }

.links { gap: 14px !important; }
.links a {
  min-height: 82px;
  border-radius: 17px !important;
  padding: 15px 16px !important;
}
.links a:hover {
  border-color: #9bd4cf !important;
  box-shadow: 0 13px 28px rgba(30, 105, 126, .12) !important;
}
.links a .ic {
  width: 46px !important;
  height: 46px !important;
  color: transparent !important;
  border: 1px solid #cce5e5 !important;
  border-radius: 14px !important;
  background-color: #edf9f8 !important;
  background-size: 38px !important;
}
.links a span:not(.ic) { color: var(--upi-navy); }
.links a span small { color: #779099 !important; }

.chart .bars { border-bottom-color: #dce8eb !important; }
.chart .col .bar {
  background: linear-gradient(180deg, #45bedd, var(--upi-blue)) !important;
  border-radius: 6px 6px 2px 2px !important;
}
.chart .col .lbl { color: var(--upi-navy) !important; }
.chart .xlab span { color: #89a0a8 !important; }
.chart .ctip {
  color: var(--upi-ink) !important;
  background: #fff !important;
  border-color: #cfe1e6 !important;
  box-shadow: 0 12px 28px rgba(19,77,97,.15) !important;
}
.rng {
  color: #708991 !important;
  background: #f5fafb !important;
  border-color: #d6e6e9 !important;
}
.rng.on {
  color: #17698f !important;
  background: #eaf6fb !important;
  border-color: #9dcfe8 !important;
}

#uses-ov {
  background: rgba(22, 61, 76, .36) !important;
  backdrop-filter: blur(9px) saturate(.8) !important;
}
#uses-ov .uc {
  color: var(--upi-ink);
  background: #fff !important;
  border-color: #d6e7ea !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 80px rgba(17,64,82,.24);
}

/* Redemption code editor */
body > .wrap {
  width: min(1160px, calc(100% - 32px)) !important;
  max-width: none !important;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr);
  gap: 0 20px;
  margin: 0 auto;
}

.wrap > .back,
.wrap > h1,
.wrap > .sub,
.wrap > .card:first-of-type { grid-column: 1 / -1; }

.wrap > .back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 0 18px;
  padding: 0 13px;
  color: #4f7582 !important;
  background: rgba(255,255,255,.86);
  border: 1px solid #d7e7ea;
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(31, 100, 122, .06);
  font-weight: 650;
}
.wrap > .back:hover { color: var(--upi-blue) !important; }

.wrap > h1 {
  color: var(--upi-navy);
  font-size: clamp(23px, 3vw, 31px) !important;
  font-weight: 790;
  letter-spacing: -.035em;
  margin-bottom: 7px !important;
}
.wrap > h1 .pk {
  width: 50px !important;
  height: 50px !important;
  filter: drop-shadow(0 8px 14px rgba(35,139,199,.17)) !important;
}
.admin-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: #257895 !important;
  background: #eaf7fa;
  border: 1px solid #c7e4e9;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.wrap > .sub {
  max-width: 760px;
  margin: 0 0 24px !important;
  font-size: 14px !important;
  line-height: 1.6;
}

.wrap > .card:first-of-type {
  position: relative;
  padding: 18px 20px 18px 82px !important;
  background: linear-gradient(110deg, #fff, #f3fbfb) !important;
}
.wrap > .card:first-of-type::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  border-radius: 13px;
  border: 1px solid #c9e6e5;
  background: #eaf8f6 url("/assets/brand/ultimate-poke-idle/portal-icons/admin-shield.png") center/36px no-repeat;
}
.wrap > .card:nth-of-type(2),
.wrap > .card:nth-of-type(3) { align-self: start; }
.wrap > .card:nth-of-type(2) h2::before,
.wrap > .card:nth-of-type(3) h2::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: none;
  background: center/contain no-repeat;
}
.wrap > .card:nth-of-type(2) h2::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/redeem-ticket.png"); }
.wrap > .card:nth-of-type(3) h2::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/achievement.png"); }

.secret { align-items: stretch !important; }
.secret button { padding-inline: 18px !important; }
button.go { min-height: 48px; }
.addrow button { min-height: 43px; }
.addrow button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -4px;
  background: url("/assets/brand/ultimate-poke-idle/portal-icons/add.png") center/contain no-repeat;
}

.chip {
  color: var(--upi-ink);
  background: #f1f9fa !important;
  border-color: #d4e7ea !important;
  border-radius: 13px !important;
}
.chip .qt { color: #708991 !important; }
.chip label.shiny { color: #a6761f !important; }
.chip .rm {
  width: 18px;
  height: 18px;
  color: transparent !important;
  background: url("/assets/brand/ultimate-poke-idle/portal-icons/remove.png") center/contain no-repeat !important;
}

.cl {
  border-radius: 15px !important;
  padding: 14px 15px !important;
  box-shadow: none !important;
}
.cl:hover { border-color: #aed7dc !important; box-shadow: 0 8px 20px rgba(31,101,123,.07) !important; }
.cl-code { color: var(--upi-navy) !important; }
.cl-meta { color: #789098 !important; }
.cl-rewards { color: #3f606c !important; }
.cl-actions .tgl::before,
.cl-actions .del::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: -4px;
  background: center/contain no-repeat;
}
.cl-actions .tgl::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/edit.png"); }
.cl-actions .del::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/delete.png"); }

#uses-close::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 6px;
  vertical-align: -4px;
  background: url("/assets/brand/ultimate-poke-idle/portal-icons/close.png") center/contain no-repeat;
}

#pi-go::before,
#gm-go::before,
#mn-save::before,
#pi-ban::before,
button[data-tgl]::before,
button[data-del]::before,
a[data-uses]::before,
#create::before,
#saveSecret::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -4px;
  background: center/contain no-repeat;
}
#pi-go::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/search.png"); }
#gm-go::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/gift.png"); }
#mn-save::before,
#saveSecret::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/lock.png"); }
#pi-ban::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/warning.png"); }
button[data-tgl]::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/edit.png"); }
button[data-del]::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/delete.png"); }
a[data-uses]::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/view.png"); }
#create::before { background-image: url("/assets/brand/ultimate-poke-idle/portal-icons/check.png"); }

@media (max-width: 1040px) {
  .app { grid-template-columns: 244px minmax(0, 1fr) !important; }
  .main { padding-inline: 24px !important; }
  body > .wrap { grid-template-columns: 1fr; }
  .wrap > .card { grid-column: 1 !important; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr !important; }
  .side {
    position: relative !important;
    height: auto !important;
    padding: 16px !important;
    box-shadow: 0 10px 30px rgba(31,93,114,.07);
  }
  .brand { border-bottom: 0; padding-bottom: 10px !important; }
  .side .grp { padding-top: 9px !important; }
  .side nav { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
  .side nav a.on::after { left: 8px; top: auto; bottom: -1px; width: auto; right: 8px; height: 3px; }
  .side .foot { margin-top: 13px !important; }
  .main { padding: 24px 16px 60px !important; }
}

@media (max-width: 620px) {
  body { padding-left: 0 !important; padding-right: 0 !important; }
  body > .wrap { width: min(100% - 22px, 1160px) !important; }
  .side nav { grid-template-columns: 1fr 1fr; }
  .side nav a { font-size: 12px !important; padding: 9px !important; }
  .side nav a .nav-ico { width: 22px; height: 22px; }
  .pagehead { align-items: flex-start !important; }
  .pagehead > div:first-child { width: 100%; }
  .card { padding: 18px 16px !important; border-radius: 18px !important; }
  .kpis { grid-template-columns: 1fr 1fr !important; }
  .kpi { min-height: 112px; padding: 17px 14px !important; }
  .kpi b { font-size: 22px !important; }
  .wrap > .card:first-of-type { padding: 18px !important; }
  .wrap > .card:first-of-type::before { display: none; }
  .secret,
  .addrow { align-items: stretch !important; flex-wrap: wrap; }
  .secret > div,
  .addrow .grow { flex-basis: 100%; }
  .addrow input[type="number"] { flex: 1; width: auto !important; }
  .cl-actions { width: 100%; margin: 8px 0 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}