@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Roboto+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  height: 100%;
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px
}

::-webkit-scrollbar-thumb {
  background: var(--s3);
  border-radius: 9px
}

::-webkit-scrollbar-track {
  background: transparent
}

:root {
  /* ── Deep OLED Stealth Black (Balanced Dark Edition) ── */
  --bg: #000000;
  --s0: #060608;
  --s1: #0e0e13;
  --s2: #16161f;
  --s3: #20202c;
  --s4: #323244;
  --ln: rgba(255, 255, 255, 0.06);
  --ln2: rgba(255, 255, 255, 0.11);
  --t0: #f5f5f9;
  --t1: #ceced8;
  --t2: #808090;
  --t3: #484856;
  --acc: #3b82f6;
  --ai: #ffffff;
  --as: rgba(59, 130, 246, 0.12);
  --ab: rgba(59, 130, 246, 0.28);
  --ok: #10b981;
  --ok-s: rgba(16, 185, 129, 0.10);
  --ok-b: rgba(16, 185, 129, 0.25);
  --err: #f43f5e;
  --err-s: rgba(244, 63, 94, 0.10);
  --err-b: rgba(244, 63, 94, 0.25);
  --warn: #f59e0b;
  --warn-s: rgba(245, 158, 11, 0.10);
  --warn-b: rgba(245, 158, 11, 0.25);
  --info: #06b6d4;
  --info-s: rgba(6, 182, 212, 0.10);
  --info-b: rgba(6, 182, 212, 0.25);
  --pur: #3b82f6;
  --pur2: rgba(59, 130, 246, 0.12);
  --pur3: rgba(59, 130, 246, 0.28);
}

html.light {
  --bg: #f0f0f8;
  --s0: #fff;
  --s1: #f4f4fb;
  --s2: #eaeaf5;
  --s3: #d8d8eb;
  --s4: #c8c8df;
  --ln: rgba(0, 0, 0, .07);
  --ln2: rgba(0, 0, 0, .13);
  --t0: #0f0f1a;
  --t1: #444460;
  --t2: #888899;
  --t3: #cccce0;
  --ok: #16a34a;
  --err: #dc2626;
  --warn: #ca8a04;
  --info: #2563eb;
  --pur: #2563eb;
  --pur2: rgba(37, 99, 235, .1);
  --pur3: rgba(37, 99, 235, .22);
}

body {
  background: var(--bg);
  color: var(--t0)
}

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  padding: 16px 20px 20px 20px;
  gap: 16px;
  box-sizing: border-box;
}

.sidebar {
  width: 160px;
  flex-shrink: 0;
  background: var(--s0);
  border: 1px solid var(--ln);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sidebar:hover {
  border-color: var(--ln2);
}

.brand {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-bottom: 1px solid var(--ln);
  flex-shrink: 0
}

.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--pur3);
  box-shadow: 0 0 12px rgba(59, 130, 246, .35);
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.brand-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--t0);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.brand-v2 {
  font-size: 13px;
  font-weight: 900;
  color: #3b82f6;
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-tag {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--pur);
  margin-top: 1px;
  letter-spacing: 1px;
  opacity: .85
}

.nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0
}

.nav-sec {
  padding: 14px 0 4px
}

.nav-sec-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 12px 6px
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 1px 5px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.nav-item i {
  width: 14px;
  text-align: center;
  font-size: 11.5px;
  flex-shrink: 0;
  color: #3b82f6;
  transition: color .15s, filter .15s;
}

.nav-item:hover {
  background: var(--s1);
  color: var(--t0);
  border-color: var(--ln);
}

.nav-item:hover i {
  color: #60a5fa;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
}

.nav-item.nav-active {
  background: var(--s1);
  color: var(--t0);
  border: 1px solid var(--ln);
  font-weight: 700;
}

.nav-item.nav-active i {
  color: #3b82f6;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.7));
}

.section-wrap {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.section-wrap.section-show {
  display: flex !important;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  gap: 16px;
  min-height: 0;
}

.topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  margin: 0;
  background: var(--s0);
  border: 1px solid var(--ln);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  gap: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.topbar:hover {
  border-color: var(--ln2);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px
}

.topbar-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--t0);
  letter-spacing: -.2px
}

.tb-stats {
  display: flex;
  gap: 6px
}

.tb-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--s1);
  border: 1px solid var(--ln);
  font-size: 11px;
  font-weight: 700
}

.tb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.tb-dot.on {
  background: var(--ok);
  box-shadow: 0 0 5px var(--ok)
}

.tb-dot.ac {
  background: var(--info);
  box-shadow: 0 0 5px var(--info)
}

.tb-dot.off {
  background: var(--t2)
}

.tb-val {
  color: var(--t0)
}

.tb-lbl {
  color: var(--t2);
  font-weight: 500
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px
}

.tb-user {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--s1);
  border: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all .13s;
  flex-shrink: 0;
}

.tb-user:hover {
  background: var(--s2);
  border-color: var(--ln2);
}

.tb-avatar {
  font-size: 13.5px;
  font-weight: 800;
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 100%;
  height: 100%;
  user-select: none;
  text-transform: uppercase;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: color .15s, transform .15s;
}

.tb-user:hover .tb-avatar {
  color: #60a5fa;
  transform: scale(1.1);
}

.tb-user-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 290px;
  background: var(--s0);
  border: 1px solid var(--ln2);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity .18s cubic-bezier(0.16, 1, 0.3, 1), transform .18s cubic-bezier(0.16, 1, 0.3, 1), visibility .18s;
  overflow: hidden;
  padding: 8px;
}

.profile-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.p-dd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--s1);
  border-radius: 10px;
  border: 1px solid var(--ln);
  margin-bottom: 6px;
}

.p-dd-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
}

.p-dd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pur, #8b5cf6), #ec4899);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
  transition: transform .15s ease;
}

.p-dd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-dd-avatar-cam {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--acc, #3b82f6);
  color: #fff;
  font-size: 8.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--s0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: transform .15s ease, background .15s;
}

.p-dd-avatar-wrap:hover .p-dd-avatar-cam {
  transform: scale(1.15);
  background: #2563eb;
}

.p-dd-userinfo {
  flex: 1;
  min-width: 0;
}

.p-dd-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-dd-role-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.p-dd-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(139, 92, 246, 0.15);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.p-dd-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: all .13s ease;
  font-family: inherit;
}

.p-dd-item:hover {
  background: var(--s2);
  color: var(--t0);
}

.p-dd-item i {
  font-size: 13px;
  width: 18px;
  text-align: center;
  color: var(--t2);
  transition: color .13s;
}

.p-dd-item:hover i {
  color: var(--acc, #3b82f6);
}

.p-dd-item.item-danger {
  color: #f87171;
}

.p-dd-item.item-danger i {
  color: #f87171;
}

.p-dd-item.item-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.p-dd-item.item-danger:hover i {
  color: #ef4444;
}

.p-dd-sep {
  height: 1px;
  background: var(--ln);
  margin: 4px 6px;
}

.tb-uname {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t0)
}

.tb-urole {
  font-size: 9.5px;
  color: var(--t2)
}

.tb-btn {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--s1);
  border: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  font-size: 13px;
  cursor: pointer;
  transition: all .13s;
  text-decoration: none;
}

.tb-btn:hover {
  background: var(--s2);
  color: var(--t0);
}

.tb-tg-btn {
  color: #229ed9;
}

.tb-tg-btn:hover {
  color: #38bdf8;
  background: var(--s2);
  border-color: var(--ln2);
  transform: scale(1.06);
}

.tb-fs-btn {
  color: #10b981;
}

.tb-fs-btn:hover {
  color: #34d399;
  background: var(--s2);
  border-color: var(--ln2);
  transform: scale(1.06);
}

.tb-theme-btn {
  color: #f59e0b;
}

.tb-theme-btn:hover {
  color: #fcd34d;
  background: var(--s2);
  border-color: var(--ln2);
  transform: scale(1.06);
}

.tb-logout-btn {
  color: #f43f5e;
}

.tb-logout-btn:hover {
  color: #fb7185;
  background: var(--s2);
  border-color: var(--ln2);
  transform: scale(1.06);
}

#section-devices {
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.table-card {
  background: var(--s0);
  border: 1px solid var(--ln);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.table-card:hover {
  border-color: var(--ln2);
}

.table-card .filter-bar {
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--ln);
  background: var(--s0);
  padding: 12px 20px;
}

.table-card .table-area {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--s0);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ln);
  flex-shrink: 0;
  background: var(--s0);
  flex-wrap: wrap
}

.search-wrap {
  position: relative;
  flex: 0 1 46%;
  max-width: 240px;
  min-width: 150px
}

.search-ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t2);
  font-size: 12px;
  pointer-events: none
}

.search-inp {
  width: 100%;
  padding: 8px 12px 8px 32px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--t0);
  outline: none;
  font-family: inherit;
  transition: border-color .14s
}

.search-inp::-webkit-search-decoration,
.search-inp::-webkit-search-cancel-button,
.search-inp::-webkit-search-results-button,
.search-inp::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.search-inp::placeholder {
  color: var(--t2)
}

.search-inp:focus {
  border-color: var(--pur)
}

.f-select {
  padding: 8px 12px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--t0);
  outline: none;
  cursor: pointer;
  font-family: inherit
}

.f-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--s1);
  border: 1px solid var(--ln);
  color: var(--t1);
  cursor: pointer;
  transition: all .13s;
  font-family: inherit;
  white-space: nowrap
}

.f-btn:hover {
  background: var(--s2);
  color: var(--t0)
}

.f-btn.f-pri {
  background: var(--s1);
  border: 1px solid var(--ln);
  color: var(--t1);
}

.f-btn.f-pri i {
  color: var(--pur);
}

.f-btn.f-pri:hover {
  background: var(--s2);
  border-color: var(--ln2);
  color: var(--t0);
}

.bulk-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 24px;
  background: rgba(96, 165, 250, .06);
  border-bottom: 1px solid rgba(96, 165, 250, .15);
  flex-shrink: 0
}

.bulk-bar.show {
  display: flex
}

.bulk-txt {
  font-size: 12px;
  font-weight: 700;
  color: var(--info);
  flex: 1
}

.bulk-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--s1);
  border: 1px solid var(--ln);
  color: var(--t0);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .14s
}

.bulk-btn i {
  color: var(--info);
}

.bulk-btn:hover {
  background: var(--s2);
  border-color: var(--ln2);
  transform: scale(1.03);
}

.bulk-btn.bulk-sec {
  background: var(--s1);
  border: 1px solid var(--ln);
  color: var(--t1)
}

.bulk-btn.bulk-sec i {
  color: var(--err);
}

.bulk-btn.bulk-sec:hover {
  background: var(--s2);
  border-color: var(--ln2);
  color: var(--t0)
}

.table-area {
  flex: 1;
  overflow: auto
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px
}

thead tr {
  background: var(--s1);
  position: sticky;
  top: 0;
  z-index: 1
}

th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .7px;
  border-bottom: 1px solid var(--ln);
  white-space: nowrap;
  user-select: none;
}

th i {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.9;
}

th:hover i {
  transform: translateY(-1px) scale(1.12);
  opacity: 1;
}

.tb-stat i {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ln);
  color: var(--t1);
  vertical-align: middle
}

tbody tr {
  transition: background .12s
}

tbody tr:hover {
  background: var(--s1)
}

.row-check,
.dev-chk {
  width: 13px;
  height: 13px;
  accent-color: var(--info);
  cursor: pointer
}

.mono {
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 11.5px;
  color: var(--t0)
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700
}

.badge-ok {
  background: rgba(74, 222, 128, .1);
  color: var(--ok);
  border: 1px solid rgba(74, 222, 128, .2)
}

.badge-off {
  background: var(--s2);
  color: var(--t2);
  border: 1px solid var(--ln)
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor
}

.batt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600
}

.act-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .13s;
  font-family: inherit;
  white-space: nowrap
}

.act-btn:hover {
  filter: brightness(1.2);
  opacity: .92;
}

.act-pri {
  background: var(--s2);
  color: var(--t0);
  border-color: var(--ln)
}

.act-ok {
  background: rgba(74, 222, 128, .1);
  color: var(--ok);
  border-color: rgba(74, 222, 128, .2)
}

.act-err,
.act-del {
  background: var(--s1);
  color: var(--err);
  border: 1px solid var(--ln);
  font-weight: 600;
  transition: all .14s;
}

.act-err:hover,
.act-del:hover {
  background: var(--s2);
  border-color: var(--ln2);
  color: #fb7185;
  transform: scale(1.04);
}

.act-ctrl {
  background: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
  font-weight: 800;
  transition: all .15s;
}

.act-ctrl:hover {
  background: #f1f5f9;
  color: #000000;
  border-color: #f1f5f9;
  transform: scale(1.04);
}

html.light .act-ctrl {
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}

html.light .act-ctrl:hover {
  background: #1e293b;
  color: #ffffff;
  border-color: #1e293b;
}

.act-warn {
  background: var(--s1);
  color: var(--warn);
  border: 1px solid var(--ln);
}

.act-warn:hover {
  background: var(--s2);
  border-color: var(--ln2);
  color: #fcd34d;
  transform: scale(1.04);
}

.act-xfer {
  background: var(--s1);
  color: var(--info);
  border: 1px solid var(--ln);
}

.act-xfer:hover {
  background: var(--s2);
  border-color: var(--ln2);
  color: #38bdf8;
  transform: scale(1.04);
}

.adb-btn {
  background: var(--s1);
  color: #3b82f6;
  border: 1px solid var(--ln);
  font-weight: 600;
  letter-spacing: .4px;
  transition: all .14s
}

.adb-btn:hover {
  background: var(--s2);
  border-color: var(--ln2);
  color: #60a5fa;
  transform: scale(1.04);
}

.adb-input {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--ln2);
  border-radius: 8px;
  color: var(--t1);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  font-family: 'JetBrains Mono', monospace;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s
}

.adb-input:focus {
  border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .15)
}

.adb-input::placeholder {
  color: var(--t3)
}

.adb-log {
  background: #0a0f0a;
  border: 1px solid rgba(52, 211, 153, .18);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  color: var(--t2);
  min-height: 80px;
  max-height: 150px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.7
}

.adb-device-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 8px;
  padding: 8px 12px
}

.adb-tab {
  padding: 6px 12px;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 2px solid transparent;
}

.adb-tab:hover {
  color: var(--t1);
  background: var(--s1)
}

.adb-tab.active {
  color: #34d399;
  border-bottom-color: #34d399;
  background: rgba(52, 211, 153, .07)
}

.adb-pane {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.adb-ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  background: var(--s1);
  border: 1px solid var(--ln2);
  border-radius: 10px;
  color: var(--t1);
  font-size: 11px;
  cursor: pointer;
  transition: all .14s;
  font-family: inherit
}

.adb-ctrl-btn i {
  font-size: 15px;
  color: #34d399
}

.adb-ctrl-btn:hover {
  background: rgba(52, 211, 153, .1);
  border-color: rgba(52, 211, 153, .3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 211, 153, .1)
}

.adb-full-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: opacity .15s, transform .15s
}

.adb-full-btn:hover {
  opacity: .88;
  transform: translateY(-1px)
}

.adb-full-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  padding: 60px 20px;
  color: var(--t2)
}

.empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--s1);
  border: 1px solid var(--ln2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--t3);
  position: relative
}

.empty-x {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--err);
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: #fff
}

.empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1)
}

.empty-sub {
  font-size: 12.5px;
  color: var(--t2);
  text-align: center;
  max-width: 280px;
  line-height: 1.6
}

.pager {
  display: none !important;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--ln);
  background: var(--s0);
  flex-shrink: 0;
  flex-wrap: wrap
}

.pager-info {
  font-size: 12px;
  color: var(--t2);
  flex: 1
}

.pager-info span {
  color: var(--t0);
  font-weight: 600
}

.pg-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--ln);
  background: var(--s1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t1);
  font-size: 12px;
  cursor: pointer;
  transition: all .13s
}

.pg-btn:hover:not(:disabled) {
  background: var(--s2);
  color: var(--t0)
}

.pg-btn:disabled {
  opacity: .35;
  cursor: not-allowed
}

.pg-num {
  min-width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--ln);
  background: var(--s1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t0);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .13s;
  padding: 0 8px
}

.pg-num.pg-active {
  background: var(--pur);
  border-color: var(--pur);
  color: #fff
}

.pg-num:hover:not(.pg-active) {
  background: var(--s2)
}

.pg-size {
  padding: 6px 10px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 7px;
  font-size: 12px;
  color: var(--t0);
  outline: none;
  cursor: pointer
}

.pg-jump {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t2)
}

.pg-jump input {
  width: 46px;
  padding: 5px 8px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 7px;
  font-size: 12px;
  color: var(--t0);
  outline: none;
  text-align: center;
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace
}

.section-wrap {
  display: none;
  flex: 1;
  overflow-y: auto;
  flex-direction: column
}

.section-wrap.section-show {
  display: flex
}

.apk-panel {
  display: none !important;
}

.apk-panel.apk-panel-show {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#apk-panel-list.apk-panel-show {
  display: block !important;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#apk-panel-build.apk-panel-show {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.apk-form-wrap {
  flex: 1;
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.apk-card {
  background: var(--s0);
  border: 1px solid var(--ln);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05)
}

.apk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px
}

.apk-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px
}

.apk-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--pur2);
  border: 1px solid var(--pur3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pur);
  font-size: 14px
}

.apk-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--t0)
}

.apk-card-step {
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  color: var(--t2);
  font-weight: 600;
  letter-spacing: 1px
}

.apk-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 8px;
  display: block
}

.apk-divider {
  display: none
}

.apk-inp {
  width: 100%;
  padding: 13px 16px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 10px;
  font-size: 13px;
  color: var(--t0);
  outline: none;
  font-family: inherit;
  transition: border-color .14s
}

.apk-inp::placeholder {
  color: var(--t2)
}

.apk-inp:focus {
  border-color: var(--pur);
  box-shadow: 0 0 0 2px var(--pur2)
}

.apk-textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 10px;
  font-size: 13px;
  color: var(--t0);
  outline: none;
  font-family: inherit;
  resize: vertical;
  line-height: 1.7;
  transition: border-color .14s;
  min-height: 160px
}

.apk-textarea:focus {
  border-color: var(--pur);
  box-shadow: 0 0 0 2px var(--pur2)
}

.apk-sel {
  width: 100%;
  padding: 13px 16px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 10px;
  font-size: 13px;
  color: var(--t0);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  transition: border-color .14s
}

.apk-sel option {
  background: var(--s1)
}

.apk-sel:focus {
  border-color: var(--pur)
}

.apk-row {
  display: flex;
  gap: 10px;
  align-items: center
}

.apk-rand-btn {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--s1);
  border: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t1);
  font-size: 14px;
  cursor: pointer;
  transition: all .13s
}

.apk-rand-btn:hover {
  background: var(--s2);
  color: var(--t0)
}

.apk-bg-preview {
  width: 220px;
  height: 620px;
  border-radius: 10px;
  background: var(--s1);
  border: 1.5px dashed var(--ln2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  overflow: hidden
}

.apk-bg-preview:hover {
  border-color: var(--pur)
}

.apk-bg-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.apk-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--s2);
  border: 1px solid var(--ln2);
  font-size: 13px;
  font-weight: 700;
  color: var(--t0);
  cursor: pointer;
  transition: all .14s;
  font-family: inherit
}

.apk-upload-btn:hover {
  background: var(--s3);
  transform: translateY(-1px)
}

.apk-gallery-wrap {
  margin-top: 16px;
  border-top: 1px dashed var(--ln);
  padding-top: 16px
}

.apk-gallery-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px
}

.apk-gallery-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin
}

.apk-gallery-grid::-webkit-scrollbar {
  height: 4px
}

.apk-gallery-grid::-webkit-scrollbar-thumb {
  background: var(--s3);
  border-radius: 4px
}

.apk-gallery-item {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: 1px solid var(--ln);
  background: var(--s1);
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  transition: all .15s
}

.apk-gallery-item:hover {
  border-color: var(--pur);
  transform: translateY(-2px)
}

.apk-gallery-item.selected {
  border-color: #4f7fff;
  box-shadow: 0 0 0 2px #4f7fff, 0 4px 12px rgba(79, 127, 255, 0.4);
  position: relative;
}

.apk-gallery-item.selected::after {
  content: '✓';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  background: #4f7fff;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.apk-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.apk-bg-gallery .apk-gallery-item {
  width: 50px;
  height: 90px
}

.apk-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center
}

.apk-icon-add {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  border: 2px dashed var(--ln2);
  background: var(--s1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s
}

.apk-icon-add:hover {
  border-color: var(--pur);
  color: var(--pur);
  background: var(--pur2)
}

.apk-icon-thumb {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--ln2);
  position: relative
}

.apk-icon-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.apk-icon-del {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--err);
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--bg)
}

.apk-build-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: var(--t0);
  color: var(--bg);
  font-size: 15px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .15s
}

.apk-build-btn:hover {
  opacity: .88;
  transform: translateY(-1px)
}

.apk-build-btn:active {
  transform: scale(.98)
}

.apk-build-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
  display: none
}

.apk-build-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px;
  background: var(--s0);
  border: 1px solid var(--ln2);
  border-radius: 16px;
  min-width: 300px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6)
}

.apk-build-spinner {
  font-size: 32px;
  color: var(--pur)
}

.apk-build-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--t0)
}

.apk-build-track {
  width: 100%;
  height: 5px;
  background: var(--s2);
  border-radius: 99px;
  overflow: hidden
}

.apk-build-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pur), #be123c);
  border-radius: 99px;
  transition: width .4s
}

.apk-build-msg {
  font-size: 12px;
  color: var(--t1);
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace
}

.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  backdrop-filter: blur(4px)
}

.panel-overlay.open {
  opacity: 1;
  pointer-events: all
}

.side-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  max-width: 95vw;
  background: var(--s0);
  border-left: 1px solid var(--ln2);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -16px 0 48px rgba(0, 0, 0, .6)
}

.side-panel.open {
  transform: translateX(0)
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ln);
  flex-shrink: 0
}

.panel-head-l {
  display: flex;
  align-items: center;
  gap: 10px
}

.panel-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px
}

.panel-ico.ico-pur {
  background: var(--pur2);
  border: 1px solid var(--pur3);
  color: var(--pur)
}

.panel-ico.ico-blue {
  background: rgba(96, 165, 250, .1);
  border: 1px solid rgba(96, 165, 250, .25);
  color: var(--info)
}

.panel-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--t0)
}

.panel-sub {
  font-size: 10.5px;
  color: var(--t2);
  margin-top: 2px;
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace
}

.panel-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--s1);
  border: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  font-size: 11px;
  cursor: pointer;
  transition: all .13s
}

.panel-close:hover {
  background: var(--s2);
  color: var(--t0)
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.sec-lbl {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px
}

.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px
}

.preset-btn {
  padding: 9px 11px;
  border-radius: 7px;
  background: var(--s1);
  border: 1px solid var(--ln);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t1);
  cursor: pointer;
  transition: all .13s;
  display: flex;
  align-items: center;
  gap: 7px
}

.preset-btn:hover {
  background: var(--s2);
  color: var(--t0);
  border-color: var(--ln2)
}

.preset-btn i {
  color: var(--pur);
  font-size: 11px;
  width: 11px;
  text-align: center
}

.panel-textarea {
  width: 100%;
  min-height: 100px;
  padding: 11px 13px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--t0);
  outline: none;
  resize: vertical;
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
  line-height: 1.6;
  transition: border-color .14s
}

.panel-textarea:focus {
  border-color: var(--pur)
}

.opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 7px
}

.opt-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--t1)
}

.opt-lbl small {
  font-size: 10px;
  color: var(--t2);
  display: block;
  margin-top: 1px;
  font-weight: 400
}

.toggle {
  width: 34px;
  height: 18px;
  border-radius: 99px;
  background: var(--s3);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .2s;
  flex-shrink: 0
}

.toggle.ton {
  background: var(--pur)
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s
}

.toggle.ton::after {
  transform: translateX(16px)
}

.log-box {
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 7px;
  padding: 11px 13px;
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 11px;
  color: var(--t2);
  min-height: 70px;
  max-height: 130px;
  overflow-y: auto;
  line-height: 1.7
}

.log-ok {
  color: var(--ok)
}

.log-err {
  color: var(--err)
}

.log-info {
  color: var(--pur)
}

.panel-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--ln);
  flex-shrink: 0;
  display: flex;
  gap: 7px
}

.panel-cancel {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--s1);
  color: var(--t1);
  border: 1px solid var(--ln);
  cursor: pointer;
  transition: all .13s;
  font-family: inherit
}

.panel-cancel:hover {
  background: var(--s2);
  color: var(--t0)
}

.panel-run {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .14s
}

.panel-run.run-pur {
  background: var(--pur);
  color: #fff
}

.panel-run.run-pur:hover {
  background: #9061f9;
  transform: translateY(-1px)
}

.panel-run.run-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff
}

.panel-run.run-blue:hover {
  opacity: .88;
  transform: translateY(-1px)
}

.panel-run:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none !important
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  backdrop-filter: blur(6px)
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 500px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--s0);
  border: 1px solid var(--ln2);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .7);
  z-index: 1101;
  opacity: 0;
  pointer-events: none;
  transition: all .24s cubic-bezier(.34, 1.3, .64, 1)
}

.modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%)
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ln);
  background: var(--s0);
  border-radius: 16px 16px 0 0;
  position: sticky;
  top: 0;
  z-index: 1
}

.modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--ln);
  display: flex;
  gap: 7px;
  background: var(--s0);
  border-radius: 0 0 16px 16px;
  position: sticky;
  bottom: 0
}

.m-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px
}

.xfer-flow {
  display: flex;
  align-items: stretch;
  gap: 9px;
  padding: 13px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 11px
}

.xfer-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--ln)
}

.xfer-box.xfer-to {
  border-color: rgba(96, 165, 250, .2);
  background: rgba(96, 165, 250, .04)
}

.xfer-box-ico {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--s2);
  color: var(--t1)
}

.xfer-box.xfer-to .xfer-box-ico {
  background: rgba(96, 165, 250, .1);
  color: var(--info)
}

.xfer-box-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .7px
}

.xfer-box-val {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t0);
  margin-top: 2px;
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
  word-break: break-all
}

.xfer-box-meta {
  font-size: 10px;
  color: var(--t2);
  margin-top: 2px
}

.xfer-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
  color: var(--info);
  font-size: 17px
}

.xfer-arrow-lbl {
  font-size: 9px;
  color: var(--t2);
  font-weight: 600;
  white-space: nowrap
}

.m-inp-wrap {
  position: relative
}

.m-inp {
  width: 100%;
  padding: 10px 34px 10px 13px;
  background: var(--s1);
  border: 1.5px solid var(--ln);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--t0);
  outline: none;
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
  transition: border-color .14s
}

.m-inp::placeholder {
  color: var(--t2);
  font-family: inherit;
  font-size: 12px
}

.m-inp:focus {
  border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .1)
}

.m-inp-clr {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  cursor: pointer;
  font-size: 12px;
  transition: color .13s
}

.m-inp-clr:hover {
  color: var(--err)
}

.recent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px
}

.r-chip {
  padding: 4px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: var(--s1);
  border: 1px solid var(--ln);
  color: var(--t1);
  cursor: pointer;
  transition: all .13s;
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
  display: flex;
  align-items: center;
  gap: 5px
}

.r-chip:hover {
  background: rgba(96, 165, 250, .1);
  border-color: rgba(96, 165, 250, .3);
  color: var(--info)
}

.r-chip-del {
  color: var(--t3);
  font-size: 10px
}

.r-chip-del:hover {
  color: var(--err)
}

.xfer-modes {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.xfer-mode {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 8px;
  border: 1.5px solid var(--ln);
  background: var(--s1);
  cursor: pointer;
  transition: all .15s
}

.xfer-mode:hover {
  border-color: var(--ln2);
  background: var(--s2)
}

.xfer-mode.xfer-sel {
  border-color: var(--info);
  background: rgba(96, 165, 250, .06)
}

.xm-ico {
  font-size: 17px;
  flex-shrink: 0;
  width: 26px;
  text-align: center
}

.xm-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--t0)
}

.xm-desc {
  font-size: 10.5px;
  color: var(--t2);
  margin-top: 1px
}

.xfer-prog {
  display: none;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 10px
}

.xfer-prog.xp-show {
  display: flex
}

.xp-steps {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.xp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--t2);
  padding: 3px 0
}

.xp-ic {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--t3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px
}

.xp-step.xp-done {
  color: var(--ok)
}

.xp-step.xp-done .xp-ic {
  background: var(--ok);
  border-color: var(--ok);
  color: #000
}

.xp-step.xp-run {
  color: var(--t0)
}

.xp-step.xp-run .xp-ic {
  border-color: var(--info);
  color: var(--info);
  animation: spin .8s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.xp-track {
  height: 4px;
  background: var(--s3);
  border-radius: 99px;
  overflow: hidden
}

.xp-bar {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--info), #2563eb);
  transition: width .4s;
  box-shadow: 0 0 7px rgba(96, 165, 250, .5)
}

.xp-bar.xp-ok {
  background: linear-gradient(90deg, var(--ok), #16a34a)
}

.xp-msg {
  font-size: 11px;
  color: var(--t1);
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace
}

#toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t0);
  background: var(--s1);
  border: 1px solid var(--ln2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  animation: toastIn .22s cubic-bezier(.34, 1.3, .64, 1);
  pointer-events: all
}

.toast-item.t-ok {
  border-color: rgba(74, 222, 128, .3);
  color: var(--ok)
}

.toast-item.t-err {
  border-color: rgba(248, 113, 113, .3);
  color: var(--err)
}

.toast-item.t-warn {
  border-color: rgba(250, 204, 21, .3);
  color: var(--warn)
}

.toast-item.t-info {
  border-color: var(--pur3);
  color: var(--pur)
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.section-wrap {
  --border: var(--ln);
  --border2: var(--ln2);
  --bg1: var(--s1);
  --bg2: var(--s2);
  --bg3: var(--s3);
  --acc: var(--pur);
  --acc2: var(--pur);
  --acc-glow: var(--pur2);
  --acc-glow2: var(--pur3);
  --ok-glow: rgba(74, 222, 128, .2);
  --err-glow: rgba(248, 113, 113, .2);
}

.apkbuilder-card {
  background: var(--s0);
  border: 1px solid var(--ln);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.apkbuilder-card:hover {
  border-color: var(--ln2);
}

.apkbuilder-card .bld-tab-strip {
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--ln);
  background: var(--s0);
  margin: 0;
  padding: 0 24px;
}

.apkbuilder-card #apk-panel-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 60px;
}

.apkbuilder-card #apk-panel-build {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.apkbuilder-card .wiz-content-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.bld-tab-strip {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  margin: 0 0 20px 0;
  padding: 0 28px;
  flex-shrink: 0;
  animation: bld-fadeUp .4s cubic-bezier(.2, .8, .2, 1) .1s both
}

@keyframes bld-fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.bld-tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .18s;
  letter-spacing: .01em
}

.bld-tab-item:hover {
  color: var(--t1)
}

.bld-tab-item.active {
  color: var(--t0);
  border-bottom-color: var(--acc)
}

.bld-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(57, 232, 143, .15);
  border: 1px solid rgba(57, 232, 143, .25);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ok);
  font-family: 'JetBrains Mono', monospace;
  margin-left: 4px
}

.wiz-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px 16px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative
}

.wiz-stepper::-webkit-scrollbar {
  display: none
}

.wiz-stepper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: var(--border)
}

.wiz-content-area {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.bld-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

@keyframes wiz-slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0)
  }

  to {
    opacity: 0;
    transform: translateX(30px)
  }
}

.wiz-nav-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  background: var(--bg1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 12px;
  margin-top: auto;
  flex-shrink: 0
}

.wiz-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  border: none;
  font-family: inherit
}

.wiz-nav-btn.prev {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--t1)
}

.wiz-nav-btn.prev:hover {
  background: var(--bg3);
  color: var(--t0);
  border-color: var(--border2)
}

.wiz-nav-btn.prev.hidden {
  visibility: hidden;
  pointer-events: none
}

.wiz-nav-btn.next {
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: #fff;
  box-shadow: 0 4px 16px var(--acc-glow);
  position: relative;
  overflow: hidden
}

.wiz-nav-btn.next:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--acc-glow), 0 4px 16px var(--acc-glow2)
}

.wiz-nav-btn.next:active {
  transform: scale(.97)
}

.wiz-nav-btn.next.build-mode {
  background: linear-gradient(135deg, #1adb7a, #39e88f);
  box-shadow: 0 4px 20px var(--ok-glow)
}

.wiz-nav-btn.next.build-mode:hover {
  box-shadow: 0 8px 30px var(--ok-glow)
}

.wiz-nav-btn.next .wiz-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  animation: bld-shimmer 3s ease-in-out infinite
}

.wiz-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}

.wiz-nav-step-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  font-family: 'JetBrains Mono', monospace
}

.wiz-nav-progress {
  width: 100px;
  height: 3px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden
}

.wiz-nav-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  border-radius: 3px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1)
}

.bld-form-wrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 28px 80px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  box-sizing: border-box;
}

@media (max-width: 960px) {
  .bld-form-wrap {
    grid-template-columns: 1fr;
    max-width: 620px;
    padding: 16px 16px 60px;
  }

  .bld-build-loading {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .app {
    padding: 8px;
    gap: 8px;
  }
  .sidebar {
    width: 60px;
    border-radius: 10px;
  }
  .main {
    gap: 8px;
  }
  .topbar {
    padding: 0 12px;
    border-radius: 10px;
    height: auto;
    min-height: 52px;
  }
  .table-card,
  .apkbuilder-card {
    border-radius: 10px;
  }
}

.bld-section {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}

.bld-section:hover {
  border-color: var(--border2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}

.bld-sec-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border)
}

.bld-sec-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0
}

.bld-sec-icon.blue {
  background: rgba(79, 127, 255, .12);
  color: var(--acc)
}

.bld-sec-icon.purple {
  background: rgba(168, 85, 247, .12);
  color: #a855f7;
}

.bld-sec-icon.green {
  background: rgba(57, 232, 143, .1);
  color: var(--ok)
}

.bld-sec-icon.red {
  background: rgba(255, 92, 122, .1);
  color: var(--err)
}

.bld-sec-icon.warn {
  background: rgba(255, 181, 71, .1);
  color: var(--warn)
}

.bld-sec-icon.info {
  background: rgba(79, 158, 255, .1);
  color: var(--info)
}

.bld-sec-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--t0);
  letter-spacing: -.1px
}

.bld-sec-desc {
  font-size: 11.5px;
  color: var(--t2);
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace
}

.bld-field {
  margin-bottom: 10px
}

.bld-field:last-child {
  margin-bottom: 0
}

.bld-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .06em
}

.bld-fi {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--t0);
  outline: none;
  transition: all .18s;
  font-family: inherit
}

.bld-fi::placeholder {
  color: var(--t3)
}

.bld-fi:focus {
  border-color: rgba(79, 127, 255, .5);
  background: var(--bg3);
  box-shadow: 0 0 0 3px var(--acc-glow)
}

.bld-fi:hover:not(:focus) {
  border-color: var(--border2)
}

select.bld-fi {
  cursor: pointer
}

select.bld-fi option {
  background: var(--bg2);
  color: var(--t0)
}

textarea.bld-fi {
  resize: vertical;
  line-height: 1.6;
  font-size: 12.5px
}

.bld-fi-row {
  display: flex;
  gap: 8px;
  align-items: stretch
}

.bld-fi-row .bld-fi {
  flex: 1
}

.bld-dd-pair {
  display: flex;
  gap: 10px
}

.bld-dd-pair .bld-fi {
  flex: 1
}

.bld-input-group {
  position: relative
}

.bld-input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  font-size: 12px;
  pointer-events: none;
  transition: color .18s
}

.bld-input-group .bld-fi {
  padding-left: 36px
}

.bld-input-group:focus-within .bld-input-icon {
  color: var(--acc)
}

.bld-fi-ic {
  width: 40px;
  height: 40px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  flex-shrink: 0;
  cursor: pointer;
  transition: all .18s
}

.bld-fi-ic:hover {
  background: var(--bg3);
  color: var(--acc);
  border-color: rgba(79, 127, 255, .4);
  box-shadow: 0 0 0 3px var(--acc-glow)
}

.bld-pkg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(79, 127, 255, .08);
  border: 1px solid rgba(79, 127, 255, .2);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--acc);
  cursor: pointer;
  transition: all .15s
}

.bld-pkg-chip:hover {
  background: rgba(79, 127, 255, .18);
  border-color: rgba(79, 127, 255, .4);
  transform: translateY(-1px)
}

.bld-pkg-suggestions {
  margin-top: 8px
}

.bld-pkg-sug-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px
}

.bld-pkg-sug-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px
}

.bld-pkg-sug-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  transition: all .15s
}

.bld-pkg-sug-pill:hover {
  background: var(--bg3);
  color: var(--t0);
  border-color: rgba(79, 127, 255, .35);
  box-shadow: 0 0 0 2px rgba(79, 127, 255, .1)
}

.bld-pkg-sug-pill .bld-sug-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700
}

.bld-sug-tag.net {
  background: rgba(79, 127, 255, .15);
  color: var(--acc)
}

.bld-sug-tag.com {
  background: rgba(57, 232, 143, .12);
  color: var(--ok)
}

.bld-sug-tag.org {
  background: rgba(255, 181, 71, .12);
  color: var(--warn)
}

.bld-sug-tag.io {
  background: rgba(244, 63, 94, .15);
  color: var(--acc2)
}

.bld-pkg-hint {
  font-size: 10.5px;
  margin-top: 5px;
  display: none;
  align-items: center;
  gap: 5px;
  font-weight: 600
}

.bld-pkg-hint.ok {
  display: flex;
  color: var(--ok)
}

.bld-pkg-hint.err {
  display: flex;
  color: var(--err)
}

.bld-bg-upload-wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap
}

.bld-phone-mockup {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

.bld-phone-frame {
  width: 200px;
  height: 400px;
  background: #0a0a0f;
  border-radius: 12px;
  border: 2.5px solid #2a2a40;
  box-shadow: 0 0 0 1px #111, 0 20px 60px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .04);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s
}

.bld-phone-frame:hover {
  transform: scale(1.02);
  box-shadow: 0 0 0 1px #111, 0 28px 70px rgba(0, 0, 0, .8), 0 0 30px rgba(79, 127, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06)
}

.bld-phone-screen {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden
}

.bld-phone-screen img.bld-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.bld-phone-screen-empty {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px
}

.bld-phone-screen-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 20px 20px
}

.bld-phone-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .2);
  position: relative;
  z-index: 1;
  animation: bld-floatIcon 3s ease-in-out infinite
}

@keyframes bld-floatIcon {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-6px)
  }
}

.bld-phone-empty-txt {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .18);
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.5
}

.bld-phone-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  z-index: 5
}

.bld-phone-frame:hover .bld-phone-overlay {
  display: flex
}

.bld-phone-overlay svg {
  color: #fff;
  opacity: .85
}

.bld-phone-overlay span {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  opacity: .85
}

.bld-phone-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--t2);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px
}

.bld-dot-ind {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border2)
}

.bld-dot-ind.has-img {
  background: var(--ok);
  box-shadow: 0 0 5px var(--ok)
}

.bld-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  transition: all .18s
}

.bld-upload-btn:hover {
  background: var(--bg3);
  color: var(--t0);
  border-color: var(--border2)
}

.bld-tip-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 181, 71, .08);
  border: 1px solid rgba(255, 181, 71, .2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--warn)
}

.bld-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap
}

.bld-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px
}

.bld-icon-thumb {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s
}

.bld-icon-thumb:hover {
  border-color: var(--border2);
  transform: scale(1.04)
}

.bld-icon-thumb.active-icon {
  border-color: #4f7fff;
  box-shadow: 0 0 0 2px #4f7fff, 0 4px 12px rgba(79, 127, 255, 0.35);
  cursor: pointer;
}

.bld-icon-thumb.active-icon::after {
  content: '✓';
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: #4f7fff;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.bld-icon-badge-active {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: #4f7fff;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.bld-icon-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
  display: block
}

.bld-icon-del {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 19px;
  height: 19px;
  background: var(--err);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 2px 8px var(--err-glow);
  z-index: 2;
  transition: all .15s;
  opacity: 0
}

.bld-icon-thumb:hover .bld-icon-del {
  opacity: 1
}

.bld-icon-del:hover {
  transform: scale(1.2)
}

.bld-icon-add-btn {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 1.5px dashed var(--border2);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t3);
  font-size: 20px;
  transition: all .18s;
  position: relative;
  overflow: hidden
}

.bld-icon-add-btn:hover {
  border-color: rgba(79, 127, 255, .4);
  color: var(--acc);
  background: rgba(79, 127, 255, .04);
  transform: scale(1.04)
}

.bld-icon-add-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer
}

.bld-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(79, 127, 255, .15);
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--acc);
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace
}

.bld-build-btn-wrap {
  margin-top: 4px
}

.bld-build-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: all .2s;
  box-shadow: 0 4px 20px var(--acc-glow), 0 4px 20px var(--acc-glow2);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  font-family: inherit
}

.bld-build-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent);
  opacity: 0;
  transition: opacity .2s
}

.bld-build-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--acc-glow), 0 8px 30px var(--acc-glow2)
}

.bld-build-btn:hover::before {
  opacity: 1
}

.bld-build-btn:active {
  transform: scale(.98)
}

.bld-build-btn .bld-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  animation: bld-shimmer 3s ease-in-out infinite
}

@keyframes bld-shimmer {
  0% {
    left: -100%
  }

  100% {
    left: 200%
  }
}

.bld-build-loading {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 800px;
  margin: 16px auto;
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
  animation: bldFadeSlide .3s ease both;
}

.bld-build-loading.show {
  display: flex;
}

@keyframes bldFadeSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bld-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bld-box-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bld-box-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(57, 232, 143, .2);
  border-top-color: var(--ok);
  border-radius: 50%;
  animation: bldSpin .8s linear infinite;
}

.bld-box-spinner.done {
  display: none;
}

@keyframes bldSpin {
  to {
    transform: rotate(360deg);
  }
}

.bld-box-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t0);
}

.bld-box-pct {
  font-size: 22px;
  font-weight: 800;
  color: var(--ok);
  font-family: 'JetBrains Mono', monospace;
}

.bld-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, .06);
  border-radius: 6px;
  overflow: hidden;
}

.bld-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #39e88f, #00d2ff);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.bld-bar-fill.done {
  background: #39e88f;
}

.bld-box-msg {
  font-size: 13px;
  color: var(--t2);
  font-family: 'JetBrains Mono', monospace;
  margin-top: -4px;
}

.bld-simple-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.bld-step-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  font-size: 13px;
  color: var(--t2);
  transition: all .2s ease;
}

.bld-step-item.active {
  background: rgba(57, 232, 143, .08);
  color: #fff;
  font-weight: 600;
}

.bld-step-item.done {
  color: var(--ok);
}

.bld-step-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bld-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  flex-shrink: 0;
}

.bld-step-item.active .bld-step-dot {
  background: #39e88f;
  box-shadow: 0 0 8px rgba(57, 232, 143, .8);
}

.bld-step-item.done .bld-step-dot {
  background: var(--ok);
}

.bld-step-stat {
  font-size: 12px;
  color: var(--t3);
  font-family: 'JetBrains Mono', monospace;
}

.bld-step-item.active .bld-step-stat {
  color: #39e88f;
}

.bld-step-item.done .bld-step-stat {
  color: var(--ok);
}

.bld-simple-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}

.bld-simple-success.show {
  display: flex;
  animation: bldFadeSlide .3s ease both;
}

.bld-succ-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(57, 232, 143, .1);
  border: 1px solid rgba(57, 232, 143, .25);
  border-radius: 8px;
  color: var(--ok);
  font-size: 14px;
  font-weight: 700;
}

.bld-succ-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.bld-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 24px;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(57, 232, 143, .08) 0%, transparent 70%);
  overflow: hidden;
}

.bld-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
      transparent,
      transparent 24px,
      rgba(57, 232, 143, .025) 24px,
      rgba(57, 232, 143, .025) 25px);
  pointer-events: none;
}

.bld-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
  animation: bldOrbDrift 8s ease-in-out infinite;
}

.bld-orb-1 {
  width: 120px;
  height: 120px;
  background: rgba(57, 232, 143, .12);
  top: -30px;
  left: 10%;
  animation-delay: 0s;
}

.bld-orb-2 {
  width: 80px;
  height: 80px;
  background: rgba(0, 200, 255, .09);
  bottom: 0;
  right: 12%;
  animation-delay: -3s;
}

.bld-orb-3 {
  width: 60px;
  height: 60px;
  background: rgba(150, 100, 255, .08);
  top: 30%;
  left: 60%;
  animation-delay: -5s;
}

@keyframes bldOrbDrift {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-14px) scale(1.08);
  }
}

.bld-ring-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  z-index: 1;
}

.bld-ring-svg {
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
}

.bld-ring-bg {
  fill: none;
  stroke: rgba(57, 232, 143, .1);
  stroke-width: 8;
}

.bld-ring-track {
  fill: none;
  stroke: url(#bldRingGrad);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 439.82;
  stroke-dashoffset: 439.82;
  transition: stroke-dashoffset 0.6s cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 0 8px rgba(57, 232, 143, .7));
}

.bld-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bld-ring-pct {
  font-size: 38px;
  font-weight: 900;
  color: #39e88f;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -2px;
  line-height: 1;
  text-shadow: 0 0 24px rgba(57, 232, 143, .6);
  transition: all .15s;
}

.bld-ring-pct-sym {
  font-size: 14px;
  font-weight: 700;
  color: rgba(57, 232, 143, .7);
  margin-top: 1px;
}

.bld-ring-label {
  font-size: 10px;
  color: rgba(57, 232, 143, .55);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2px;
}

.bld-pulse-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(57, 232, 143, .15);
  animation: bldPulseRing 2s ease-out infinite;
}

.bld-pulse-ring:nth-child(2) {
  inset: -24px;
  animation-delay: .6s;
}

.bld-pulse-ring:nth-child(3) {
  inset: -36px;
  animation-delay: 1.2s;
}

@keyframes bldPulseRing {
  0% {
    opacity: .6;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

.bld-hero-text {
  margin-top: 20px;
  text-align: center;
  z-index: 1;
}

.bld-hero-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--t0);
  margin-bottom: 4px;
  letter-spacing: .3px;
}

.bld-hero-sub {
  font-size: 12px;
  color: var(--t2);
  transition: color .3s;
}

.bld-terminal {
  background: rgba(0, 0, 0, .35);
  border-top: 1px solid rgba(57, 232, 143, .12);
  padding: 0;
  overflow: hidden;
}

.bld-term-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(57, 232, 143, .04);
  border-bottom: 1px solid rgba(57, 232, 143, .08);
}

.bld-term-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.bld-term-dot:nth-child(1) {
  background: #ff5f57;
}

.bld-term-dot:nth-child(2) {
  background: #febc2e;
}

.bld-term-dot:nth-child(3) {
  background: #28c840;
}

.bld-term-title {
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(57, 232, 143, .5);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: -24px;
}

.bld-term-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0 4px;
}

.bld-bl-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, .3);
  border-bottom: 1px solid rgba(255, 255, 255, .03);
  transition: all .3s cubic-bezier(.2, .8, .2, 1);
  position: relative;
  overflow: hidden;
}

.bld-bl-step:last-child {
  border-bottom: 0;
}

.bld-bl-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background .3s;
}

.bld-bl-step.active::before {
  background: #39e88f;
  box-shadow: 0 0 8px rgba(57, 232, 143, .8);
}

.bld-bl-step.done::before {
  background: rgba(57, 232, 143, .4);
}

.bld-bl-step.active {
  color: #fff;
  background: rgba(57, 232, 143, .04);
}

.bld-bl-step.done {
  color: rgba(57, 232, 143, .7);
}

.bld-bl-step-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  transition: all .3s;
}

.bld-bl-step.active .bld-bl-step-icon {
  border-color: rgba(57, 232, 143, .5);
  background: rgba(57, 232, 143, .1);
  color: #39e88f;
  animation: bldIconSpin 2s linear infinite;
}

.bld-bl-step.done .bld-bl-step-icon {
  border-color: rgba(57, 232, 143, .4);
  background: rgba(57, 232, 143, .08);
  color: rgba(57, 232, 143, .8);
}

@keyframes bldIconSpin {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.bld-bl-step-num {
  font-size: 9px;
  color: rgba(255, 255, 255, .2);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.bld-bl-step.active .bld-bl-step-num {
  color: rgba(57, 232, 143, .6);
}

.bld-bl-step.done .bld-bl-step-num {
  color: rgba(57, 232, 143, .4);
}

.bld-bl-step-label {
  flex: 1;
}

.bld-bl-step-time {
  font-size: 10px;
  color: rgba(255, 255, 255, .2);
  transition: color .3s;
}

.bld-bl-step.done .bld-bl-step-time {
  color: rgba(57, 232, 143, .5);
}

.bld-bl-step.active .bld-bl-step-time {
  color: rgba(57, 232, 143, .7);
}

.bld-bl-step.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(57, 232, 143, .04) 50%, transparent 100%);
  animation: bldScanLine 1.5s ease-in-out infinite;
}

@keyframes bldScanLine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.bld-success-area {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border)
}

.bld-success-area.show {
  display: flex;
  animation: bld-fadeUp .4s cubic-bezier(.2, .8, .2, 1) both
}

@keyframes bld-fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bld-success-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(57, 232, 143, .08);
  border: 1px solid rgba(57, 232, 143, .2);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ok)
}

.bld-success-area {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border)
}

.bld-success-area.show {
  display: flex;
  animation: bld-fadeUp .4s cubic-bezier(.2, .8, .2, 1) both
}

.bld-success-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(57, 232, 143, .08);
  border: 1px solid rgba(57, 232, 143, .2);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ok)
}

.bld-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--ok);
  color: #000;
  font-weight: 700;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 2px 12px rgba(57, 232, 143, .3);
  transition: all .18s;
  text-decoration: none;
}

.bld-dl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(57, 232, 143, .5);
}

.bld-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--t1);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
}

.bld-copy-btn:hover {
  background: var(--bg3);
  color: var(--t0);
}

.bld-goto-prod-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--t1);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
}

.bld-goto-prod-btn:hover {
  background: var(--bg3);
  color: var(--t0);
}

.bld-prod-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px
}

.bld-prod-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.bld-prod-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--t0)
}

.bld-prod-page-sub {
  font-size: 12px;
  color: var(--t2);
  font-family: 'JetBrains Mono', monospace
}

.bld-prod-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  transition: all .18s
}

.bld-prod-refresh-btn:hover {
  background: var(--bg3);
  color: var(--t0);
  border-color: var(--border2)
}

.bld-apk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 60px
}

.bld-apk-empty {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  background: var(--bg1);
  border: 1.5px dashed var(--border2);
  border-radius: 14px;
  text-align: center
}

.bld-apk-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(79, 127, 255, .06);
  border: 1px solid rgba(79, 127, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t3)
}

.bld-apk-card {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  animation: bld-fadeUp .4s cubic-bezier(.2, .8, .2, 1) both;
  position: relative;
  overflow: visible
}

.bld-apk-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4)
}

.bld-apk-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #000;
  overflow: hidden;
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5)
}

.bld-apk-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.bld-apk-icon-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: rgba(255, 255, 255, .15)
}

.bld-apk-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--t0);
  text-align: center;
  line-height: 1.3;
  word-break: break-word
}

.bld-apk-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: center
}

.bld-apk-pkg {
  font-size: 10.5px;
  color: var(--t2);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
  line-height: 1.4
}

.bld-apk-pkg span,
.bld-apk-date span {
  color: var(--t3)
}

.bld-apk-date {
  font-size: 10.5px;
  color: var(--t2);
  font-family: 'JetBrains Mono', monospace
}

.bld-apk-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 2px 0
}

.bld-apk-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%
}

.bld-apk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  transition: all .15s;
  text-decoration: none
}

.bld-apk-btn:active {
  transform: scale(.97)
}

.bld-apk-btn-dl {
  background: rgba(79, 127, 255, .15);
  color: #6fa3ff;
  border: 1px solid rgba(79, 127, 255, .25)
}

.bld-apk-btn-dl:hover {
  background: rgba(79, 127, 255, .25)
}

.bld-apk-btn-fast {
  background: rgba(79, 127, 255, .1);
  color: #5b8fff;
  border: 1px solid rgba(79, 127, 255, .18)
}

.bld-apk-btn-fast:hover {
  background: rgba(79, 127, 255, .2)
}

.bld-apk-btn-link {
  background: rgba(57, 232, 143, .1);
  color: #39e88f;
  border: 1px solid rgba(57, 232, 143, .2)
}

.bld-apk-btn-link:hover {
  background: rgba(57, 232, 143, .2)
}

.bld-apk-btn-qr {
  background: rgba(255, 181, 71, .1);
  color: #ffb547;
  border: 1px solid rgba(255, 181, 71, .2)
}

.bld-apk-btn-qr:hover {
  background: rgba(255, 181, 71, .2)
}

.bld-apk-btn-del {
  background: rgba(255, 92, 122, .08);
  color: #ff5c7a;
  border: 1px solid rgba(255, 92, 122, .18);
  margin-top: 2px
}

.bld-apk-btn-del:hover {
  background: rgba(255, 92, 122, .18)
}

.bld-del-confirm {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(7, 9, 15, .92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: bld-fadeUp .2s cubic-bezier(.2, .8, .2, 1) both
}

.bld-del-confirm-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  text-align: center
}

.bld-del-confirm-txt {
  font-size: 13px;
  font-weight: 700;
  color: var(--t0)
}

.bld-del-confirm-name {
  font-size: 11.5px;
  color: var(--err);
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(255, 92, 122, .1);
  border: 1px solid rgba(255, 92, 122, .2);
  border-radius: 6px;
  max-width: 160px;
  word-break: break-word
}

.bld-del-confirm-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px
}

.bld-del-cancel-btn {
  padding: 8px 16px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  transition: all .15s
}

.bld-del-cancel-btn:hover {
  background: var(--bg3);
  color: var(--t0)
}

.bld-del-yes-btn {
  padding: 8px 16px;
  background: rgba(255, 92, 122, .15);
  border: 1px solid rgba(255, 92, 122, .3);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--err);
  cursor: pointer;
  transition: all .15s
}

.bld-del-yes-btn:hover {
  background: rgba(255, 92, 122, .28)
}

.bld-qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center
}

.bld-qr-modal.open {
  display: flex;
  animation: bld-fadeUp .25s cubic-bezier(.2, .8, .2, 1) both
}

.bld-qr-modal-box {
  background: var(--bg1);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 240px;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .8)
}

.bld-qr-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--t0)
}

.bld-qr-modal-body {
  background: #fff;
  padding: 12px;
  border-radius: 10px
}

.bld-qr-modal-url {
  font-size: 10.5px;
  color: var(--t2);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
  text-align: center;
  max-width: 220px
}

.bld-qr-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--t2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s
}

.bld-qr-close:hover {
  background: var(--bg3);
  color: var(--err)
}

@keyframes bld-spinAnim {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.apk-build-msg {
  font-size: 11.5px;
  color: var(--t1);
  font-family: 'Roboto Mono', Consolas, 'Liberation Mono', monospace
}

/* ── brand-color-unify: 顶栏品牌字样统一品牌蓝渐变 ── */
.brand-name {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3b82f6;
  text-shadow: none;
}


/* ── AI 评分徽标 ───────────────────────────────────────────── */
.ai-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--ln);
  background: var(--s1);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  cursor: help;
  min-width: 56px;
  justify-content: center;
}
.ai-score b { font-size: 13px; font-weight: 900; }
.ai-score i {
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(127, 127, 127, .16);
}
.ai-score-na { color: var(--t3); background: transparent; border-color: transparent; min-width: auto; }
.ai-gS { color: #c084fc; background: rgba(168, 85, 247, .15); border-color: rgba(168, 85, 247, .42); }
.ai-gA { color: #34d399; background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .40); }
.ai-gB { color: #60a5fa; background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .40); }
.ai-gC { color: #fbbf24; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .40); }
.ai-gD { color: #94a3b8; background: rgba(148, 163, 184, .14); border-color: rgba(148, 163, 184, .34); }
html.light .ai-gS { color: #7e22ce; background: rgba(168, 85, 247, .10); }
html.light .ai-gA { color: #047857; background: rgba(16, 185, 129, .10); }
html.light .ai-gB { color: #1d4ed8; background: rgba(59, 130, 246, .10); }
html.light .ai-gC { color: #b45309; background: rgba(245, 158, 11, .12); }
html.light .ai-gD { color: #64748b; background: rgba(148, 163, 184, .12); }


/* ===== 设备列表紧凑化 + 壁纸/屏幕合并列 (compact-20261021) ===== */
#dev-table { width: 100%; table-layout: auto; font-size: 11.5px; }
#dev-table th { padding: 6px 5px; font-size: 9.5px; letter-spacing: .1px; }
#dev-table td { padding: 3px 5px; }
#dev-table th i { margin-right: 4px !important; font-size: 10px !important; }
#dev-table td[data-ck="note"] { line-height: 1.25; }
#dev-table td[data-ck="note"] span { font-size: 9.5px !important; }
#dev-table td[data-ck="date"] { font-size: 10px !important; white-space: nowrap; }
#dev-table td[data-ck="wp"] { padding: 3px 4px; }
#dev-table td[data-ck="wp"] + td { padding-left: 2px; }
#dev-table td[data-ck="os"], #dev-table td[data-ck="model"] { font-size: 11px; }
#dev-table .batt { font-size: 10.5px; gap: 3px; }
#dev-table .mono { font-size: 10.5px; }
#dev-table .badge { padding: 2px 6px; font-size: 9.5px; }
#dev-table th[title="控制与操作"] { width: 1%; }
#dev-table .act-group { gap: 3px; flex-wrap: nowrap; max-width: none; }
#dev-table .act-btn { padding: 3px 5px; font-size: 9.5px; border-radius: 5px; line-height: 1.15; }
#dev-table .act-btn i { font-size: 8.5px !important; }
#dev-table tbody tr { height: auto; }

/* 壁纸格 + 屏幕状态角标 */
.wp-cell { position: relative; width: 28px; height: 42px; }
.wp-img { display: block; width: 28px; height: 42px; object-fit: cover; border-radius: 5px; border: 1px solid var(--ln); background: var(--s2); box-sizing: border-box; }
.wp-empty { display: flex; align-items: center; justify-content: center; color: var(--t3); font-size: 11px; }
.wp-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7.5px; border: 1.5px solid rgba(0,0,0,.55); box-shadow: 0 1px 4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10); }
.wp-on   { background: #10b981; color: #04231a; }
.wp-lock { background: #f59e0b; color: #2a1a00; }
.wp-off  { background: #475569; color: #dbe4ef; }

/* 筛选条瘦身 */
.table-card .filter-bar { padding: 9px 14px; gap: 8px; }
.search-wrap { flex: 0 1 34%; max-width: 210px; min-width: 140px; }
.search-inp { padding: 6px 10px 6px 29px; font-size: 12px; }
.search-ico { left: 10px; font-size: 11px; }
.f-select { padding: 6px 9px; font-size: 12px; }
.f-btn { padding: 6px 11px; font-size: 11.5px; }



/* ===== 操作列四按钮竖排一列 (actcol-20261021) ===== */
#dev-table th[title="控制与操作"] { width: 1%; white-space: nowrap; }
#dev-table td[data-ck="act"] { vertical-align: middle; padding: 4px 5px; white-space: nowrap; }
#dev-table .act-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 2px;
  max-width: none;
  width: max-content;
}
#dev-table .act-btn {
  flex: 0 0 auto;
  min-width: max-content;
  justify-content: flex-start;
  padding: 2px 7px;
  font-size: 9.5px;
  line-height: 1.25;
  border-radius: 5px;
  white-space: nowrap;
}
#dev-table .act-btn i { font-size: 8.5px !important; margin-right: 3px !important; }

/* RATE_IN_FILTERBAR_V1 —— 在线率挪到设备列表「刷新」按钮后面 */
.filter-bar .rate-chip, .rate-chip.rate-in-bar{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;height:28px;border-radius:8px;background:var(--s1);border:1px solid var(--ln);white-space:nowrap;flex:0 0 auto}
.filter-bar .rate-chip .rate-dot, .rate-chip.rate-in-bar .rate-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok)}
.filter-bar .rate-chip .rate-lbl, .rate-chip.rate-in-bar .rate-lbl{font-size:11px;color:var(--t2)}
.filter-bar .rate-chip .rate-val, .rate-chip.rate-in-bar .rate-val{font-size:12px;font-weight:800;color:var(--t0);font-family:'Roboto Mono',ui-monospace,monospace}
@media(max-width:640px){.rate-chip.rate-in-bar{order:99}}