:root {
  --pxx-blue: #60A0E0;
  --pxx-violet: #6080E0;
  --pxx-magenta: #A040E0;
  --pxx-grad: linear-gradient(135deg, var(--pxx-blue), var(--pxx-violet) 58%, var(--pxx-magenta));
  --pxx-border: #e7ebf4;
  --pxx-text: #2c3447;
}

body.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) {
  background: #f6f8fd;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #navbar {
  border-bottom: 1px solid var(--pxx-border) !important;
  box-shadow: 0 10px 20px rgba(17, 26, 48, 0.06) !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #logo {
  color: var(--pxx-violet) !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #logo-img {
  max-height: 50px !important;
  min-height: 50px !important;
  max-width: 120px !important;
  width: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .btn {
  background: var(--pxx-grad) !important;
  background-image: var(--pxx-grad) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 20px rgba(96, 128, 224, 0.18), inset 0 1px 0 rgba(255,255,255,0.22);
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .btn:hover,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .btn:focus {
  color: #fff !important;
  filter: brightness(1.03);
  box-shadow: 0 12px 24px rgba(160, 64, 224, 0.22), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Keep main CTA prominent but avoid changing behavior */
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #download-button.btn {
  border-radius: 12px !important;
}

/* Toolbar icon links and labels */
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #new-graphic-button,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #save-button,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #undo-button,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #delete-button,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #zIndexDown-button,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #zIndexUp-button {
  color: #5d6b89 !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #new-graphic-button:hover,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #save-button:hover {
  color: var(--pxx-violet) !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .short-tabs-panel {
  background: #ffffff !important;
  border-top: 1px solid var(--pxx-border) !important;
  box-shadow: 0 -8px 18px rgba(17, 26, 48, 0.05);
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .short-tabs-panel a {
  color: #56627c !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .short-tabs-panel a:hover,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .short-tabs-panel a.active,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .short-tabs-panel a.menu-hover:hover {
  background: linear-gradient(180deg, rgba(96,160,224,0.1), rgba(160,64,224,0.06)) !important;
  color: var(--pxx-violet) !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .short-tabs-panel span {
  color: inherit !important;
}

/* Popups/cards */
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .popup {
  border-radius: 16px !important;
  border: 1px solid var(--pxx-border) !important;
  box-shadow: 0 20px 40px rgba(17, 26, 48, 0.14) !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .popup .close:hover,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .overlay-white .close:hover {
  color: var(--pxx-violet) !important;
}

/* Inputs readability and fresh borders */
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .input-text,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .input-color-text,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) input[type="text"].input-text,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) input[type="number"].input-text {
  border: 1px solid #dbe3f2 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--pxx-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .input-text:focus,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .input-color-text:focus {
  border-color: rgba(96, 128, 224, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(96, 128, 224, 0.1) !important;
}

/* Mobile studio drop zones (background/images/graphics) */
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #drop_zone,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #drop_zone_graphic,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #drop_main_image_zone_graphic {
  background: linear-gradient(180deg, rgba(96, 160, 224, 0.08), rgba(160, 64, 224, 0.04)) #f9fbff !important;
  color: #33415c !important;
  border: 1px dashed rgba(96, 128, 224, 0.42) !important;
  outline: 1px dashed rgba(96, 128, 224, 0.35) !important;
  outline-offset: -8px !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 12px 24px rgba(17, 26, 48, 0.06);
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #drop_zone:hover,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #drop_zone_graphic:hover,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) #drop_main_image_zone_graphic:hover {
  background: linear-gradient(180deg, rgba(96, 160, 224, 0.12), rgba(160, 64, 224, 0.07)) #f7faff !important;
  border-color: rgba(160, 64, 224, 0.5) !important;
  outline-color: rgba(160, 64, 224, 0.35) !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .dragleave {
  background: linear-gradient(180deg, rgba(96, 160, 224, 0.08), rgba(160, 64, 224, 0.04)) #f9fbff !important;
  outline-offset: -8px !important;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .dragenter {
  background: #ffffff !important;
  outline-color: rgba(96, 128, 224, 0.55) !important;
  outline-offset: -14px !important;
}

/* A few legacy accent colors */
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .label,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .span-label,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .span-float {
  color: #56627c;
}

.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) a,
.studio-mobile-refresh-lite:not(.studio-disable-refresh-2026) .link {
  color: var(--pxx-violet);
}