/* ============================================================================
   MockupMaker visual design system
   Visual layer only: no layout contracts, ids, events or application logic.
   ============================================================================ */

:root {
  --mm-font: "IRANSansX", "IRANSans X", "Vazirmatn", Tahoma, Arial, sans-serif;

  --mm-ink-950: #11151d;
  --mm-ink-900: #1b1b23;
  --mm-ink-850: #22252f;
  --mm-ink-800: #292d38;

  --mm-blue-700: #246fbd;
  --mm-blue-800: #1c5f9e;
  --mm-blue-600: #3087d6;
  --mm-blue-500: #459be0;
  --mm-blue-100: #eaf4fc;
  --mm-blue-050: #f4f9fd;

  --mm-orange-700: #d98518;
  --mm-orange-600: #ee9c27;
  --mm-orange-500: #f3ad3e;
  --mm-orange-400: #f8bd59;
  --mm-orange-100: #fff2d9;

  --mm-steel-700: #4d7489;
  --mm-steel-600: #6b92a7;
  --mm-steel-100: #eaf0f3;

  --mm-success-800: #1c4131;
  --mm-success-600: #3f8f66;
  --mm-success-100: #e2f1e6;
  --mm-danger-700: #a01524;
  --mm-danger-600: #d64b52;
  --mm-danger-100: #fbe8e9;

  --mm-text: #202733;
  --mm-text-2: #536171;
  --mm-text-3: #7b8793;
  --mm-surface: #ffffff;
  --mm-surface-2: #f6f8fa;
  --mm-surface-3: #eef2f5;
  --mm-border: #dce2e8;
  --mm-border-strong: #cbd4dd;

  --mm-radius-xs: 6px;
  --mm-radius-sm: 8px;
  --mm-radius-md: 10px;
  --mm-radius-lg: 14px;
  --mm-radius-xl: 18px;
  --mm-radius-pill: 999px;

  --mm-shadow-xs: 0 1px 2px rgba(17, 21, 29, .05);
  --mm-shadow-sm: 0 5px 16px rgba(17, 21, 29, .07);
  --mm-shadow-md: 0 16px 44px rgba(17, 21, 29, .15);
  --mm-focus: 0 0 0 3px rgba(48, 135, 214, .18);
}

html,
body,
input,
button,
select,
textarea {
  font-family: var(--mm-font) !important;
}

body {
  color: var(--mm-text);
  background: #e6e6e6;
}

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

/* Requested clean initial canvas; the scene renderer uses the same default. */
#canvas-wrapper,
#viewport-stage {
  background-color: #ffffff !important;
}

/* Keep the background-image machinery available internally, but remove its
   complete control group from the visible interface. */
.vp-toolbar .vp-menu[data-vp-menu="background-images"] {
  display: none !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mm-blue-600) !important;
  outline-offset: 2px !important;
}

/* Header ------------------------------------------------------------------- */

#global-header,
body.night-mode #global-header {
  background: linear-gradient(135deg, #232630 0%, var(--mm-ink-900) 52%, #151821 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: 0 5px 18px rgba(10, 13, 20, .18) !important;
  color: #f5f7fa !important;
  filter: none !important;
}

#global-header .mm-brand-line .app-name {
  color: #f7f8fb !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #f7f8fb !important;
  font-weight: 780 !important;
  letter-spacing: -.25px !important;
}

#global-header .mm-brand-line .version {
  align-self: flex-start !important;
  margin: 4px 0 0 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #aeb8c5 !important;
  -webkit-text-fill-color: #aeb8c5 !important;
  box-shadow: none !important;
  font-size: 8px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

#global-header .mm-brand-logo {
  color: #d9e0e8 !important;
}

#global-header .header-btn,
#global-header .mm-header-actions .mm-header-muted,
body.night-mode #global-header .mm-header-actions .mm-header-muted {
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: var(--mm-radius-md) !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: none !important;
  color: #dce2e9 !important;
  font-weight: 700 !important;
}

#global-header .mm-header-actions .mm-header-muted i,
body.night-mode #global-header .mm-header-actions .mm-header-muted i {
  color: #aeb9c6 !important;
}

#global-header .header-btn:hover,
#global-header .mm-header-actions .mm-header-muted:hover,
body.night-mode #global-header .mm-header-actions .mm-header-muted:hover {
  border-color: rgba(255, 255, 255, .20) !important;
  background: rgba(255, 255, 255, .105) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

#global-header .user-info,
body.night-mode #global-header .user-info {
  min-height: 38px !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
  color: #f2f5f8 !important;
}

#global-header .user-info .user-name {
  color: #f1f4f7 !important;
}

#global-header .user-info .user-renders {
  background: rgba(166, 210, 176, .12) !important;
  color: #b9ddc1 !important;
}

#global-header .daynight-toggle {
  background: #11151d !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

/* Important CTA: purchase */
#global-header .subscribe-btn,
body.night-mode #global-header .subscribe-btn {
  min-height: 38px !important;
  padding: 0 17px !important;
  border: 1px solid rgba(255, 213, 135, .72) !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, var(--mm-orange-400), var(--mm-orange-600)) !important;
  color: #3d2a0d !important;
  box-shadow: 0 7px 18px rgba(238, 156, 39, .24) !important;
  font-weight: 850 !important;
}

#global-header .subscribe-btn:hover,
body.night-mode #global-header .subscribe-btn:hover {
  background: linear-gradient(135deg, #ffc96a, #f0a22e) !important;
  border-color: #ffcf7a !important;
  box-shadow: 0 10px 24px rgba(238, 156, 39, .34) !important;
  transform: translateY(-1px) !important;
}

#global-header .subscribe-btn.has-active-plan {
  border-color: rgba(255, 255, 255, .11) !important;
  background: #39404b !important;
  color: #c6ced8 !important;
  box-shadow: none !important;
}

/* Secondary toolbar -------------------------------------------------------- */

#subHeaderBar,
body:not(.night-mode) #subHeaderBar {
  background: rgba(247, 248, 250, .98) !important;
  border-bottom: 1px solid var(--mm-border) !important;
  box-shadow: 0 4px 14px rgba(17, 21, 29, .055) !important;
  color: var(--mm-text) !important;
}

#subHeaderBar .shb-group,
#subHeaderBar .shb-preset-group {
  border: 1px solid var(--mm-border) !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  box-shadow: var(--mm-shadow-xs) !important;
}

#subHeaderBar .shb-label,
#subHeaderBar .shb-preset-group .shb-label {
  color: var(--mm-text-2) !important;
  font-weight: 700 !important;
}

#subHeaderBar .shb-label i,
#subHeaderBar .shb-preset-group .shb-label i {
  color: var(--mm-steel-600) !important;
}

#subHeaderBar .shb-divider {
  background: var(--mm-border) !important;
}

#subHeaderBar input[type="text"],
#subHeaderBar input[type="number"],
#subHeaderBar select,
#subHeaderBar .shb-icon-btn,
#subHeaderBar .shb-preset-btn,
#subHeaderBar .shb-lock-btn {
  border-color: var(--mm-border) !important;
  border-radius: var(--mm-radius-sm) !important;
  background: var(--mm-surface-2) !important;
  color: var(--mm-text-2) !important;
  box-shadow: none !important;
}

#subHeaderBar input:focus,
#subHeaderBar select:focus {
  border-color: var(--mm-blue-600) !important;
  background: #ffffff !important;
  box-shadow: var(--mm-focus) !important;
}

#subHeaderBar .shb-icon-btn:hover,
#subHeaderBar .shb-preset-btn:hover,
#subHeaderBar .shb-lock-btn:hover {
  border-color: #bfd2e1 !important;
  background: var(--mm-blue-050) !important;
  color: var(--mm-blue-700) !important;
}

#subHeaderBar .shb-preset-btn.save {
  border-color: #c9e2d0 !important;
  background: var(--mm-success-100) !important;
  color: var(--mm-success-800) !important;
}

#subHeaderBar .shb-preset-btn.delete,
#subHeaderBar .shb-reset-all-btn {
  border-color: #f0cdd0 !important;
  background: #fff6f6 !important;
  color: var(--mm-danger-700) !important;
}

#subHeaderBar .shb-reset-all-btn:hover {
  border-color: #e5afb4 !important;
  background: var(--mm-danger-100) !important;
  transform: translateY(-1px) !important;
}

#subHeaderBar .shb-format-group .format-btn {
  border-color: var(--mm-border) !important;
  background: #ffffff !important;
  color: var(--mm-text-3) !important;
}

#subHeaderBar .shb-format-group .format-btn.active {
  border-color: #bcd6eb !important;
  background: var(--mm-blue-100) !important;
  color: var(--mm-blue-700) !important;
  box-shadow: none !important;
}

/* Important CTA: library */
#subHeaderBar .shb-model-group {
  border-color: #f0d29c !important;
  background: #fffaf0 !important;
}

#subHeaderBar .shb-model-group .current-model-name {
  border-color: rgba(238, 156, 39, .20) !important;
  background: rgba(243, 173, 62, .10) !important;
  color: #76501b !important;
}

#subHeaderBar .shb-model-group .library-btn,
body.night-mode #subHeaderBar .shb-model-group .library-btn {
  min-height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid #e9a33d !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--mm-orange-400), var(--mm-orange-600)) !important;
  color: #3d2a0d !important;
  box-shadow: 0 5px 13px rgba(238, 156, 39, .21) !important;
  font-weight: 850 !important;
}

#subHeaderBar .shb-model-group .library-btn:hover,
body.night-mode #subHeaderBar .shb-model-group .library-btn:hover {
  border-color: #f4b24d !important;
  background: linear-gradient(135deg, #ffc86a, #f0a22e) !important;
  color: #332208 !important;
  box-shadow: 0 8px 17px rgba(238, 156, 39, .29) !important;
  transform: translateY(-1px) !important;
}

/* Core action stays blue to preserve hierarchy among highlighted features. */
#subHeaderBar .shb-export-main,
body.night-mode #subHeaderBar .shb-export-main {
  min-height: 34px !important;
  border: 1px solid #287ac3 !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--mm-blue-700), var(--mm-blue-800)) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(48, 135, 214, .22) !important;
  font-weight: 800 !important;
}

#subHeaderBar .shb-export-main:hover {
  background: linear-gradient(135deg, #2878be, #1f68aa) !important;
  box-shadow: 0 9px 20px rgba(48, 135, 214, .30) !important;
  transform: translateY(-1px) !important;
}

/* Side panels -------------------------------------------------------------- */

#leftPanel,
#rightPanel,
body:not(.night-mode) #leftPanel,
body:not(.night-mode) #rightPanel {
  background: var(--mm-surface-2) !important;
  border-color: var(--mm-border) !important;
  box-shadow: none !important;
  color: var(--mm-text) !important;
}

#leftPanel::-webkit-scrollbar,
#rightPanel::-webkit-scrollbar,
.modal-card::-webkit-scrollbar {
  width: 5px !important;
}

#leftPanel::-webkit-scrollbar-thumb,
#rightPanel::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb {
  border-radius: var(--mm-radius-pill) !important;
  background: #c1cbd4 !important;
}

#leftPanel .panel-title,
#rightPanel .panel-title,
.panel-title,
body:not(.night-mode) #leftPanel .panel-title,
body:not(.night-mode) #rightPanel .panel-title {
  border-bottom: 1px solid var(--mm-border) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--mm-text) !important;
  font-weight: 800 !important;
}

#leftPanel .panel-title i,
#rightPanel .panel-title i {
  display: inline-grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: var(--mm-blue-100) !important;
  color: var(--mm-blue-600) !important;
  font-size: 13px !important;
}

#leftPanel .panel-title i {
  background: var(--mm-orange-100) !important;
  color: var(--mm-orange-700) !important;
}

#leftPanel .light-section,
#rightPanel .mm-flat-section.collapsible,
.collapsible {
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius-lg) !important;
  background: var(--mm-surface) !important;
  box-shadow: var(--mm-shadow-xs) !important;
  overflow: hidden !important;
}

#leftPanel .light-section {
  padding: 0 10px 11px !important;
}

#leftPanel .light-section + .light-section {
  border-top: 1px solid var(--mm-border) !important;
  padding-top: 0 !important;
}

#leftPanel .light-section-title,
#rightPanel .mm-flat-section-title,
.collapsible-header {
  min-height: 42px !important;
  padding: 9px 10px !important;
  border-bottom: 1px solid #e7ebef !important;
  background: transparent !important;
  color: #2c3743 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

#leftPanel .light-section-title i,
#rightPanel .mm-flat-section-title i,
.collapsible-header i {
  color: var(--mm-steel-600) !important;
}

#leftPanel .light-section-body,
#rightPanel .mm-flat-section > .collapsible-body {
  padding: 9px 8px 4px !important;
}

.control-group label,
#tab-cube .mm-cube-row-label {
  color: var(--mm-text-2) !important;
  font-weight: 700 !important;
}

.slider-input-row input[type="range"],
.shb-fov-slider,
.v4-tune input[type="range"],
.pro-offset-axis input[type="range"] {
  accent-color: var(--mm-blue-600) !important;
}

/* The camera lens and cylinder dimensions have dedicated slider styling so
   older global range rules cannot override their visual state. */
#subHeaderBar #fovSlider,
#cylinderDimensionPanel #cylinderDiameter,
#cylinderDimensionPanel #cylinderHeight {
  --range-pct: 0%;
  -webkit-appearance: none !important;
  appearance: none !important;
  direction: ltr !important;
  height: 16px !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  cursor: pointer !important;
  accent-color: var(--mm-blue-600) !important;
  background: linear-gradient(90deg,
    var(--mm-blue-600) 0%,
    var(--mm-blue-600) var(--range-pct),
    #cbd4dd var(--range-pct),
    #cbd4dd 100%) center / 100% 4px no-repeat !important;
}

#subHeaderBar #fovSlider {
  width: 88px !important;
  flex: 0 0 88px !important;
}

#cylinderDimensionPanel #cylinderDiameter,
#cylinderDimensionPanel #cylinderHeight {
  width: 100% !important;
}

#subHeaderBar #fovSlider::-webkit-slider-runnable-track,
#cylinderDimensionPanel #cylinderDiameter::-webkit-slider-runnable-track,
#cylinderDimensionPanel #cylinderHeight::-webkit-slider-runnable-track {
  height: 4px !important;
  border: 0 !important;
  border-radius: var(--mm-radius-pill) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#subHeaderBar #fovSlider::-webkit-slider-thumb,
#cylinderDimensionPanel #cylinderDiameter::-webkit-slider-thumb,
#cylinderDimensionPanel #cylinderHeight::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -6px !important;
  border: 3px solid var(--mm-blue-600) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 2px 5px rgba(31, 39, 51, .20) !important;
}

#subHeaderBar #fovSlider::-moz-range-track,
#cylinderDimensionPanel #cylinderDiameter::-moz-range-track,
#cylinderDimensionPanel #cylinderHeight::-moz-range-track {
  height: 4px !important;
  border: 0 !important;
  border-radius: var(--mm-radius-pill) !important;
  background: transparent !important;
}

#subHeaderBar #fovSlider::-moz-range-progress,
#cylinderDimensionPanel #cylinderDiameter::-moz-range-progress,
#cylinderDimensionPanel #cylinderHeight::-moz-range-progress {
  height: 4px !important;
  background: transparent !important;
}

#subHeaderBar #fovSlider::-moz-range-thumb,
#cylinderDimensionPanel #cylinderDiameter::-moz-range-thumb,
#cylinderDimensionPanel #cylinderHeight::-moz-range-thumb {
  width: 10px !important;
  height: 10px !important;
  border: 3px solid var(--mm-blue-600) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 2px 5px rgba(31, 39, 51, .20) !important;
}

.slider-input-row input[type="range"]::-webkit-slider-runnable-track,
.shb-fov-slider::-webkit-slider-runnable-track,
.v4-tune input[type="range"]::-webkit-slider-runnable-track,
.pro-offset-axis input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: var(--mm-radius-pill) !important;
  background: #cbd4dd !important;
}

.slider-input-row input[type="range"]::-webkit-slider-thumb,
.shb-fov-slider::-webkit-slider-thumb,
.v4-tune input[type="range"]::-webkit-slider-thumb,
.pro-offset-axis input[type="range"]::-webkit-slider-thumb {
  width: 15px !important;
  height: 15px !important;
  margin-top: -5.5px !important;
  border: 3px solid var(--mm-blue-600) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(31, 39, 51, .16) !important;
}

.slider-input-row input[type="range"]::-moz-range-track,
.shb-fov-slider::-moz-range-track,
.v4-tune input[type="range"]::-moz-range-track,
.pro-offset-axis input[type="range"]::-moz-range-track {
  height: 4px !important;
  border-radius: var(--mm-radius-pill) !important;
  background: #cbd4dd !important;
}

.slider-input-row input[type="range"]::-moz-range-thumb,
.shb-fov-slider::-moz-range-thumb,
.v4-tune input[type="range"]::-moz-range-thumb,
.pro-offset-axis input[type="range"]::-moz-range-thumb {
  width: 10px !important;
  height: 10px !important;
  border: 3px solid var(--mm-blue-600) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

.slider-input-row input[type="number"],
.slider-input-row input[type="text"],
.mm-unit-field input,
#cubeFoldInput,
.material-select,
select,
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius-sm) !important;
  background: #f8fafb !important;
  color: var(--mm-text) !important;
  box-shadow: none !important;
}

.slider-input-row input:focus,
.mm-unit-field input:focus,
#cubeFoldInput:focus,
.material-select:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: var(--mm-blue-600) !important;
  background: #ffffff !important;
  box-shadow: var(--mm-focus) !important;
  outline: none !important;
}

.tab-container {
  border: 1px solid var(--mm-border) !important;
  background: var(--mm-surface-3) !important;
}

.tab-btn {
  color: var(--mm-text-3) !important;
}

.tab-btn.active {
  border: 1px solid #c9dcea !important;
  background: #ffffff !important;
  color: var(--mm-blue-700) !important;
  box-shadow: var(--mm-shadow-xs) !important;
}

.material-hint,
.obj-part-empty {
  border: 1px solid #ecd39f !important;
  border-radius: var(--mm-radius-md) !important;
  background: #fff9ec !important;
  color: #71542a !important;
}

.material-hint i,
.obj-part-empty i {
  color: var(--mm-orange-700) !important;
}

/* Common buttons ----------------------------------------------------------- */

.btn,
.btn-secondary,
.modal-card button,
.account-dropdown button {
  border-radius: var(--mm-radius-md);
}

.btn-primary,
.register-btn,
.pro-foot-btn.ok,
.pro-foot-btn.apply,
.v4-mconfirm,
.mm-zibal-pay-btn,
.mm-order-support-btn {
  border-color: var(--mm-blue-700) !important;
  background: linear-gradient(135deg, var(--mm-blue-700), var(--mm-blue-800)) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(48, 135, 214, .20) !important;
}

.btn-primary:hover,
.register-btn:hover,
.pro-foot-btn.ok:hover,
.pro-foot-btn.apply:hover,
.v4-mconfirm:hover,
.mm-zibal-pay-btn:hover,
.mm-order-support-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn-danger,
.delete-danger,
.pro-delete-confirm-btn {
  border-color: #e7b8bc !important;
  background: var(--mm-danger-100) !important;
  color: var(--mm-danger-700) !important;
  box-shadow: none !important;
}

/* Viewport toolbar --------------------------------------------------------- */

.vp-toolbar,
body.night-mode .vp-toolbar {
  border: 1px solid var(--mm-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 25px rgba(17, 21, 29, .10) !important;
  filter: none !important;
}

.vp-menu-trigger {
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: var(--mm-text-2) !important;
}

.vp-menu-trigger:hover,
.vp-menu.open > .vp-menu-trigger {
  border-color: #c9dcea !important;
  background: var(--mm-blue-100) !important;
  color: var(--mm-blue-700) !important;
}

.vp-menu-panel,
.vp-submenu,
body.night-mode .vp-menu-panel,
body.night-mode .vp-submenu {
  border: 1px solid var(--mm-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: var(--mm-shadow-md) !important;
  color: var(--mm-text) !important;
  filter: none !important;
}

.vp-menu-item,
.vp-submenu button,
body.night-mode .vp-menu-item,
body.night-mode .vp-submenu button {
  color: var(--mm-text-2) !important;
}

.vp-menu-item:hover,
.vp-submenu button:hover,
body.night-mode .vp-menu-item:hover,
body.night-mode .vp-submenu button:hover {
  background: var(--mm-blue-050) !important;
  color: var(--mm-blue-700) !important;
}

/* Important CTA: photo studio */
.vp-studio-menu .vp-studio-btn,
body.night-mode .vp-studio-menu .vp-studio-btn {
  border: 1px solid #e6a13a !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--mm-orange-400), var(--mm-orange-600)) !important;
  color: #3d2a0d !important;
  box-shadow: 0 5px 13px rgba(238, 156, 39, .19) !important;
  font-weight: 850 !important;
}

.vp-studio-menu .vp-studio-btn > i,
.vp-studio-menu .vp-studio-btn .vp-menu-chevron,
body.night-mode .vp-studio-menu .vp-studio-btn > i,
body.night-mode .vp-studio-menu .vp-studio-btn .vp-menu-chevron {
  color: #4b320e !important;
}

.vp-studio-menu .vp-studio-btn:hover,
body.night-mode .vp-studio-menu .vp-studio-btn:hover {
  border-color: #f1b454 !important;
  background: linear-gradient(135deg, #ffc86a, #f0a22e) !important;
  color: #332208 !important;
  transform: translateY(-1px) !important;
}

.vp-studio-panel .vp-menu-note {
  border-color: #ecd39f !important;
  background: #fff9ec !important;
  color: #71542a !important;
}

.vp-hint {
  border: 1px solid rgba(107, 146, 167, .24) !important;
  border-radius: var(--mm-radius-pill) !important;
  background: rgba(255, 255, 255, .86) !important;
  color: #637483 !important;
  box-shadow: var(--mm-shadow-xs) !important;
}

/* Modals ------------------------------------------------------------------- */

.modal-overlay,
.reset-app-overlay {
  background: rgba(17, 21, 29, .58) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

.modal-card,
.library-modal,
.reset-app-card,
.mm-color-card,
.account-dropdown {
  border: 1px solid rgba(202, 212, 222, .78) !important;
  border-radius: var(--mm-radius-xl) !important;
  background: #ffffff !important;
  color: var(--mm-text) !important;
  box-shadow: 0 26px 75px rgba(17, 21, 29, .25) !important;
  filter: none !important;
}

.modal-card h3,
.modal-card h4,
.modal-header h3,
.mm-help-header h3 {
  color: var(--mm-text) !important;
}

.modal-card p,
.modal-card li,
.modal-card .desc {
  color: var(--mm-text-2) !important;
}

.modal-header,
.mm-help-header {
  border-bottom-color: var(--mm-border) !important;
}

.modal-close-btn,
.mm-dialog-x,
.vp-bg-close,
.reset-app-close {
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius-sm) !important;
  background: var(--mm-surface-2) !important;
  color: var(--mm-text-3) !important;
}

.modal-close-btn:hover,
.mm-dialog-x:hover,
.vp-bg-close:hover,
.reset-app-close:hover {
  border-color: #e6bec1 !important;
  background: var(--mm-danger-100) !important;
  color: var(--mm-danger-700) !important;
}

.library-search-row .search-input,
.library-modal .breadcrumb-lib {
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius-md) !important;
  background: var(--mm-surface-2) !important;
}

.library-modal .modal-header .cube-btn,
.library-modal .breadcrumb-lib .back-btn-inline {
  border: 1px solid #caddea !important;
  border-radius: 9px !important;
  background: var(--mm-blue-100) !important;
  color: var(--mm-blue-700) !important;
  box-shadow: none !important;
}

.library-modal .model-card {
  border: 1px solid var(--mm-border) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: var(--mm-shadow-xs) !important;
}

.library-modal .model-card:hover {
  border-color: #bcd3e5 !important;
  background: var(--mm-blue-050) !important;
  box-shadow: var(--mm-shadow-sm) !important;
  transform: translateY(-2px) !important;
}

.library-modal .model-card .model-name {
  color: var(--mm-text) !important;
}

.library-modal .loading-state .spinner {
  border-color: #e4e9ee !important;
  border-top-color: var(--mm-blue-600) !important;
}

.mm-library-order-btn,
.plan-btn {
  border: 1px solid #edc77e !important;
  border-radius: 9px !important;
  background: var(--mm-orange-100) !important;
  color: #714b13 !important;
  box-shadow: none !important;
}

.mm-library-order-btn:hover,
.plan-btn:hover {
  border-color: var(--mm-orange-500) !important;
  background: #ffe8bd !important;
  color: #56370b !important;
}

.plan-item {
  border-color: var(--mm-border) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
}

.plan-item:hover,
.plan-item.highlight {
  border-color: #efc472 !important;
  background: #fffaf0 !important;
}

.mm-subscribe-rules,
.mm-payment-summary,
.mm-order-free {
  border-color: #ebd4a7 !important;
  background: #fff9ed !important;
  color: #73562d !important;
}

/* Account dropdown --------------------------------------------------------- */

.account-dropdown {
  border-color: #404652 !important;
  background: #222630 !important;
  color: #f1f4f7 !important;
}

.account-dropdown strong,
.account-dropdown .account-guest-title,
.account-dropdown .account-section-title,
.account-dropdown .account-profile-name {
  color: #f1f4f7 !important;
}

.account-dropdown small,
.account-dropdown .account-email-row,
.account-dropdown .account-stat-row span {
  color: #aeb8c5 !important;
}

.account-dropdown .account-menu-item,
.account-dropdown .account-google-login,
.account-dropdown .account-icon-btn {
  border-color: rgba(255, 255, 255, .10) !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #e7ecf2 !important;
}

.account-dropdown .account-google-login:hover,
.account-dropdown .account-icon-btn:hover {
  background: rgba(255, 255, 255, .10) !important;
}

.account-dropdown .account-logout-btn {
  border-color: rgba(214, 75, 82, .32) !important;
  background: rgba(214, 75, 82, .11) !important;
  color: #f29a9f !important;
}

/* Image editor ------------------------------------------------------------- */

#proTextureEditorOverlay .pro-editor-window,
.v4-material-window {
  border: 1px solid #3a404d !important;
  border-radius: 18px !important;
  background: #181b23 !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55) !important;
  filter: none !important;
}

#proTextureEditorOverlay .pro-editor-header,
.v4-material-header,
.v4-material-footer {
  border-color: rgba(255, 255, 255, .08) !important;
  background: #20242d !important;
}

#proTextureEditorOverlay .pro-editor-header h3,
.v4-material-header h3 {
  color: #f4f6f8 !important;
}

#proTextureEditorOverlay .pro-tool,
#proTextureEditorOverlay .pro-toggle-button,
#proTextureEditorOverlay .pro-mini-icon,
#proTextureEditorOverlay .pro-zoom-reset,
.v4-map-launch-primary,
.v4-map-launch-secondary button {
  border-color: rgba(255, 255, 255, .10) !important;
  border-radius: 9px !important;
  background: #262b35 !important;
  color: #cbd3dd !important;
}

#proTextureEditorOverlay .pro-tool:hover,
#proTextureEditorOverlay .pro-toggle-button:hover,
#proTextureEditorOverlay .pro-mini-icon:hover,
#proTextureEditorOverlay .pro-zoom-reset:hover,
.v4-map-launch-primary:hover,
.v4-map-launch-secondary button:hover {
  border-color: rgba(69, 155, 224, .52) !important;
  background: rgba(48, 135, 214, .16) !important;
  color: #dcefff !important;
}

#proTextureEditorOverlay .pro-tool.primary-soft,
#proTextureEditorOverlay .pro-toggle-button:has(input:checked),
#proTextureEditorOverlay .pro-tool.crop-main {
  border-color: rgba(69, 155, 224, .54) !important;
  background: rgba(48, 135, 214, .18) !important;
  color: #bfe2ff !important;
}

#proTextureEditorOverlay .pro-foot-btn.cancel,
#proTextureEditorOverlay .pro-foot-btn.crop-cancel,
.v4-mcancel {
  border-color: rgba(255, 255, 255, .10) !important;
  background: #2a2f39 !important;
  color: #c0c8d2 !important;
}

#proTextureEditorOverlay input[type="text"],
#proTextureEditorOverlay input[type="number"],
#proTextureEditorOverlay select,
.v4-material-window input[type="text"],
.v4-material-window input[type="number"],
.v4-material-window select {
  border-color: rgba(255, 255, 255, .10) !important;
  background: #12151c !important;
  color: #edf1f5 !important;
}

/* Footer ------------------------------------------------------------------- */

#app-footer,
#app-footer.mm-useful-footer,
body.night-mode #app-footer,
body.night-mode #app-footer.mm-useful-footer {
  background: linear-gradient(135deg, #232630 0%, var(--mm-ink-900) 52%, #151821 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: 0 -5px 18px rgba(10, 13, 20, .15) !important;
  color: #dfe5ec !important;
  filter: none !important;
}

#app-footer .mm-footer-seal-zone,
#app-footer .mm-footer-support-zone {
  border-color: rgba(255, 255, 255, .10) !important;
}

#app-footer .mm-footer-rights span,
#app-footer .mm-footer-rights span[lang="en"] {
  color: #c7d0da !important;
}

#app-footer .mm-footer-social,
#app-footer .mm-footer-support {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #e5ebf2 !important;
  box-shadow: none !important;
}

#app-footer a.mm-footer-social:hover,
#app-footer .mm-footer-support:hover {
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
}

#app-footer .mm-footer-support,
body.night-mode #app-footer .mm-footer-support {
  border-color: #d5dce3 !important;
  background: #e9edf1 !important;
  color: #26313d !important;
}

#app-footer .mm-footer-support i,
body.night-mode #app-footer .mm-footer-support i {
  color: var(--mm-steel-700) !important;
}

#app-footer .mm-footer-support:hover,
body.night-mode #app-footer .mm-footer-support:hover {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #18212b !important;
}

#app-footer .mm-footer-pending {
  color: #7f8a96 !important;
  opacity: .72 !important;
}

#app-footer.mm-useful-footer .mm-enamad-seal a {
  border-color: rgba(255, 255, 255, .13) !important;
  background: #f7f8fa !important;
  box-shadow: none !important;
}

/* Night theme -------------------------------------------------------------- */

body.night-mode {
  --mm-text: #edf1f5;
  --mm-text-2: #c0c9d3;
  --mm-text-3: #8f9aa7;
  --mm-surface: #292d37;
  --mm-surface-2: #232731;
  --mm-surface-3: #303641;
  --mm-border: #3d4450;
  --mm-border-strong: #4b5360;
  --mm-focus: 0 0 0 3px rgba(69, 155, 224, .24);
  background: #171a21 !important;
}

body.night-mode #subHeaderBar {
  border-bottom-color: #3a404b !important;
  background: #252a33 !important;
  color: var(--mm-text) !important;
}

body.night-mode #subHeaderBar .shb-group,
body.night-mode #subHeaderBar .shb-preset-group {
  border-color: #3c434e !important;
  background: #2b303a !important;
}

body.night-mode #subHeaderBar .shb-label,
body.night-mode #subHeaderBar .shb-preset-group .shb-label {
  color: #c1c9d2 !important;
}

body.night-mode #subHeaderBar input[type="text"],
body.night-mode #subHeaderBar input[type="number"],
body.night-mode #subHeaderBar select,
body.night-mode #subHeaderBar .shb-icon-btn,
body.night-mode #subHeaderBar .shb-preset-btn,
body.night-mode #subHeaderBar .shb-lock-btn,
body.night-mode #subHeaderBar .shb-format-group .format-btn {
  border-color: #434a56 !important;
  background: #222730 !important;
  color: #c7d0d9 !important;
}

body.night-mode #subHeaderBar .shb-format-group .format-btn.active {
  border-color: rgba(69, 155, 224, .45) !important;
  background: rgba(48, 135, 214, .18) !important;
  color: #bfe2ff !important;
}

body.night-mode #subHeaderBar .shb-model-group {
  border-color: rgba(243, 173, 62, .30) !important;
  background: rgba(243, 173, 62, .07) !important;
}

body.night-mode #subHeaderBar .shb-model-group .current-model-name {
  border-color: rgba(243, 173, 62, .24) !important;
  background: rgba(243, 173, 62, .10) !important;
  color: #f1c376 !important;
}

body.night-mode #leftPanel,
body.night-mode #rightPanel {
  border-color: #3b424d !important;
  background: #232731 !important;
  color: var(--mm-text) !important;
  filter: none !important;
}

body.night-mode #leftPanel .panel-title,
body.night-mode #rightPanel .panel-title,
body.night-mode .panel-title {
  border-bottom-color: #3d4450 !important;
  background: rgba(38, 43, 53, .98) !important;
  color: #edf1f5 !important;
}

body.night-mode #leftPanel .light-section,
body.night-mode #rightPanel .mm-flat-section.collapsible,
body.night-mode .collapsible {
  border-color: #3d4450 !important;
  background: #292d37 !important;
}

body.night-mode #leftPanel .light-section-title,
body.night-mode #rightPanel .mm-flat-section-title,
body.night-mode .collapsible-header {
  border-bottom-color: #3a414c !important;
  color: #e3e8ee !important;
}

body.night-mode .control-group label,
body.night-mode #tab-cube .mm-cube-row-label {
  color: #c0c9d3 !important;
}

body.night-mode .slider-input-row input[type="range"]::-webkit-slider-runnable-track,
body.night-mode .shb-fov-slider::-webkit-slider-runnable-track,
body.night-mode .v4-tune input[type="range"]::-webkit-slider-runnable-track,
body.night-mode .pro-offset-axis input[type="range"]::-webkit-slider-runnable-track {
  background: #555f6b !important;
}

body.night-mode #subHeaderBar #fovSlider,
body.night-mode #cylinderDimensionPanel #cylinderDiameter,
body.night-mode #cylinderDimensionPanel #cylinderHeight {
  background: linear-gradient(90deg,
    var(--mm-blue-500) 0%,
    var(--mm-blue-500) var(--range-pct),
    #555f6b var(--range-pct),
    #555f6b 100%) center / 100% 4px no-repeat !important;
}

body.night-mode #subHeaderBar #fovSlider::-webkit-slider-thumb,
body.night-mode #cylinderDimensionPanel #cylinderDiameter::-webkit-slider-thumb,
body.night-mode #cylinderDimensionPanel #cylinderHeight::-webkit-slider-thumb,
body.night-mode #subHeaderBar #fovSlider::-moz-range-thumb,
body.night-mode #cylinderDimensionPanel #cylinderDiameter::-moz-range-thumb,
body.night-mode #cylinderDimensionPanel #cylinderHeight::-moz-range-thumb {
  border-color: var(--mm-blue-500) !important;
  background: #f6f8fa !important;
}

body.night-mode .slider-input-row input[type="number"],
body.night-mode .slider-input-row input[type="text"],
body.night-mode .mm-unit-field input,
body.night-mode #cubeFoldInput,
body.night-mode .material-select,
body.night-mode select,
body.night-mode input[type="text"],
body.night-mode input[type="email"],
body.night-mode input[type="number"],
body.night-mode textarea {
  border-color: #444c58 !important;
  background: #1e222a !important;
  color: #edf1f5 !important;
}

body.night-mode .tab-container {
  border-color: #3d4450 !important;
  background: #20242c !important;
}

body.night-mode .tab-btn.active {
  border-color: rgba(69, 155, 224, .35) !important;
  background: rgba(48, 135, 214, .17) !important;
  color: #bfe2ff !important;
}

body.night-mode .material-hint,
body.night-mode .obj-part-empty {
  border-color: rgba(243, 173, 62, .28) !important;
  background: rgba(243, 173, 62, .08) !important;
  color: #e5c180 !important;
}

body.night-mode .vp-toolbar {
  border-color: #424a56 !important;
  background: rgba(37, 42, 51, .97) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24) !important;
}

body.night-mode .vp-menu-trigger {
  color: #c2cbd5 !important;
}

body.night-mode .vp-menu-trigger:hover,
body.night-mode .vp-menu.open > .vp-menu-trigger {
  border-color: rgba(69, 155, 224, .35) !important;
  background: rgba(48, 135, 214, .15) !important;
  color: #c6e6ff !important;
}

body.night-mode .vp-menu-panel,
body.night-mode .vp-submenu {
  border-color: #424a56 !important;
  background: #292d37 !important;
  color: #edf1f5 !important;
}

body.night-mode .vp-menu-item,
body.night-mode .vp-submenu button {
  color: #c4cdd7 !important;
}

body.night-mode .vp-menu-item:hover,
body.night-mode .vp-submenu button:hover {
  background: rgba(48, 135, 214, .13) !important;
  color: #cae8ff !important;
}

body.night-mode .vp-studio-menu .vp-studio-btn {
  border-color: #e6a13a !important;
  background: linear-gradient(135deg, var(--mm-orange-400), var(--mm-orange-600)) !important;
  color: #3d2a0d !important;
}

body.night-mode .vp-studio-menu .vp-studio-btn:hover {
  border-color: #f1b454 !important;
  background: linear-gradient(135deg, #ffc86a, #f0a22e) !important;
  color: #332208 !important;
}

body.night-mode .vp-hint {
  border-color: rgba(255, 255, 255, .09) !important;
  background: rgba(31, 35, 43, .88) !important;
  color: #9ba7b4 !important;
}

body.night-mode .modal-card,
body.night-mode .library-modal,
body.night-mode .reset-app-card,
body.night-mode .mm-color-card {
  border-color: #424a56 !important;
  background: #292d37 !important;
  color: #edf1f5 !important;
  filter: none !important;
}

body.night-mode .modal-card h3,
body.night-mode .modal-card h4,
body.night-mode .modal-header h3,
body.night-mode .mm-help-header h3 {
  color: #f4f6f8 !important;
}

body.night-mode .modal-card p,
body.night-mode .modal-card li,
body.night-mode .modal-card .desc {
  color: #bec7d1 !important;
}

body.night-mode .library-search-row .search-input,
body.night-mode .library-modal .breadcrumb-lib,
body.night-mode .library-modal .model-card,
body.night-mode .plan-item {
  border-color: #424a56 !important;
  background: #22262f !important;
}

body.night-mode .library-modal .model-card .model-name {
  color: #e9edf2 !important;
}

body.night-mode .library-modal .model-card:hover {
  border-color: rgba(69, 155, 224, .42) !important;
  background: rgba(48, 135, 214, .10) !important;
}

/* Responsive refinements --------------------------------------------------- */

@media (max-width: 1100px) {
  #global-header .subscribe-btn,
  #global-header .header-btn,
  #global-header .mm-header-actions .mm-header-muted {
    padding-inline: 10px !important;
  }

  #subHeaderBar .shb-model-group .library-btn {
    padding-inline: 11px !important;
  }
}

@media (max-width: 820px) {
  #global-header,
  body.night-mode #global-header {
    box-shadow: 0 4px 13px rgba(10, 13, 20, .16) !important;
  }

  #global-header .subscribe-btn,
  #global-header .header-btn,
  #global-header .mm-header-actions .mm-header-muted {
    min-height: 32px !important;
    border-radius: 8px !important;
  }

  #leftPanel,
  #rightPanel {
    box-shadow: none !important;
  }

  .vp-toolbar {
    border-radius: 11px !important;
  }

  #app-footer.mm-useful-footer {
    box-shadow: 0 -4px 13px rgba(10, 13, 20, .14) !important;
  }
}

@media (max-width: 540px) {
  #global-header .subscribe-btn {
    padding-inline: 8px !important;
  }

  #subHeaderBar .shb-group,
  #subHeaderBar .shb-preset-group {
    border-radius: 9px !important;
  }

  .modal-card,
  .reset-app-card {
    border-radius: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}