/* UNLOCKBOX PRO - Authentic Professional GSM Service Tool Stylesheet */
:root {
  --bg-main: #0c1017;
  --bg-darker: #080a0f;
  --bg-window: #111520;
  --bg-panel: #141a26;
  --bg-panel-border: #222c3d;
  --bg-card: #182030;
  --bg-button: #1a2335;
  --bg-button-hover: #24324c;
  --bg-button-active: #101724;
  
  --text-main: #e2e8f0;
  --text-dim: #8292a6;
  --text-bright: #ffffff;
  
  --brand-cyan: #38bdf8;
  --brand-cyan-neon: #00e5ff;
  --brand-cyan-glow: rgba(56, 189, 248, 0.45);
  --brand-gold: #f59e0b;
  --brand-gold-hover: #fbbf24;
  --brand-gold-glow: rgba(245, 158, 11, 0.4);
  --brand-orange: #38bdf8;
  --brand-orange-hover: #00e5ff;
  --brand-green: #10b981;
  --brand-red: #ef4444;
  --brand-blue: #0284c7;
  
  --console-bg: #090c12;
  --console-border: #182233;
  --console-text: #cbd5e1;
  --console-success: #10b981;
  --console-info: #38bdf8;
  --console-warn: #f59e0b;
  --console-purple: #a855f7;
  
  --font-family: 'Segoe UI', Tahoma, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-mono: 'Consolas', 'Lucida Console', 'Fira Code', monospace;
}

/* App Containers */
.main-app-container {
  display: none;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.main-app-container.active {
  display: flex;
}

/* ==========================================================================
   AUTHENTIC LOGIN INTERFACE STYLES (Matching Reference Screenshot)
   ========================================================================== */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, #232731 0%, #111318 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.25s ease-out, visibility 0.25s;
}

.login-overlay.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.login-window {
  width: 375px;
  background-color: #2b2e36;
  border: 1px solid #484e5c;
  border-radius: 4px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: loginAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginAppear {
  0% { opacity: 0; transform: scale(0.96) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.login-titlebar {
  background-color: #1e2026;
  border-bottom: 1px solid #363b46;
  height: 28px;
  padding: 0 8px;
}

.login-body {
  padding: 24px 28px 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Circular Emblem */
.lock-emblem-wrapper {
  margin-bottom: 22px;
}

.lock-outer-glow {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.25) 0%, rgba(255, 119, 0, 0) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ff6a00;
  box-shadow: 0 0 16px rgba(255, 119, 0, 0.4), inset 0 0 8px rgba(255, 119, 0, 0.3);
}

.lock-inner-ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 3px solid #ff9900;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.15);
}

.lock-center-circle {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-svg-icon {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 2px 4px rgba(230, 81, 0, 0.35));
}

/* Login Form */
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-input-group {
  height: 32px;
  background-color: #1c1e24;
  border: 1px solid #3a3f4c;
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-input-group:focus-within {
  border-color: #ff9e00;
  box-shadow: 0 0 6px rgba(255, 158, 0, 0.25);
}

.input-icon {
  font-size: 13px;
  color: #ffaa00;
  user-select: none;
}

.login-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #f1f3f7;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

.input-clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.input-clear-btn:hover {
  opacity: 1;
}

/* Select Rows */
.login-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  font-size: 11.5px;
}

.select-label {
  color: #9ba3b2;
  font-weight: 500;
}

.login-select {
  width: 62%;
  height: 26px;
  background-color: #1c1e24;
  border: 1px solid #3a3f4c;
  border-radius: 2px;
  color: #d1d6e0;
  font-size: 11.5px;
  padding: 0 6px;
  outline: none;
  cursor: pointer;
}

.login-select:focus {
  border-color: #ff9e00;
}

/* Actions Row */
.login-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #abb2be;
  cursor: pointer;
}

.login-remember input[type="checkbox"] {
  accent-color: #ff9e00;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.login-submit-btn {
  background: linear-gradient(180deg, #ffaa00 0%, #d46500 100%);
  border: 1px solid #ffba33;
  color: #120c00;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 22px;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  transition: all 0.15s;
}

.login-submit-btn:hover {
  background: linear-gradient(180deg, #ffb81f 0%, #e07200 100%);
  color: #000;
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
}

.login-submit-btn:active {
  transform: translateY(1px);
}

.login-status-msg {
  text-align: center;
  font-size: 11px;
  color: #8f97a5;
  margin: 12px 0 6px 0;
}

.login-footer-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid #383e4a;
  width: 100%;
}

.login-footer-links-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.login-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
  display: none;
}

.login-progress-track.active {
  display: block;
}

.login-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9e00 0%, #ffc837 100%);
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.7);
  transition: width 0.35s ease-in-out;
}

.login-footer-links a {
  color: #ffaa00;
  font-size: 11px;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.login-footer-links a:hover {
  color: #ffc44d;
  text-decoration: underline;
}

/* ==========================================================================
   AUTHENTIC PROCESSING DIALOG STYLES (Screenshot 3)
   ========================================================================== */
.processing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  backdrop-filter: blur(1.5px);
}

.processing-overlay.active {
  display: flex;
}

.processing-window {
  width: 360px;
  background-color: #2b2e36;
  border: 1px solid #484e5c;
  border-radius: 3px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  animation: loginAppear 0.2s ease-out;
}

.processing-titlebar {
  height: 26px;
  background-color: #1e2026;
  border-bottom: 1px solid #363b46;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #abb2bf;
  display: flex;
  align-items: center;
}

.processing-body {
  padding: 24px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-color: #252830;
}

.processing-status-text {
  font-size: 11px;
  color: #d0d6e2;
  font-family: 'Consolas', 'Lucida Console', monospace;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.processing-track {
  width: 100%;
  height: 6px;
  background: #16181f;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #343a46;
}

.processing-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9e00 0%, #ffc837 100%);
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
  transition: width 0.2s ease-out;
}

/* ==========================================================================
   AUTHENTIC DISCLAIMER WINDOW STYLES (Matching Reference Screenshot)
   ========================================================================== */
.disclaimer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(2px);
}

.disclaimer-overlay.active {
  display: flex;
}

.disclaimer-window {
  width: 580px;
  max-width: 92vw;
  background-color: #2b2e36;
  border: 1px solid #484e5c;
  border-radius: 4px;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: loginAppear 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.disclaimer-titlebar {
  background-color: #1e2026;
  border-bottom: 1px solid #363b46;
  height: 28px;
  padding: 0 8px;
}

.disclaimer-body {
  padding: 22px 26px 16px 26px;
  background-color: #252830;
  font-family: 'Consolas', 'Lucida Console', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #cfd5e0;
  max-height: 70vh;
  overflow-y: auto;
}

.disclaimer-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.disc-highlight {
  color: #ffffff;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.disclaimer-footer {
  background-color: #1e2026;
  border-top: 1px solid #363b46;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.disclaimer-lang-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-family);
}

.lang-opt {
  color: #798292;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s;
}

.lang-opt.active {
  color: #ffaa00;
  text-decoration: underline;
}

.disclaimer-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.disclaimer-btn {
  background: linear-gradient(180deg, #3d424e 0%, #2c3039 100%);
  border: 1px solid #4a5160;
  color: #d1d6e0;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 22px;
  border-radius: 2px;
  cursor: pointer;
  min-width: 82px;
  transition: all 0.15s;
}

.disclaimer-btn:hover {
  background: linear-gradient(180deg, #484f5e 0%, #363a45 100%);
  color: #ffffff;
  border-color: #636c7e;
}

.disclaimer-btn#btnAgree:hover {
  border-color: #ffaa00;
  color: #ffaa00;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #181a1f;
}
::-webkit-scrollbar-thumb {
  background: #3c424e;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #505868;
}

/* ==========================================================================
   AUTHENTIC XIAOMI (MI) INTERFACE STYLES (Matching 9 Reference Screenshots)
   ========================================================================== */
.mi-security-workspace {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

/* Left Models List Panel */
.mi-models-panel {
  width: 235px;
  background-color: #1e2128;
  border-right: 1px solid #353b47;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.mi-search-wrap {
  padding: 6px;
  background-color: #1a1c22;
  border-bottom: 1px solid #313642;
  position: relative;
}

.mi-search-input {
  width: 100%;
  height: 24px;
  background: #14161c;
  border: 1px solid #383e4c;
  color: #cfd5e0;
  font-size: 11px;
  padding: 0 6px 0 20px;
  border-radius: 2px;
}

.mi-search-icon {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 10px;
  color: #ffaa00;
}

.mi-models-list {
  flex: 1;
  overflow-y: auto;
  font-size: 11px;
}

.mi-model-item {
  padding: 6px 8px;
  border-bottom: 1px solid #282c36;
  cursor: pointer;
  transition: background 0.1s;
}

.mi-model-item:hover {
  background-color: #272b35;
}

.mi-model-item.selected {
  background-color: #1a324a;
  border-left: 3px solid #ffaa00;
}

.mi-model-title {
  color: #e5e9f0;
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 11.5px;
}

.mi-model-desc {
  color: #8f98a8;
  font-size: 10px;
  margin-bottom: 4px;
}

.mi-badges-row {
  display: flex;
  gap: 4px;
}

.badge-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
}

.badge-tag.beta {
  background: #3e3328;
  color: #ffaa00;
  border: 1px solid #6b5020;
}

.badge-tag.edl {
  background: #1e3a29;
  color: #3ddc84;
  border: 1px solid #2d5c3d;
}

.badge-tag.brom {
  background: #3a2233;
  color: #ff5e9c;
  border: 1px solid #662a52;
}

.mi-models-footer {
  background-color: #171920;
  border-top: 1px solid #2e333e;
  padding: 4px 8px;
  font-size: 10.5px;
  color: #8f97a5;
  font-weight: 600;
}

/* Right Actions & Sub-Tabs Panel */
.mi-actions-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #262931;
  overflow: hidden;
}

.mi-subtabs-row {
  background-color: #1f2229;
  border-bottom: 1px solid #363c48;
  display: flex;
  height: 28px;
  align-items: center;
  padding: 0 4px;
  gap: 2px;
}

.mi-subtab {
  background: #2b2f38;
  color: #a4abb8;
  border: 1px solid #3c424e;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.1s;
}

.mi-subtab:hover {
  background: #353a45;
  color: #fff;
}

.mi-subtab.active {
  background: #ffaa00;
  color: #000;
  border-color: #ffba33;
}

.mi-buttons-scroll-area {
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mi-action-btn {
  background: linear-gradient(180deg, #383c46 0%, #2b2e36 100%);
  border: 1px solid #484f5c;
  color: #ffaa00;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.3);
  transition: all 0.1s;
  text-align: left;
}

.mi-action-btn:hover {
  background: linear-gradient(180deg, #444955 0%, #343842 100%);
  border-color: #ffaa00;
  color: #ffc44d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 6px rgba(255, 170, 0, 0.25);
}

.mi-action-btn.danger {
  color: #ff5252;
}
.mi-action-btn.danger:hover {
  border-color: #ff5252;
  color: #ff7575;
}

.mi-action-btn .op-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
}

.mi-bottom-options-card {
  background-color: #1e2128;
  border-top: 1px solid #363b46;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

/* MI Flash View Specific */
.mi-flash-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  height: 100%;
  overflow: hidden;
}

.micloud-firmware-card {
  background-color: #21242b;
  border: 1px solid #363c47;
  border-radius: 2px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.micloud-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.exynos-chip-item {
  transition: background 0.1s;
}
.exynos-chip-item:hover {
  background-color: #272c38;
}
.exynos-chip-item.selected {
  background-color: #ff9e00;
  color: #000000 !important;
  font-weight: 700;
}

/* Samsung Authentic Styling */
.samsung-search-wrap {
  display: flex;
  align-items: center;
  background: #171920;
  border: 1px solid #d47e00;
  padding: 0 6px;
  height: 26px;
}

.samsung-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e2e6ed;
  font-size: 11px;
  outline: none;
}

.samsung-search-input::placeholder {
  color: #798291;
  font-style: italic;
}

.samsung-clear-icon {
  color: #d47e00;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  padding-right: 6px;
  user-select: none;
}
.samsung-clear-icon:hover {
  color: #ffaa00;
}

.samsung-search-icon {
  color: #d47e00;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  user-select: none;
  /* color emoji glyphs don't scale down with font-size the way text does —
     transform is what actually shrinks the oversized glyph to match the box */
  transform: scale(0.85);
}

.samsung-chip-combobox {
  background: #1a1c22;
  border: 1px solid #3c424e;
  height: 26px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #d1d6e0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.samsung-chip-combobox:hover {
  border-color: #ffaa00;
}

.samsung-combo-arrow {
  color: #a4abb8;
  font-size: 11px;
}

.samsung-chip-dropdown-list {
  background: #181a20;
  border: 1px solid #ffaa00;
  border-radius: 2px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.badge-tag.testpoint {
  background: #e8eaed;
  color: #1a1a1a;
  font-weight: 800;
  border: none;
}

.badge-tag.preloader {
  background: #241e12;
  border: 1px solid #d47e00;
  color: #ffaa00;
  font-weight: 700;
}

.badge-tag.custom-da {
  background: #a6121a;
  color: #ffffff;
  font-weight: 700;
  border: none;
}

.badge-tag.edl {
  background: #2e7d32;
  color: #ffffff;
  font-weight: 700;
  border: none;
}

.badge-tag.beta {
  background: #383c46;
  color: #cfd5df;
  font-weight: 700;
  border: none;
}

.badge-tag.usb-1 {
  background: #ffb703;
  color: #000000;
  font-weight: 800;
  border: none;
}

.model-sub-mtk {
  color: #ff5252 !important;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 10px;
}

.model-sub-kirin {
  color: #abb2bf !important;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 10px;
}

.model-sub-qcom {
  color: #7f8796 !important;
  font-family: var(--font-mono);
  font-size: 10px;
}

.green-text {
  color: #3ddc84 !important;
}

.cyan-text {
  color: #00e5ff !important;
}

.orange-text {
  color: #ff9800 !important;
}



.window-titlebar {
  background-color: #1a1c21;
  border-bottom: 1px solid #2e333d;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 11.5px;
  color: #a0a6b2;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-logo-icon {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #ff9e00 0%, #d46b08 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  box-shadow: 0 0 6px rgba(255, 158, 0, 0.4);
}

.titlebar-title {
  color: #e2e6ed;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.titlebar-url {
  color: #798291;
  text-decoration: none;
  margin-left: 4px;
}
.titlebar-url:hover {
  color: var(--brand-orange);
}

.titlebar-controls {
  display: flex;
  gap: 2px;
}

.win-btn {
  background: transparent;
  border: none;
  color: #8a929f;
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
}
.win-btn:hover {
  background: #2f3440;
  color: #fff;
}
.win-btn.close:hover {
  background: #d32f2f;
  color: #fff;
}

/* Brands Bar */
.brands-container {
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #21242b;
  padding: 5px 8px 3px 8px;
  border-bottom: 1px solid #333842;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-row {
  display: flex;
  gap: 3px;
  align-items: center;
}

.brand-btn {
  flex: 0 0 auto;
  height: 40px;
  min-width: 72px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 5px;
  background: #111628;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.18s ease;
}
.brand-btn svg {
  height: 22px;
  width: auto;
  display: block;
  transition: filter 0.18s ease;
}
.brand-btn:not(.active):not(:hover) svg { filter: brightness(0.75) saturate(0.6); }
.brand-btn:hover { border-color: rgba(245,162,0,0.7); box-shadow: 0 0 10px rgba(245,162,0,0.2); }
.brand-btn:hover svg, .brand-btn.active svg { filter: brightness(1.1) saturate(1.1); }
.brand-btn:active { transform: translateY(1px); }
.brand-btn.active { border-color: #f5a200; box-shadow: 0 0 14px rgba(245,162,0,0.35); }
.brand-btn.brand-lg { background: linear-gradient(180deg, #c70039 0%, #900c3f 100%); }
.brand-btn.brand-nokia { background: linear-gradient(180deg, #124191 0%, #092659 100%); }
.brand-btn.brand-lenovo { background: linear-gradient(180deg, #e2231a 0%, #a6120b 100%); }
.brand-btn.brand-qualcomm { background: linear-gradient(180deg, #e30613 0%, #9d030c 100%); font-size: 11px; }
.brand-btn.brand-mediatek { background: linear-gradient(180deg, #ff9e00 0%, #cf7a00 100%); }
.brand-btn.brand-android { background: linear-gradient(180deg, #3ddc84 0%, #29a05e 100%); color: #0d2616; text-shadow: none; font-weight: 800; }
.brand-btn.brand-apple { background: linear-gradient(180deg, #24262b 0%, #151619 100%); }
.brand-btn.brand-infinix { background: linear-gradient(180deg, #4ed32c 0%, #359c1c 100%); }
.brand-btn.brand-spreadtrum { background: linear-gradient(180deg, #3e4249 0%, #26292d 100%); font-size: 11px; }
.brand-btn.brand-motorola { background: linear-gradient(180deg, #373c47 0%, #1e2229 100%); font-size: 11px; }
.brand-btn.brand-tcl { background: linear-gradient(180deg, #d3000b 0%, #900007 100%); }


/* Sub-Navigation Tabs & Right Mode Bar */
.subnav-container {
  background-color: #262930;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #383d47;
  padding: 0 8px;
  height: 38px;
}

.subnav-left-tabs {
  display: flex;
  gap: 4px;
  height: 100%;
  align-items: flex-end;
}

.subnav-tab {
  background: #31353e;
  color: #abb2bf;
  border: 1px solid #3e434f;
  border-bottom: none;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.1s;
}

.subnav-tab:hover {
  background: #3a3f4a;
  color: #fff;
}

.subnav-tab.active {
  background: #2b2e35;
  color: #ff9e00;
  border-color: #ff9e00;
  font-weight: 700;
  position: relative;
}

.subnav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #2b2e35;
}

.subnav-tab .dot-indicator {
  width: 8px;
  height: 8px;
  background-color: #ff4757;
  border-radius: 50%;
  display: inline-block;
}

.subnav-tab.active .dot-indicator {
  background-color: #ff9e00;
  box-shadow: 0 0 6px #ff9e00;
}

/* Right Quick Action Links */
.subnav-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-action-link {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffaa00;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 3px;
  transition: background 0.15s;
}
.quick-action-link:hover {
  background: rgba(255, 170, 0, 0.12);
  color: #ffc44d;
}

/* Main Workspace Layout */
.main-workspace {
  display: flex;
  flex: 1;
  height: calc(100vh - 146px);
  overflow: hidden;
  background-color: #272a31;
}

/* Left Panel: Partition Table, Options, File Pickers, 1-Click Operations */
.left-servicing-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 6px;
  overflow: hidden;
  border-right: 1px solid #363c46;
}

/* Top Partition Table */
.partition-table-card {
  height: 220px;
  background-color: #1f2228;
  border: 1px solid #363c47;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
}

.table-header {
  background-color: #2b2f38;
  display: grid;
  grid-template-columns: 35px 120px 140px 80px 100px 100px 90px 90px 1fr;
  border-bottom: 1px solid #3c424e;
  font-size: 11px;
  font-weight: 600;
  color: #b0b8c4;
}

.table-header > div,
.table-row > div {
  padding: 4px 6px;
  border-right: 1px solid #2f343f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.table-header > div:last-child,
.table-row > div:last-child {
  border-right: none;
}

.table-body {
  flex: 1;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #d1d5db;
}

.table-row {
  display: grid;
  grid-template-columns: 35px 120px 140px 80px 100px 100px 90px 90px 1fr;
  border-bottom: 1px solid #282c35;
  cursor: pointer;
  transition: background 0.1s;
}

.table-row:nth-child(even) {
  background-color: #22252c;
}

.table-row:hover {
  background-color: #2e333d;
}

.table-row.selected {
  background-color: #1f364d;
  color: #64b5f6;
}

.table-row input[type="checkbox"],
.table-header input[type="checkbox"] {
  accent-color: #ff9e00;
  cursor: pointer;
}

/* Middle Options Bar */
.options-bar {
  background-color: #24272f;
  border: 1px solid #363b46;
  border-radius: 2px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 11.5px;
  color: #cfd5df;
}

.custom-checkbox input[type="checkbox"],
.custom-checkbox input[type="radio"] {
  accent-color: #ff9e00;
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.action-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.secondary-btn {
  background: linear-gradient(180deg, #3d424c 0%, #2f333b 100%);
  border: 1px solid #484f5c;
  color: #d8dde6;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.secondary-btn:hover {
  background: linear-gradient(180deg, #484f5c 0%, #383c46 100%);
  color: #fff;
  border-color: #606877;
}

.gold-btn {
  background: linear-gradient(180deg, #ffaa00 0%, #d47e00 100%);
  border: 1px solid #ffba33;
  color: #1a1100;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: all 0.15s;
}
.gold-btn:hover {
  background: linear-gradient(180deg, #ffba33 0%, #e68d00 100%);
  color: #000;
}

/* File Loaders Inputs */
.file-loaders-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.loader-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
}

.loader-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.loader-input {
  width: 100%;
  height: 26px;
  background-color: #1c1e24;
  border: 1px solid #363c47;
  color: #b0b8c6;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 24px 0 8px;
  border-radius: 2px;
}

.loader-input:focus {
  outline: none;
  border-color: #ff9e00;
}

.loader-clear-btn {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: #78808d;
  cursor: pointer;
  font-weight: bold;
}
.loader-clear-btn:hover {
  color: #ff4757;
}

.browse-btn {
  background: #343842;
  border: 1px solid #434956;
  color: #d1d6e0;
  height: 26px;
  padding: 0 8px;
  border-radius: 2px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.browse-btn:hover {
  background: #424754;
  color: #fff;
}

.model-select {
  height: 26px;
  background: #1c1e24;
  border: 1px solid #363c47;
  color: #d1d6e0;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 2px;
  width: 180px;
}

/* 1-Click Operations Area */
.one-click-container {
  flex: 1;
  background-color: #21242b;
  border: 1px solid #363c47;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.one-click-header {
  background-color: #1d2026;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffaa00;
  border-bottom: 1px solid #333842;
  letter-spacing: 0.5px;
}

.one-click-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.vertical-category-tabs {
  width: 34px;
  background-color: #1a1c22;
  border-right: 1px solid #333842;
  display: flex;
  flex-direction: column;
}

.vertical-tab {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: center;
  padding: 12px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #7b8291;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.15s;
}

.vertical-tab:hover {
  color: #d4d9e3;
  background-color: #23262f;
}

.vertical-tab.active {
  color: #ffaa00;
  border-left: 2px solid #ffaa00;
  background-color: #242831;
}

.operations-grid {
  flex: 1;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 40px;
  gap: 6px;
  overflow-y: auto;
}

.op-btn {
  background: linear-gradient(180deg, #373b44 0%, #292d34 100%);
  border: 1px solid #434854;
  color: #ffaa00;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 3px rgba(0,0,0,0.3);
  transition: all 0.1s ease;
  white-space: nowrap;
}

.op-btn:hover {
  background: linear-gradient(180deg, #444954 0%, #323740 100%);
  border-color: #ffaa00;
  color: #ffc24d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 8px rgba(255, 170, 0, 0.25);
}

.op-btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #22252a 0%, #2c3038 100%);
}

.op-btn .op-icon {
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op-btn.danger {
  color: #ff5252;
}
.op-btn.danger:hover {
  border-color: #ff5252;
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.3);
}

.op-btn.flash-btn {
  background: linear-gradient(180deg, #2a4133 0%, #1e2e24 100%);
  border-color: #386b49;
  color: #3ddc84;
}
.op-btn.flash-btn:hover {
  border-color: #3ddc84;
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.3);
}

/* Right Panel: Ports, Terminal Log & Progress Bars */
.right-servicing-panel {
  width: 440px;
  background-color: #24272f;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 6px;
}

/* Ports Selector */
.ports-selector-card {
  background-color: #1e2127;
  border: 1px solid #333842;
  border-radius: 2px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.port-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.port-label {
  width: 36px;
  font-size: 11px;
  font-weight: 700;
  color: #a4abb8;
}

.port-select {
  flex: 1;
  height: 24px;
  background-color: #17191e;
  border: 1px solid #333842;
  color: #d1d5db;
  font-size: 11px;
  border-radius: 2px;
  padding: 0 6px;
}

.fast-connect-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #a4abb8;
  cursor: pointer;
  white-space: nowrap;
}

.fast-connect-toggle input[type="checkbox"] {
  accent-color: #ff9e00;
}

/* Terminal / Log Viewer */
.terminal-container {
  flex: 1;
  background-color: var(--console-bg);
  border: 1px solid var(--console-border);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-mono);
}

.terminal-header-bar {
  background-color: #1a1e26;
  border-bottom: 1px solid #272d3a;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: #8c95a6;
}

.terminal-actions {
  display: flex;
  gap: 6px;
}

.term-action-btn {
  background: transparent;
  border: 1px solid #373f4e;
  color: #a0a8b7;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 2px;
  cursor: pointer;
}
.term-action-btn:hover {
  background: #2b3240;
  color: #fff;
}

.terminal-logs {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  font-size: 11px;
  line-height: 1.45;
  color: var(--console-text);
  white-space: pre-wrap;
  word-break: break-all;
}

.log-line {
  margin-bottom: 2px;
}

.log-meid { color: var(--console-purple); }
.log-ok { color: var(--console-success); font-weight: 700; }
.log-cyan { color: var(--brand-cyan); }
.log-warn { color: var(--console-warn); }
.log-error { color: var(--brand-red); font-weight: 700; }
/* Matches the real UnlockTool console: a solid-fill blue banner for the
   current operation header (e.g. "BOOT DEVICE"), and a purple accent for
   identifier-type values (MEID, security config) once the engine reports them. */
.log-banner {
  display: inline-block;
  background: #1e88e5;
  color: #ffffff;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 2px;
}
.log-purple { color: #c586ff; }
.log-header { color: #f59e0b; font-weight: 700; }

/* Progress & Execution Status */
.progress-status-container {
  background-color: #1e2127;
  border: 1px solid #333842;
  border-radius: 2px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-message {
  font-size: 11.5px;
  color: #e5e7eb;
  font-weight: 600;
  text-align: center;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.status-message .pulse-dot {
  width: 7px;
  height: 7px;
  background-color: #3ddc84;
  border-radius: 50%;
  animation: pulseAnim 1.2s infinite;
}

@keyframes pulseAnim {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px #3ddc84; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

.progress-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bars-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-track {
  height: 18px;
  background-color: #14161b;
  border: 1px solid #333844;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9e00 0%, #ffbb33 100%);
  transition: width 0.15s ease-out;
}

.progress-percent-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #111;
  text-shadow: 0 0 2px rgba(255,255,255,0.6);
}

.stop-btn {
  background: linear-gradient(180deg, #444954 0%, #2f333a 100%);
  border: 1px solid #505663;
  color: #a4abb8;
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 14px;
  height: 40px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.stop-btn.active {
  background: linear-gradient(180deg, #ff3344 0%, #b81423 100%);
  border-color: #ff5e6c;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 51, 68, 0.4);
}

/* Bottom Status Bar */
.bottom-statusbar {
  height: 26px;
  background-color: #1a1c22;
  border-top: 1px solid #2c3039;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 11px;
  color: #8c93a0;
}

.statusbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 60%;
}

.statusbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-link {
  color: #ffaa00;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-link:hover {
  text-decoration: underline;
}

.debug-badge {
  background-color: #272c36;
  border: 1px solid #3b4250;
  color: #9ca3af;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
}

.user-badge {
  color: #d1d5db;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.user-badge:hover {
  color: #ffaa00;
}

/* Modal Windows (Test Points, DevMgr, Config, HWID) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.active {
  display: flex;
}

.modal-window {
  width: 760px;
  max-width: 90vw;
  max-height: 85vh;
  background-color: #24272f;
  border: 1px solid #454d5c;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  background-color: #1a1c22;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #353b47;
  color: #ffaa00;
  font-weight: 700;
  font-size: 12.5px;
}

.modal-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.tp-card {
  background: #1c1f26;
  border: 1px solid #333945;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
}

.tp-diagram {
  width: 180px;
  height: 120px;
  background: #121418;
  border: 1px dashed #3a4252;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: #798394;
}

.tp-info {
  flex: 1;
}

.tp-title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Authentic Quick Action Popup Menus (ADB & FASTBOOT matching screenshots) */
.quick-popup-menu {
  position: fixed;
  background-color: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 220px;
  padding: 4px 0;
  z-index: 2000;
  display: none;
  font-family: var(--font-main);
}

.quick-popup-menu.active {
  display: block;
}

.quick-popup-menu .menu-item {
  padding: 6px 14px;
  font-size: 11.5px;
  color: #24292f;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.quick-popup-menu .menu-item:hover {
  background-color: #fff8e1;
  color: #b26a00;
}

.quick-popup-menu .menu-item .m-icon {
  font-size: 13px;
  width: 16px;
  display: inline-block;
  text-align: center;
}

.quick-popup-menu .menu-separator {
  height: 1px;
  background-color: #eaecef;
  margin: 4px 0;
}

/* Badge styles for OEM Models */
.badge.spd {
  background: #23272e;
  color: #abb2bf;
  border: 1px solid #4b5263;
}

.badge.force {
  background: #e06c75;
  color: #ffffff;
}

.badge.custom.da, .badge.custom-da {
  background: #98c379;
  color: #1e222b;
  font-weight: bold;
}

.badge.factory.1, .badge.factory-1 {
  background: #61afef;
  color: #1e222b;
}

.badge.factory.2, .badge.factory-2 {
  background: #c678dd;
  color: #ffffff;
}


/* ==========================================================================
   UNLOCKBOX CYBER THEME ENHANCEMENTS (Matching Official Branding Logo)
   ========================================================================== */
.tool-logo-img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  margin-right: 6px;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.7));
  vertical-align: middle;
}

.lock-emblem-wrapper.unlockbox-theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.unlockbox-theme .lock-outer-glow {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, rgba(56, 189, 248, 0) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #38bdf8;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.55), inset 0 0 12px rgba(56, 189, 248, 0.3);
  position: relative;
}

.unlockbox-theme .lock-inner-ring {
  width: 114px;
  height: 114px;
  border-radius: 50%;
  border: 2px solid #f59e0b;
  background: #090d14;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4), inset 0 2px 8px rgba(0,0,0,0.8);
}

.unlockbox-circle-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.unlockbox-circle-logo:hover {
  transform: scale(1.06);
}

.unlockbox-brand-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.brand-name-text {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2.2px;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 45%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.brand-sub-text {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
  margin-top: 2px;
}

.login-window {
  background-color: #111622 !important;
  border: 1px solid #232e42 !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 2px 1px rgba(56, 189, 248, 0.3) !important;
}

.login-titlebar {
  background-color: #0c1017 !important;
  border-bottom: 1px solid #1a2233 !important;
}

.login-btn {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.login-btn:hover {
  background: linear-gradient(180deg, #0369a1 0%, #075985 100%) !important;
  border-color: #00e5ff !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.login-progress-bar {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #f59e0b 100%) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.9) !important;
}

.processing-fill {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 65%, #f59e0b 100%) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.9) !important;
}

.processing-cube-img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
  animation: pulseCube 1.6s infinite ease-in-out;
  margin-bottom: 14px;
}

@keyframes pulseCube {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5)); }
  50% { transform: scale(1.07); filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.85)); }
}

.window-titlebar {
  background-color: #0c1017 !important;
  border-bottom: 1px solid #1e2738 !important;
}

.brands-container {
  background-color: #111622 !important;
  border-bottom: 1px solid #1c2436 !important;
}

.subnav-bar {
  background-color: #141a28 !important;
  border-bottom: 1px solid #1f283c !important;
}

.left-servicing-panel, .center-workspace-panel {
  background-color: #111520 !important;
  border-color: #1e2638 !important;
}

.right-terminal-panel {
  background-color: #090c12 !important;
  border-color: #182233 !important;
}

.brand-btn.active, .brand-item.active {
  border-bottom: 3px solid #38bdf8 !important;
  box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.3), 0 0 12px rgba(56, 189, 248, 0.25) !important;
}

.subnav-tab.active {
  border-bottom: 2px solid #38bdf8 !important;
  color: #38bdf8 !important;
}

.login-submit-btn {
  height: 32px;
  padding: 0 20px;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #38bdf8 !important;
  border-radius: 3px;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.15s ease;
}

.login-submit-btn:hover {
  background: linear-gradient(180deg, #0369a1 0%, #075985 100%) !important;
  border-color: #00e5ff !important;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.login-footer a:hover {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

/* ==========================================================================
   AUTHENTIC UNLOCKTOOL 4-TIER HIERARCHY & CYBER DARK THEME
   ========================================================================== */

/* Main Container & Reset */
.main-app-container {
  display: flex !important;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: #080b11;
  color: #cbd5e1;
  font-family: 'Segoe UI', Tahoma, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  overflow: hidden;
  user-select: none;
}
/* Login gate: keep the app hidden until a real session is started (see app.js setupLogin) */
.main-app-container.hidden {
  display: none !important;
}

/* App Titlebar */
.app-titlebar {
  height: 32px;
  background-color: #0c1017;
  border-bottom: 1px solid #1a2336;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  flex-shrink: 0;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-logo-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.app-title-text {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.3px;
}

.app-title-text a {
  color: #00f0ff;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.titlebar-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.win-btn {
  width: 28px;
  height: 22px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.win-btn:hover {
  background-color: #1e293b;
  color: #f8fafc;
}

.win-btn.close:hover {
  background-color: #ef4444;
  color: #ffffff;
}

/* Brands Bar - Authentic 2 Rows of 10 Brand Buttons */
.brands-container {
  background: #11151f url('assets/unlockbox_wallpaper.png') center/cover no-repeat;
  background-blend-mode: overlay;
  padding: 5px 8px;
  border-bottom: 1px solid #1a2438;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.brand-row {
  display: flex;
  gap: 5px;
  width: 100%;
}

.brand-btn {
  flex: 1;
  height: 30px;
  border: 1px solid #1b2438;
  border-radius: 2px;
  overflow: hidden;
  background: #000000;
  padding: 0;
  cursor: pointer;
  transition: filter 0.1s ease, box-shadow 0.1s ease, transform 0.05s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.brand-btn:hover {
  filter: brightness(1.25);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.brand-btn:active {
  transform: translateY(1px);
}

.brand-btn.active {
  outline: 2px solid #ffffff !important;
  outline-offset: -2px;
  filter: brightness(1.3);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7) !important;
  z-index: 10;
}

/* Sub-Navigation (Tier 2 Child Tabs & Utilities) */
.subnav-container {
  height: 36px;
  background-color: #131824;
  border-bottom: 1px solid #1c263c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  flex-shrink: 0;
}

.subnav-left-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 100%;
}

.subnav-tab {
  height: 28px;
  padding: 0 16px;
  background: #1a2233;
  border: 1px solid #293752;
  border-radius: 2px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.subnav-tab:hover {
  color: #f1f5f9;
  border-color: #38bdf8;
  background: #202b40;
}

.subnav-tab.active {
  background: #141c2b;
  color: #00f0ff;
  border-color: #00f0ff;
  box-shadow: inset 0 2px 0 #00f0ff, 0 0 10px rgba(0, 240, 255, 0.35);
}

.subnav-tab .tab-icon {
  color: #f59e0b;
}

.subnav-tab.active .tab-icon {
  color: #00f0ff;
}

.subnav-quick-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quick-action-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.12s ease;
}

.quick-action-btn:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

/* Main Technician Workspace */
.main-workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
  background-color: #080b11;
}

/* Left Servicing Panel */
.left-servicing-panel {
  flex: 1;
  display: flex;
  overflow: hidden;
  border-right: 1px solid #1a2438;
}

.mi-security-workspace {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Models Column */
.mi-models-panel {
  width: 260px;
  background-color: #0b0f17;
  border-right: 1px solid #161f30;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.mi-search-wrap {
  position: relative;
  padding: 6px 8px;
  background-color: #080c13;
  border-bottom: 1px solid #161f30;
  display: flex;
  align-items: center;
}

.mi-search-input {
  width: 100%;
  height: 24px;
  background: #111724;
  border: 1px solid #202b3d;
  border-radius: 2px;
  padding: 0 24px;
  color: #f8fafc;
  font-size: 11px;
  outline: none;
}

.mi-search-input:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
}

.mi-search-clear {
  position: absolute;
  left: 14px;
  color: #f59e0b;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

.mi-search-icon {
  position: absolute;
  right: 14px;
  color: #f59e0b;
  font-size: 12px;
  pointer-events: none;
}

.mi-models-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.mi-model-item {
  padding: 6px 10px;
  border-bottom: 1px solid #121824;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.mi-model-item:hover {
  background-color: #131a28;
}

.mi-model-item.selected {
  background-color: #172235;
  border-left: 3px solid #00f0ff;
}

.mi-model-chip {
  font-size: 10px;
  font-style: italic;
  color: #8292a6;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-model-title {
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mi-model-item.selected .mi-model-title {
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.check-icon {
  color: #10b981;
  font-weight: 900;
}

.mi-badges-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.badge-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: lowercase;
}

.badge-tag.beta {
  background: #181818;
  color: #ffffff;
  border: 1px solid #333333;
}

.badge-tag.edl {
  background: #10b981;
  color: #042f1a;
  font-weight: 800;
}

.badge-tag.odin {
  background: #0284c7;
  color: #ffffff;
}

.mi-models-footer {
  height: 22px;
  background-color: #080c13;
  border-top: 1px solid #141b28;
  font-size: 10px;
  color: #64748b;
  padding: 0 8px;
  display: flex;
  align-items: center;
}

/* Center Actions Panel */
.mi-actions-panel {
  flex: 1;
  background-color: #0e131d;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 12px;
}

/* Tier 3 Subtabs */
.mi-subtabs-row {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #1a2438;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.mi-subtab {
  padding: 4px 12px;
  background: #131a28;
  border: 1px solid #202b3e;
  border-radius: 2px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.mi-subtab:hover {
  color: #f1f5f9;
  border-color: #38bdf8;
}

.mi-subtab.active {
  background: #192336;
  color: #ffffff;
  border-color: #f59e0b;
  box-shadow: inset 0 -2px 0 #f59e0b, 0 0 8px rgba(245, 158, 11, 0.3);
}

/* Preloader Auth Bar */
.preloader-auth-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 11px;
}

.auth-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
  font-weight: 700;
  cursor: pointer;
}

.radio-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #f59e0b;
  display: inline-block;
  background-color: transparent;
}

.preloader-select {
  background: #131a28;
  border: 1px solid #222d42;
  color: #cbd5e1;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 11px;
  outline: none;
}

/* Action Buttons Column */
.action-buttons-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-action-btn {
  height: 31px;
  background: linear-gradient(180deg, #1d2638 0%, #121824 100%);
  border: 1px solid #2c3a54;
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

.op-action-btn:hover {
  background: linear-gradient(180deg, #26334d 0%, #172030 100%);
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
  transform: translateX(2px);
  color: #ffffff;
}

.op-action-btn:active {
  transform: translateX(1px) translateY(1px);
  background: #101622;
}

.op-action-btn .btn-icon {
  color: #f59e0b;
  font-size: 13px;
  width: 16px;
  display: flex;
  justify-content: center;
}

.op-action-btn:hover .btn-icon {
  color: #00f0ff;
  text-shadow: 0 0 8px #00f0ff;
}

.custom-emi-bar {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 11px;
  color: #94a3b8;
}

/* Right Console Panel */
.right-console-panel {
  width: 490px;
  background-color: #080b11;
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-left: 1px solid #1a2336;
  flex-shrink: 0;
}

.connection-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.conn-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.conn-label {
  width: 32px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.conn-select {
  flex: 1;
  height: 22px;
  background: #0e131d;
  border: 1px solid #202b3e;
  border-radius: 2px;
  color: #e2e8f0;
  font-size: 11px;
  padding: 0 6px;
}

.fast-connect-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #cbd5e1;
  white-space: nowrap;
  cursor: pointer;
}

.terminal-card {
  flex: 1;
  background-color: #05070b;
  border: 1px solid #182234;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.terminal-logs {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  font-family: Consolas, 'Lucida Console', monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
}

.log-release-title {
  color: #ef4444;
  font-weight: 700;
  margin-bottom: 4px;
}

.log-brand-header {
  color: #00f0ff;
  font-weight: 700;
  margin-top: 6px;
}

.log-link-header a {
  color: #38bdf8;
  font-weight: 700;
  text-decoration: underline;
}

.log-bullet-list {
  margin: 2px 0 6px 16px;
  padding: 0;
}

.log-link {
  color: #38bdf8;
  text-decoration: underline;
  cursor: pointer;
}

.log-link:hover {
  color: #00f0ff;
}

.log-ordered-list {
  margin: 2px 0 6px 18px;
  padding: 0;
}

.log-drivers-header {
  color: #f59e0b;
  font-weight: 700;
  margin-top: 6px;
}

.log-divider {
  color: #334155;
  margin: 6px 0;
}

.log-hint {
  color: #10b981;
  font-weight: 600;
}

/* Progress Section */
.progress-section-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.progress-tracks {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prog-track-item {
  height: 16px;
  background: #111724;
  border: 1px solid #1f2a3e;
  border-radius: 2px;
  overflow: hidden;
}

.prog-bar-fill.gold {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  color: #080b11;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stop-round-btn {
  width: 52px;
  height: 36px;
  background: #1e2638;
  border: 1px solid #33415d;
  border-radius: 3px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.12s ease;
}

.stop-round-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

/* Status Bar Footer */
.status-bar-footer {
  height: 24px;
  background-color: #07090e;
  border-top: 1px solid #161e2e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 10px;
  color: #64748b;
  flex-shrink: 0;
}

.status-path {
  color: #94a3b8;
}

.status-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.youtube-pill {
  color: #ef4444;
  font-weight: 700;
  text-decoration: none;
}

.device-pill {
  color: #f59e0b;
  font-weight: 600;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-pill {
  color: #00f0ff;
  font-weight: 700;
}

.clock-pill {
  color: #94a3b8;
}

.btn-category-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.4));
}
.op-action-btn:hover .btn-category-icon {
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8)) brightness(1.2);
}

/* ═══════════════════════════════════════════════════════════
   UNIFIED SEARCH BAR — identical across ALL brand tabs
   Applies to: .mi-search-wrap / .samsung-search-wrap / .mi-search-box
   ═══════════════════════════════════════════════════════════ */
.mi-search-wrap,
.samsung-search-wrap,
.mi-search-box {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 6px;
  padding: 0 8px !important;
  height: 28px;
  background: #14161c !important;
  border: 1px solid #3c424e !important;
  border-radius: 2px;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mi-search-wrap:focus-within,
.samsung-search-wrap:focus-within,
.mi-search-box:focus-within {
  border-color: #f5a200 !important;
  box-shadow: 0 0 6px rgba(245, 162, 0, 0.25);
}
.mi-search-wrap .mi-search-input,
.samsung-search-wrap .samsung-search-input,
.mi-search-box input {
  flex: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #e2e6ed;
  font-family: 'Segoe UI', sans-serif;
  font-size: 11px;
  padding: 0 !important;
}
.mi-search-wrap .mi-search-input::placeholder,
.samsung-search-wrap .samsung-search-input::placeholder,
.mi-search-box input::placeholder {
  color: #798291;
  font-style: italic;
}
/* icons & clear buttons — same size, gold, inline (never absolute) */
.mi-search-icon,
.samsung-search-icon,
.search-glass,
.mi-search-clear,
.samsung-clear-icon {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex-shrink: 0;
  font-size: 12px !important;
  line-height: 1;
  color: #f5a200 !important;
  user-select: none;
}
.mi-search-clear { cursor: pointer; font-weight: bold; }
.mi-search-clear:hover, .samsung-clear-icon:hover { color: #ffcc44 !important; }

/* ═══════════════════════════════════════════════════════════
   UNIFIED LAYOUT — sidebar / subtabs identical on ALL tabs
   ═══════════════════════════════════════════════════════════ */
.mi-security-workspace {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.mi-models-sidebar {
  width: 260px; /* matches .mi-models-panel used by every other brand */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #13151c;
  border-right: 1px solid #2a2e38;
  min-height: 0;
}
.mi-models-sidebar .mi-models-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.mi-ops-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
/* unified subtab row + tabs (mi-subtab = styled reference) */
.mi-sec-tabs-row,
.mi-subtabs-row {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #2a2e38;
  flex-wrap: wrap;
}
.mi-sec-tab {
  background: #2b2f38;
  color: #a4abb8;
  border: 1px solid #3c424e;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.1s;
  font-family: 'Segoe UI', sans-serif;
}
.mi-sec-tab:hover { background: #353a45; color: #fff; }
.mi-sec-tab.active {
  background: #ffaa00;
  color: #000;
  border-color: #ffba33;
}
/* unified model list rows on every tab */
.mi-models-list {
  font-size: 11px;
}
.mi-model-item {
  padding: 6px 8px;
  border-bottom: 1px solid #282c36;
  cursor: pointer;
  transition: background 0.1s;
}
.mi-model-item:hover { background: #272b35; }
.mi-model-item.selected { background: #2b3040; }
/* models footer counter */
.mi-models-footer {
  padding: 6px 10px;
  font-size: 10px;
  color: #798291;
  border-top: 1px solid #2a2e38;
  background: #13151c;
}

/* ═══════════════════════════════════════════════════════════
   UNIFIED ACTION BUTTONS — .mi-action-btn matches .op-action-btn
   ═══════════════════════════════════════════════════════════ */
.mi-action-btn {
  height: 31px !important;
  background: linear-gradient(180deg, #1d2638 0%, #121824 100%) !important;
  border: 1px solid #2c3a54 !important;
  color: #e2e8f0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: none;
}
.mi-action-btn:hover {
  background: linear-gradient(180deg, #26334d 0%, #172030 100%) !important;
  border-color: #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
  color: #ffffff !important;
}
.mi-action-btn.danger, .mi-action-btn.danger:hover { color: #ff6b6b !important; }
.mi-action-btn .op-icon {
  color: #f5a200 !important;
  font-size: 13px;
  width: 16px;
  display: flex;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   UNIFIED ACTION BUTTONS — .mi-act-btn (14 brand views)
   identical to .op-action-btn navy style
   ═══════════════════════════════════════════════════════════ */
.mi-act-btn {
  height: 31px;
  background: linear-gradient(180deg, #1d2638 0%, #121824 100%);
  border: 1px solid #2c3a54;
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  color: #e2e8f0;
  font-family: 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  text-align: left;
  width: 100%;
}
.mi-act-btn:hover {
  background: linear-gradient(180deg, #26334d 0%, #172030 100%);
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
  transform: translateX(2px);
  color: #ffffff;
}
.mi-act-btn:active {
  transform: translateX(1px) translateY(1px);
  background: #101622;
}
.mi-act-btn .btn-icon {
  color: #f5a200;
  font-size: 13px;
  width: 16px;
  display: flex;
  justify-content: center;
}
.mi-act-btn:hover .btn-icon { color: #ffcc44; }

/* ═══════════════════════════════════════════════════════════
   UNIFIED OPERATION BUTTONS v2 — identical metrics on ALL tabs
   .op-action-btn | .mi-action-btn | .mi-act-btn
   .gold-btn (primary accent) | .secondary-btn | .flash-btn
   Same: height 31px · font 11px/700 · uppercase · icon 13px gold
   ═══════════════════════════════════════════════════════════ */
.op-action-btn,
.mi-action-btn,
.mi-act-btn,
.gold-btn,
.secondary-btn,
.flash-btn {
  height: 31px !important;
  min-height: 31px !important;
  padding: 0 12px !important;
  margin: 0;
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  line-height: 1 !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* full-width stacked actions on the operations panel */
.mi-action-btn,
.mi-act-btn,
.op-action-btn {
  width: 100%;
  text-align: left;
}
/* gold primary buttons keep the gold accent, same metrics */
.gold-btn,
.flash-btn {
  background: linear-gradient(180deg, #ffaa00 0%, #d47e00 100%) !important;
  border: 1px solid #ffba33 !important;
  color: #1a1100 !important;
  text-shadow: none !important;
  justify-content: center;
}
.gold-btn:hover, .flash-btn:hover {
  background: linear-gradient(180deg, #ffba33 0%, #e68d00 100%) !important;
  color: #000 !important;
}
.secondary-btn {
  background: linear-gradient(180deg, #2a3348 0%, #1b2333 100%) !important;
  border: 1px solid #2c3a54 !important;
  color: #e2e8f0 !important;
  justify-content: center;
}
.secondary-btn:hover {
  background: linear-gradient(180deg, #33405a 0%, #223046 100%) !important;
  border-color: #00f0ff !important;
  color: #fff !important;
}
/* unified icon badge inside every action button */
.op-action-btn .btn-icon,
.mi-action-btn .btn-icon,
.mi-act-btn .btn-icon,
.mi-action-btn .op-icon,
.mi-act-btn .op-icon,
.gold-btn .btn-icon,
.secondary-btn .btn-icon,
.mi-act-btn .btn-text,
.op-action-btn .btn-text {
  flex-shrink: 0;
}
.op-action-btn .btn-icon,
.mi-action-btn .btn-icon,
.mi-act-btn .btn-icon,
.mi-action-btn .op-icon,
.mi-act-btn .op-icon,
.gold-btn .btn-icon,
.secondary-btn .btn-icon {
  font-size: 13px !important;
  width: 16px !important;
  display: flex !important;
  justify-content: center !important;
  color: #f5a200 !important;
}
.gold-btn .btn-icon { color: #1a1100 !important; }


/* ═══════════════════════════════════════════════════════════
   BUTTON AVAILABILITY STATES — driven by LoaderResolver
   ═══════════════════════════════════════════════════════════ */
.op-action-btn.state-ready, .mi-act-btn.state-ready, .mi-action-btn.state-ready,
.gold-btn.state-ready, .secondary-btn.state-ready {
  border-color: rgba(0,200,100,0.35) !important;
}
.op-action-btn.state-ready::after, .mi-act-btn.state-ready::after,
.mi-action-btn.state-ready::after, .gold-btn.state-ready::after,
.secondary-btn.state-ready::after {
  content: '¹3';
  margin-left: auto;
  color: #00c864;
  font-size: 10px;
  font-weight: 700;
}
.op-action-btn.state-unavailable, .mi-act-btn.state-unavailable,
.mi-action-btn.state-unavailable, .gold-btn.state-unavailable,
.secondary-btn.state-unavailable {
  opacity: 0.32;
}
.op-action-btn.state-unavailable::after, .mi-act-btn.state-unavailable::after,
.mi-action-btn.state-unavailable::after, .gold-btn.state-unavailable::after,
.secondary-btn.state-unavailable::after {
  content: '¹7';
  margin-left: auto;
  color: #ff5050;
  font-size: 10px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   UNIFIED MODEL LIST TEXT — matches .mi-model-title metrics
   (same font size / weight / colors on ALL brand tabs)
   ═══════════════════════════════════════════════════════════ */
.model-item-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.model-name {
  color: #e5e9f0;
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  text-align: left;
}
.model-sub-text {
  color: #8f98a8;
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.35;
  text-align: left;
}
.model-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.model-chip {
  color: #7fd4ff;
  font-size: 10px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   BUTTON ON/OFF STATES (job engine)
   OFF  = a job is running  → all action buttons disabled
   ON   = idle              → buttons enabled per availability
   STOP button: ON (red, active) while job runs, OFF when idle
   ═══════════════════════════════════════════════════════════ */
.op-action-btn.state-busy,
.mi-act-btn.state-busy,
.mi-action-btn.state-busy,
.gold-btn.state-busy,
.secondary-btn.state-busy {
  opacity: 0.35 !important;
  pointer-events: none !important;
  filter: grayscale(50%);
}
/* STOP button */
.stop-round-btn, #btnStopOperation {
  opacity: 0.35;
  pointer-events: none;
  transition: all 0.15s;
}
.stop-round-btn.job-active, #btnStopOperation.job-active {
  opacity: 1;
  pointer-events: all;
  border-color: #ff5050 !important;
  color: #ff5050 !important;
  box-shadow: 0 0 10px rgba(255, 80, 80, 0.35);
}

/* ═══════════════════════════════════════════════════════════
   BRAND CARDS — UnlockBoxPro home style (logo + label below)
   Neon-blue tech frame, like the concept UI
   ═══════════════════════════════════════════════════════════ */
.brands-container {
  background: linear-gradient(180deg, #0a1020 0%, #0b1526 100%);
  border-bottom: 1px solid rgba(0, 170, 255, 0.25);
}
.brandbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 4px;
  border-bottom: 1px solid rgba(0, 170, 255, 0.12);
}
.brandbar-title {
  font-size: 12px;
  font-weight: 700;
  color: #dfe8f5;
  letter-spacing: 0.4px;
}
.brandbar-search input {
  width: 200px;
  height: 24px;
  background: #0d1830;
  border: 1px solid rgba(0, 170, 255, 0.3);
  border-radius: 12px;
  color: #cdd6f4;
  font-size: 10.5px;
  padding: 0 12px;
  outline: none;
  font-family: 'Segoe UI', sans-serif;
}
.brandbar-search input:focus {
  border-color: #f5a200;
  box-shadow: 0 0 8px rgba(0, 170, 255, 0.25);
}
.brand-btn {
  flex-direction: row !important;
  height: 46px !important;
  min-width: 92px !important;
  padding: 4px 6px !important;
  gap: 0 !important;
  background: linear-gradient(180deg, #0e1a30 0%, #0a1220 100%) !important;
  border: 1px solid rgba(0, 170, 255, 0.35) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 12px rgba(0, 170, 255, 0.06);
}
.brand-btn:hover {
  border-color: #00c8ff !important;
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.35), inset 0 0 12px rgba(0, 170, 255, 0.1) !important;
}
.brand-btn.active {
  border-color: #f5a200 !important;
  box-shadow: 0 0 14px rgba(245, 162, 0, 0.4), inset 0 0 12px rgba(245, 162, 0, 0.08) !important;
}
.brand-btn .brand-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #8fb8e0;
  letter-spacing: 0.3px;
  line-height: 1;
}
.brand-btn:hover .brand-label { color: #cfe6ff; }
.brand-btn.active .brand-label { color: #ffcc44; }
.brand-btn svg { height: 20px !important; }

/* brand cards use the PNG logo plates — same filter behavior as before */
.brand-btn .brand-img {
  height: 26px;
  width: auto;
  max-width: 86px;
  object-fit: contain;
  display: block;
  transition: filter 0.18s ease;
}
.brand-btn:not(.active):not(:hover) .brand-img { filter: brightness(0.8) saturate(0.75); }
.brand-btn:hover .brand-img, .brand-btn.active .brand-img { filter: brightness(1.08) saturate(1.1); }

/* ═══════════════════════════════════════════════════════════
   BRAND PLATES — mockup style: colored octagon plate + gold frame
   ═══════════════════════════════════════════════════════════ */
.brand-btn .brand-img { display: none !important; }
.brand-plate {
  width: 82px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
  border: 1.5px solid rgba(255, 190, 90, 0.85);
  outline: 1px solid rgba(0, 170, 255, 0.45);
  outline-offset: 1.5px;
  clip-path: polygon(9% 0, 91% 0, 100% 28%, 100% 72%, 91% 100%, 9% 100%, 0 72%, 0 28%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.35);
}
.brand-plate b {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: var(--fs, 11px);
  font-weight: 800;
  font-style: italic;
  color: var(--tc, #fff);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  white-space: nowrap;
  transform: scaleY(1.08);
}
.brand-btn:hover .brand-plate { filter: brightness(1.15) saturate(1.1); }
.brand-btn.active .brand-plate { filter: brightness(1.1); }

/* brand plates cropped from the official concept art */
.brand-plate { display: none !important; }
.brand-plate-fallback {
  width: 84px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: #14213c; border: 1px solid #f0b060; border-radius: 4px;
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
}
.brand-btn .brand-plate-img {
  width: 84px;
  height: auto;
  display: block;
  transition: filter 0.18s ease, transform 0.18s ease;
  filter: drop-shadow(0 0 4px rgba(0, 170, 255, 0.25));
}
.brand-btn:not(.active):not(:hover) .brand-plate-img { filter: brightness(0.82); }
.brand-btn:hover .brand-plate-img {
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 200, 255, 0.45));
  transform: scale(1.04);
}
.brand-btn.active .brand-plate-img {
  filter: brightness(1.08) drop-shadow(0 0 8px rgba(245, 162, 0, 0.45));
}

/* ═══════════════════════════════════════════════════════════
   TITLEBAR — UnlockBox Pro blue/gold theme (native caption removed,
   this is the only titlebar now; drag is handled in app.js)
   ═══════════════════════════════════════════════════════════ */
.window-titlebar, .app-titlebar, .login-titlebar {
  background: linear-gradient(180deg, #0f1c33 0%, #060a14 100%) !important;
  border-bottom: 1px solid rgba(0, 170, 255, 0.4) !important;
  box-shadow: 0 1px 10px rgba(0, 170, 255, 0.15);
  cursor: move;
}
.window-titlebar .win-btn, .app-titlebar .win-btn, .login-titlebar .win-btn {
  cursor: pointer;
}
.app-title-text, .titlebar-title {
  text-shadow: 0 0 8px rgba(0, 170, 255, 0.35);
}
.app-title-text a {
  color: #f5a200 !important;
}

/* Two parallel subtab systems exist across brand files (.mi-subtab used by
   Xiaomi/Samsung/Huawei/Oppo/Vsmart/etc., .mi-sec-tab used by Vivo/Apple) with
   drifted .active treatments — force them to render identically everywhere. */
.mi-subtab, .mi-sec-tab {
  background: #2b2f38;
  color: #a4abb8;
  border: 1px solid #3c424e;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
}
.mi-subtab:hover, .mi-sec-tab:hover {
  background: #353a45;
  color: #fff;
}
.mi-subtab.active, .mi-sec-tab.active {
  background: #ffaa00;
  color: #000;
  border-color: #ffba33;
  box-shadow: none;
}
.mi-subtabs-row, .mi-sec-tabs-row {
  background: transparent !important;
}

/* Smartphone search results dropdown — matches real models from every
   brand's own database (not fabricated), jumps straight to brand+model. */
.model-search-results {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: #0d1220;
  border: 1px solid rgba(0, 170, 255, 0.35);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 3000;
}
.model-search-results.hidden { display: none; }
.model-search-item {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.model-search-item:last-child { border-bottom: none; }
.model-search-item:hover { background: #16223a; }
.model-search-item .msr-brand {
  font-size: 9.5px;
  font-weight: 700;
  color: #f5a200;
  letter-spacing: 0.4px;
}
.model-search-item .msr-name {
  font-size: 11.5px;
  color: #e5e9f0;
  font-weight: 600;
}
.model-search-item .msr-sub {
  font-size: 10px;
  color: #8f98a8;
}
.model-search-empty {
  padding: 10px;
  font-size: 11px;
  color: #6b7383;
  text-align: center;
}

/* Login input boxes — .input-group had no rules at all, so the borderless
   .login-input fields rendered as invisible bare text on the dark background. */
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.input-group {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  background: #0d1220;
  border: 1px solid #2a3550;
  border-radius: 3px;
}
.input-group:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}

/* Login emblem — was unbounded (no size rule existed for this class), which
   let the raw ~800x988 PNG blow out the whole login window. */
.lock-circle-emblem {
  width: 168px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(0, 170, 255, 0.4));
}

/* Real server-login progress — shown only while the login request is in
   flight; never implies progress we can't actually measure (indeterminate
   sweep, not a fake percentage). */
.login-progress-track {
  width: 100%;
  height: 4px;
  background: #0d1220;
  border: 1px solid #2a3550;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.login-progress-track.hidden { display: none; }
.login-progress-fill {
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #0284c7);
  animation: loginProgressSweep 1.1s ease-in-out infinite;
}
@keyframes loginProgressSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Login error line (real client-side validation, no fake network delay) */
.login-error {
  min-height: 14px;
  font-size: 11px;
  color: #ff5050;
  text-align: center;
}