/* JayLex Studio: the same visual language inside the working app's deeper states.
   Visibility, validation, expansion, charts and billing remain native app state. */

html body :is(#modal,#cancel-modal) { padding: 24px !important; }
html body :is(#modal,#cancel-modal) .modal-content {
  background: linear-gradient(145deg,var(--studio-surface),var(--studio-sidebar)) !important;
  border: 1px solid var(--studio-line-strong) !important;
  border-radius: 28px !important; padding: 30px !important;
  max-height: calc(100dvh - 48px) !important;
  box-shadow: 0 32px 100px rgba(3,7,22,.36),0 0 0 1px rgba(156,122,243,.035) !important;
  scrollbar-width: thin; scrollbar-color: var(--studio-line-strong) transparent;
  overscroll-behavior: contain;
}
html body #modal .modal-content { width: min(100%,680px) !important; max-width: 680px !important; }
html body #cancel-modal .modal-content { width: min(100%,540px) !important; max-width: 540px !important; }
html body #modal .modal-header {
  gap: 16px; align-items: flex-start; margin-bottom: 22px !important;
  padding-bottom: 21px !important; border-bottom: 1px solid var(--studio-line) !important;
}
html body #modal .modal-header h2 {
  font-size: clamp(23px,2vw,27px) !important; font-weight: 650 !important;
  letter-spacing: -.04em !important; line-height: 1.25; min-width: 0;
}
html body #modal .modal-header h2 > i { color: var(--studio-accent) !important; font-size: 22px; }
html body #modal .close-modal { width: 40px !important; height: 40px !important; flex: 0 0 40px; margin-top: -4px; }
html body #modal .quick-services {
  gap: 8px !important; margin-bottom: 24px !important; min-width: 0;
  padding: 10px !important; background: var(--studio-input); border: 1px solid var(--studio-line); border-radius: 15px;
}
html body #modal .quick-label { font-size: 11px !important; color: var(--studio-secondary) !important; flex: none; }
html body #modal .service-chips { gap: 7px !important; min-width: 0; }
html body #modal :is(.service-chip,.service-scroll-btn) {
  min-height: 36px !important; color: var(--studio-secondary) !important;
  background: var(--studio-surface) !important; border: 1px solid var(--studio-line) !important;
  border-radius: 9px !important; box-shadow: none !important; font-size: 12px !important;
}
html body #modal .service-scroll-btn { width: 30px !important; min-width: 30px !important; flex: 0 0 30px; }
html body #modal .form-group { margin-bottom: 20px !important; min-width: 0 !important; }
html body #modal .form-row { gap: 16px !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
html body #modal .form-row > .form-group:nth-child(3) { grid-column: 1 / -1; }
html body #modal .form-group label {
  color: var(--studio-secondary) !important; font-size: 12px !important; font-weight: 550 !important;
  margin-bottom: 8px !important; line-height: 1.5;
}
html body #modal .form-group label > i { color: var(--studio-muted); }
html body #modal :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select) {
  min-width: 0 !important; min-height: 49px !important; width: 100%;
  padding: 12px 15px !important; border-radius: 12px !important;
  font-size: 14px !important; line-height: 1.5 !important;
  transition: border-color .18s,background .18s !important;
}
html body #modal textarea { min-height: 100px !important; resize: vertical; }
html body #modal :is(input,textarea,select):focus {
  border-color: var(--studio-accent) !important; outline: none !important;
  box-shadow: 0 0 0 3px var(--studio-accent-soft) !important;
}
html body #modal .input-with-select { min-width: 0; border-radius: 12px !important; border-color: var(--studio-line) !important; }
html body #modal .input-with-select input { border-radius: 12px 0 0 12px !important; }
html body #modal .input-with-select select { width: 66px !important; flex: 0 0 66px; border-radius: 0 12px 12px 0 !important; padding-inline: 12px !important; }
html body #modal :is(.tag-chip,.tag-selector-item,.tag-selector-btn) {
  background: var(--studio-input) !important; color: var(--studio-secondary) !important;
  border: 1px solid var(--studio-line) !important; border-radius: 10px !important;
  font-size: 12px !important; min-height: 35px;
}
html body #modal :is(.tag-chip,.tag-selector-item,.tag-selector-btn).selected {
  color: var(--studio-accent) !important; background: var(--studio-accent-soft) !important;
  border-color: var(--studio-line-strong) !important;
}
html body #modal :is(.notification-settings-panel,.color-picker-panel) {
  border: 1px solid var(--studio-line) !important; border-radius: 14px !important;
  background: var(--studio-input) !important; box-shadow: none !important; overflow: hidden;
}
html body #modal :is(.notification-settings-header,.color-picker-header) {
  min-height: 49px !important; padding: 13px 15px !important;
  background: transparent !important; color: var(--studio-secondary) !important;
  font-size: 12px !important; font-weight: 550 !important; border-bottom-color: var(--studio-line) !important;
}
html body #modal :is(.notification-settings-header,.color-picker-header) > i:first-child,
html body #modal .color-picker-header > div > i { color: var(--studio-accent) !important; }
html body #modal :is(.notification-settings-body,.color-picker-body) { background: transparent !important; border-color: var(--studio-line) !important; }
html body #modal :is(.icon-color-btn,.icon-preview-container,.custom-swatch) { background: var(--studio-surface) !important; border-color: var(--studio-line) !important; color: var(--studio-secondary) !important; }
html body #modal :is(.color-grid-label,.icon-preview-label,.note-char-count) { color: var(--studio-muted) !important; font-size: 11px !important; }
html body #modal .icon-color-btn.active { border-color: var(--studio-accent) !important; color: var(--studio-accent) !important; background: var(--studio-accent-soft) !important; }
html body #modal .form-group-spaced { margin-top: 18px !important; }
html body #modal .btn-submit {
  min-height: 51px !important; font-size: 14px !important; border-radius: 13px !important;
  font-weight: 650 !important; margin-top: 2px !important;
}

/* Cancellation instructions read as a short, ordered plan. */
html body #cancel-modal .budget-header-wrapper {
  display: grid; grid-template-columns: 58px minmax(0,1fr); column-gap: 17px;
  text-align: start !important; margin: 0 0 25px !important; align-items: center;
}
html body #cancel-modal .cancel-icon-circle {
  grid-column: 1; grid-row: 1 / 3; width: 58px !important; height: 58px !important;
  margin: 0 !important; border-radius: 17px !important; box-shadow: none !important;
  background: var(--studio-accent-soft) !important; color: var(--studio-accent) !important;
  border: 1px solid var(--studio-line-strong) !important;
}
html body #cancel-modal .budget-title {
  grid-column: 2; text-align: start !important; margin: 0 !important;
  font-size: 26px !important; font-weight: 650 !important; letter-spacing: -.04em;
}
html body #cancel-modal .cancel-service-name {
  grid-column: 2; text-align: start !important; color: var(--studio-accent) !important;
  font-weight: 550 !important; font-size: 13px !important; margin: 5px 0 0 !important;
}
html body #cancel-modal .cancel-steps {
  border: 1px solid var(--studio-line) !important; background: var(--studio-input) !important;
  border-radius: 17px !important; padding: 7px 18px !important; margin: 0 0 23px !important;
}
html body #cancel-modal .cancel-step { gap: 13px !important; padding: 14px 0 !important; align-items: flex-start !important; border-color: var(--studio-line) !important; }
html body #cancel-modal .cancel-step-num {
  background: var(--studio-accent-soft) !important; color: var(--studio-accent) !important;
  border: 1px solid var(--studio-line-strong) !important; width: 27px !important; height: 27px !important;
  flex: 0 0 27px; border-radius: 9px !important; box-shadow: none !important; font-size: 12px !important;
}
html body #cancel-modal .cancel-step-text { color: var(--studio-secondary) !important; font-size: 13px !important; line-height: 1.65 !important; padding-top: 2px; min-width: 0; overflow-wrap: anywhere; }
html body #cancel-modal .cancel-actions-container { gap: 11px !important; }
html body #cancel-modal .cancel-action-btn {
  min-height: 46px !important; border-radius: 12px !important; font-size: 12px !important;
  line-height: 1.5 !important; padding: 12px 15px !important; font-weight: 550 !important;
  text-shadow: none !important; box-shadow: none !important; gap: 9px !important;
  transition: border-color .18s,background .18s,transform .18s !important;
}
html body #cancel-modal .cancel-action-primary { background: var(--studio-primary) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--studio-glow) !important; }
html body #cancel-modal :is(.cancel-action-appstore,.cancel-action-googleplay) { background: var(--studio-input) !important; border-color: var(--studio-line) !important; color: var(--studio-secondary) !important; }
html body #cancel-modal .cancel-action-smart { background: var(--studio-accent-soft) !important; border-color: var(--studio-line-strong) !important; color: var(--studio-accent) !important; }
html body #cancel-modal .cancel-action-dismiss { margin-top: 14px !important; background: transparent !important; color: var(--studio-muted) !important; border-color: transparent !important; }

/* Smart Cancel uses a readable form next to provider information on large screens. */
html body .main-content #view-smart_cancel .sc-wizard-controls { gap: 16px !important; margin-bottom: 22px !important; padding-bottom: 20px !important; }
html body .main-content #view-smart_cancel .sc-back-btn { min-height: 40px; color: var(--studio-secondary) !important; font-size: 12px !important; }
html body .main-content #view-smart_cancel .sc-steps-indicator { padding: 5px !important; gap: 5px !important; border: 1px solid var(--studio-line) !important; }
html body .main-content #view-smart_cancel .sc-step {
  border-radius: 9px !important; padding: 10px 14px !important; min-height: 40px;
  color: var(--studio-muted) !important; background: transparent !important;
  font-size: 11px !important; line-height: 1.4; gap: 7px !important; box-shadow: none !important;
  transition: color .18s,background .18s !important;
}
html body .main-content #view-smart_cancel .sc-step.active { color: var(--studio-accent) !important; background: var(--studio-accent-soft) !important; }
html body .main-content #view-smart_cancel .sc-step:hover { transform: none !important; color: var(--studio-ink) !important; }
html body .main-content #view-smart_cancel .sc-step-divider { font-size: 13px !important; }
html body .main-content #view-smart_cancel :is(.sc-provider-card,.sc-signature-card,.sc-preview-card) { padding: 30px !important; border-radius: 23px !important; }
html body .main-content #view-smart_cancel :is(.sc-provider-name,.sc-signature-card h4,.sc-preview-card h4) {
  font-size: clamp(22px,2.1vw,28px) !important; letter-spacing: -.035em !important; line-height: 1.3;
  font-weight: 650 !important; color: var(--studio-ink) !important; text-shadow: none !important;
}
html body .main-content #view-smart_cancel .sc-provider-name { margin-bottom: 12px !important; overflow-wrap: anywhere; }
html body .main-content #view-smart_cancel .sc-provider-meta { margin-bottom: 22px !important; }
html body .main-content #view-smart_cancel .sc-provider-category {
  background: var(--studio-accent-soft) !important; color: var(--studio-accent) !important;
  border-radius: 8px !important; font-size: 10px !important; letter-spacing: .04em !important; padding: 5px 9px !important;
}
html body .main-content #view-smart_cancel .sc-inline-input[readonly] {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  min-width: 0 !important; min-height: 32px !important; padding: 5px 0 !important;
  color: var(--studio-secondary) !important; font-size: 12px !important; box-shadow: none !important;
}
html body .main-content #view-smart_cancel .sc-contact-item {
  min-width: 0; background: var(--studio-input) !important; border-color: var(--studio-line) !important;
  padding: 10px 12px !important; min-height: 51px; border-radius: 12px !important;
}
html body .main-content #view-smart_cancel .sc-contact-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
html body .main-content #view-smart_cancel .sc-section-label { opacity: 1 !important; font-size: 10px !important; color: var(--studio-muted) !important; }
html body .main-content #view-smart_cancel .sc-form-section { background: transparent !important; border: 0 !important; padding: 0 !important; }
html body .main-content #view-smart_cancel .sc-form-section h4 { color: var(--studio-ink) !important; font-size: 17px !important; font-weight: 600; letter-spacing: -.025em; margin-bottom: 16px !important; }
html body .main-content #view-smart_cancel .sc-dynamic-form { gap: 18px !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
html body .main-content #view-smart_cancel :is(.sc-form-group,.sc-form-group-row) { min-width: 0; }
html body .main-content #view-smart_cancel .sc-form-group-row { gap: 12px !important; }
html body .main-content #view-smart_cancel .sc-form-group.group-main { min-width: 0; }
html body .main-content #view-smart_cancel .sc-form-group.group-side { flex-basis: 95px !important; }
html body .main-content #view-smart_cancel .sc-form-group label { color: var(--studio-secondary) !important; font-size: 12px !important; line-height: 1.55; margin-bottom: 5px !important; }
html body .main-content #view-smart_cancel .sc-form-group :is(input:not([type=checkbox]),select) {
  min-height: 49px !important; padding: 12px 14px !important; width: 100%; min-width: 0;
  border-radius: 12px !important; line-height: 1.5 !important;
}
html body .main-content #view-smart_cancel .sc-form-group select { padding-inline-end: 36px !important; background-color: var(--studio-input) !important; }
html body .main-content #view-smart_cancel .sc-form-group :is(input,select):focus { border-color: var(--studio-accent) !important; box-shadow: 0 0 0 3px var(--studio-accent-soft) !important; }
html body .main-content #view-smart_cancel select option { background: var(--studio-input) !important; color: var(--studio-ink) !important; }
html body.light-theme .main-content #view-smart_cancel select { color-scheme: light; }
html body .main-content #view-smart_cancel .sc-info-alert {
  background: var(--studio-accent-soft) !important; color: var(--studio-secondary) !important;
  border: 1px solid var(--studio-line-strong) !important; border-radius: 12px !important;
  padding: 13px 15px !important; font-size: 12px !important; line-height: 1.6 !important; margin-bottom: 3px !important;
}
html body .main-content #view-smart_cancel .sc-info-alert i { color: var(--studio-accent) !important; }
html body .main-content #view-smart_cancel .checkbox-group {
  min-height: 49px; padding: 12px 14px !important; border: 1px solid var(--studio-line);
  border-radius: 12px; background: var(--studio-input); align-items: flex-start !important;
}
html body .main-content #view-smart_cancel .checkbox-group input { width: 18px !important; height: 18px !important; flex: 0 0 18px; min-height: 18px !important; margin-top: 2px !important; }
html body .main-content #view-smart_cancel .checkbox-group label { margin: 0 !important; flex: 1; }
html body .main-content #view-smart_cancel .sc-action-row { border-color: var(--studio-line) !important; margin-top: 24px !important; padding-top: 20px !important; gap: 12px !important; }
html body .main-content #view-smart_cancel .sc-action-row :is(.btn-primary,.btn-ghost,.btn-secondary) {
  min-height: 47px !important; padding: 12px 19px !important; border-radius: 12px !important;
  font-size: 12px !important; line-height: 1.5 !important; text-shadow: none !important;
  transition: background .18s,border-color .18s,transform .18s !important;
}
html body .main-content #view-smart_cancel .btn-ghost { background: var(--studio-input) !important; color: var(--studio-secondary) !important; border: 1px solid var(--studio-line) !important; }
html body .main-content #view-smart_cancel .sc-sign-note { background: var(--studio-input) !important; border-color: var(--studio-line) !important; border-radius: 13px !important; padding: 15px !important; }
html body .main-content #view-smart_cancel .sc-signature-wrapper { border: 1px solid #dce0ec !important; border-radius: 17px !important; overflow: hidden; }
html body .main-content #view-smart_cancel .sc-clear-btn { min-height: 37px; background: #f1eff8 !important; color: #5d5673 !important; border: 1px solid #ddd9ec !important; border-radius: 9px !important; }
html body .main-content #view-smart_cancel .sc-preview-row { display: grid !important; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 24px !important; margin-inline: 0 !important; }
html body .main-content #view-smart_cancel .sc-preview-row > :is(.col-md-7,.col-md-5) { width: 100% !important; padding: 0 !important; min-width: 0; }
html body .main-content #view-smart_cancel .sc-letter-paper { width: 100%; min-width: 0; padding: 28px !important; border-radius: 15px !important; overflow-wrap: anywhere; }
html body .main-content #view-smart_cancel .sc-delivery-card { padding: 19px !important; border-radius: 17px !important; background: var(--studio-input) !important; }
html body .main-content #view-smart_cancel .sc-guarantee-badge-mini {
  background: var(--studio-accent-soft) !important; border: 1px solid var(--studio-line-strong) !important;
  border-radius: 12px !important; box-shadow: none !important; padding: 14px !important;
}
html body .main-content #view-smart_cancel .sc-guarantee-icon-wrapper { width: 35px !important; height: 35px !important; background: var(--studio-accent-soft) !important; color: var(--studio-accent) !important; border-radius: 10px !important; box-shadow: none !important; flex: 0 0 35px; }
html body .main-content #view-smart_cancel .sc-guarantee-text :is(strong,small) { -webkit-text-fill-color: currentColor !important; background: transparent !important; text-shadow: none !important; }
html body .main-content #view-smart_cancel .sc-guarantee-text strong { color: var(--studio-accent) !important; font-size: 12px !important; }
html body .main-content #view-smart_cancel .sc-guarantee-text small { color: var(--studio-secondary) !important; font-size: 10px !important; }
html body .main-content #view-smart_cancel .sc-delivery-option {
  background: var(--studio-surface) !important; border: 1px solid var(--studio-line) !important;
  box-shadow: none !important; border-radius: 12px !important; margin-bottom: 12px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .main-content #view-smart_cancel .sc-delivery-option:has(input:checked) { background: var(--studio-accent-soft) !important; border-color: var(--studio-accent) !important; box-shadow: inset 0 0 0 1px var(--studio-accent) !important; }
html body .main-content #view-smart_cancel .sc-delivery-option:focus-within { outline: 2px solid var(--studio-accent); outline-offset: 3px; }
html body .main-content #view-smart_cancel .sc-delivery-option:hover { transform: none !important; border-color: var(--studio-line-strong) !important; }
html body .main-content #view-smart_cancel .sc-delivery-option label { padding: 14px !important; }
html body .main-content #view-smart_cancel .sc-delivery-label { font-size: 12px !important; color: var(--studio-ink) !important; gap: 8px !important; min-width: 0; }
html body .main-content #view-smart_cancel .sc-delivery-label i { background: transparent !important; -webkit-text-fill-color: currentColor !important; color: var(--studio-accent) !important; filter: none !important; transform: none !important; font-size: 18px !important; padding: 0 !important; }
html body .main-content #view-smart_cancel .sc-delivery-price { font-size: 13px !important; white-space: nowrap; border-radius: 8px !important; background: var(--studio-input) !important; color: var(--studio-ink) !important; border-color: var(--studio-line) !important; padding: 5px 8px !important; }
html body .main-content #view-smart_cancel :is(.sc-risk-badge,.sc-speed-badge) { font-size: 9px !important; letter-spacing: 0 !important; padding: 4px 7px !important; border-radius: 7px !important; }
html body .main-content #view-smart_cancel .sc-speed-badge { color: var(--studio-secondary) !important; background: var(--studio-input) !important; border-color: var(--studio-line) !important; }
html body .main-content #view-smart_cancel .sc-recommended-tag { position: static !important; width: fit-content; margin: 10px 14px 0 !important; border-radius: 6px !important; font-size: 8px !important; padding: 4px 7px !important; letter-spacing: .02em !important; box-shadow: none !important; }
html body .main-content #view-smart_cancel :is(.sc-delivery-info-box,.sc-legal-notice,.sc-legal-check,.sc-legal-acknowledgements) { border-radius: 12px !important; font-size: 11px !important; line-height: 1.65 !important; }
html body .main-content #view-smart_cancel .sc-legal-acknowledgements { padding: 0 !important; background: transparent !important; }

/* Analytics: stable charts, strong total and calm category rows. */
html body .main-content #view-analytics .analytics-header { margin: 0 0 24px !important; }
html body .main-content #view-analytics .analytics-summary-neon { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 15px !important; margin-bottom: 22px !important; }
html body .main-content #view-analytics .neon-stat-card {
  text-align: start !important; padding: 24px !important; min-height: 143px;
  background: var(--studio-surface) !important; border-radius: 20px !important;
}
html body .main-content #view-analytics .neon-stat-card :is(.neon-glow) { opacity: 0 !important; }
html body .main-content #view-analytics .neon-stat-card::before { opacity: 0 !important; }
html body .main-content #view-analytics .stat-icon-wrapper { margin-bottom: 13px !important; }
html body .main-content #view-analytics .neon-stat-card .stat-label { line-height: 1.5 !important; margin-bottom: 7px !important; }
html body .main-content #view-analytics .stat-value-large { font-size: 31px !important; font-variant-numeric: tabular-nums; }
html body .main-content #view-analytics .analytics-tabs { background: var(--studio-input) !important; border: 1px solid var(--studio-line) !important; border-radius: 14px !important; padding: 5px !important; margin-bottom: 22px !important; gap: 5px !important; }
html body .main-content #view-analytics .analytics-tab { border-color: transparent !important; background: transparent !important; border-radius: 10px !important; min-height: 41px !important; }
html body .main-content #view-analytics .analytics-tab.active { border-color: var(--studio-line-strong) !important; background: var(--studio-accent-soft) !important; }
html body .main-content #view-analytics .neon-chart-container { padding: 27px !important; border-radius: 23px !important; }
html body .main-content #view-analytics .neon-chart-container::before { opacity: 0 !important; }
html body .main-content #view-analytics .donut-section { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; gap: 30px !important; }
html body .main-content #view-analytics .donut-wrapper { width: 250px !important; height: 250px !important; flex: 0 0 250px !important; }
html body .main-content #view-analytics .donut-wrapper canvas { filter: none !important; }
html body .main-content #view-analytics .donut-center-value {
  font-size: 28px !important; font-weight: 650 !important; letter-spacing: -.05em !important;
  background: none !important; -webkit-text-fill-color: var(--studio-ink) !important;
  color: var(--studio-ink) !important; margin: 6px 0 !important;
}
html body .main-content #view-analytics :is(.donut-center-label,.donut-center-sublabel) { letter-spacing: .02em !important; text-transform: none !important; font-size: 10px !important; }
html body .main-content #view-analytics .category-legend { min-width: 0; gap: 9px !important; }
html body .main-content #view-analytics .legend-item {
  padding: 13px 15px !important; border: 1px solid var(--studio-line) !important;
  background: var(--studio-input) !important; border-radius: 12px !important; gap: 12px;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .main-content #view-analytics .legend-item:hover { transform: none !important; background: var(--studio-raised) !important; }
html body .main-content #view-analytics .legend-left { min-width: 0; gap: 9px !important; }
html body .main-content #view-analytics .legend-dot { width: 8px !important; height: 8px !important; flex: 0 0 8px; box-shadow: none !important; }
html body .main-content #view-analytics .legend-name { font-size: 12px !important; font-weight: 550 !important; overflow-wrap: anywhere; }
html body .main-content #view-analytics .legend-right { gap: 15px !important; flex: none; }
html body .main-content #view-analytics .legend-percentage { color: var(--studio-ink) !important; font-size: 12px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html body .main-content #view-analytics .legend-amount { color: var(--studio-secondary) !important; font-size: 11px !important; min-width: 49px !important; text-align: end !important; font-variant-numeric: tabular-nums; }
html body .main-content #view-analytics .change-indicators { gap: 12px !important; padding-top: 22px !important; margin-top: 24px !important; border-color: var(--studio-line) !important; }
html body .main-content #view-analytics .change-indicator { min-width: 0; border: 1px solid var(--studio-line) !important; border-radius: 13px !important; background: var(--studio-input) !important; padding: 14px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .main-content #view-analytics .change-icon { width: 35px !important; height: 35px !important; flex: 0 0 35px; }
html body .main-content #view-analytics .change-value { font-size: 15px !important; font-weight: 600 !important; }
html body .main-content #view-analytics .change-label { color: var(--studio-secondary) !important; font-size: 10px !important; line-height: 1.55 !important; }
html body .main-content #view-analytics .categories-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 18px !important; }
html body .main-content #view-analytics .category-chart-card { background: var(--studio-input) !important; padding: 20px !important; min-width: 0; border-radius: 17px !important; }
html body .main-content #view-analytics :is(.chart-wrapper,.trend-chart-wrapper) { min-width: 0; }
html body .main-content #view-analytics .trend-header { gap: 15px !important; flex-wrap: wrap; }
html body .main-content #view-analytics .trend-stats { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 12px !important; }
html body .main-content #view-analytics .trend-stat-item { background: var(--studio-input) !important; border-radius: 13px !important; padding: 17px !important; min-width: 0; }
html body .main-content #view-analytics .trend-stat-value { font-size: 23px !important; font-weight: 650 !important; letter-spacing: -.04em !important; }
html body .main-content #view-analytics #top-expensive-list { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px !important; }
html body .main-content #view-analytics .analytics-card { padding: 17px !important; min-width: 0; margin: 0 !important; border-inline-start: 2px solid var(--bar-color) !important; border-left-width: 1px !important; border-radius: 17px !important; gap: 10px !important; }
html body .main-content #view-analytics .analytics-card > div:first-child { min-width: 20px !important; font-size: 17px !important; }
html body .main-content #view-analytics .analytics-card h4 { font-size: 13px !important; letter-spacing: -.015em; }
html body .main-content #view-analytics .analytics-card > div:nth-child(3) > div { font-size: 10px !important; color: var(--studio-secondary) !important; }
html body .main-content #view-analytics .analytics-card > div:last-child { font-size: 17px !important; letter-spacing: -.04em; flex: none; font-variant-numeric: tabular-nums; }
html body .main-content #view-analytics .analytics-card > div:last-child > div { font-size: 9px !important; letter-spacing: .01em; margin-top: 4px; color: var(--studio-muted) !important; }

@media(min-width:1100px) {
  html body .main-content #view-smart_cancel .sc-provider-card { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 0 35px; align-items: start; }
  html body .main-content #view-smart_cancel #sc-provider-info { grid-column: 1; grid-row: 1 / 3; padding-inline-end: 28px; border-inline-end: 1px solid var(--studio-line); height: 100%; margin-bottom: 0 !important; }
  html body .main-content #view-smart_cancel .sc-provider-card > .sc-form-section { grid-column: 2; }
  html body .main-content #view-smart_cancel .sc-provider-card > .sc-action-row { grid-column: 2; margin-top: 0 !important; justify-content: flex-end; }
  html body .main-content #view-smart_cancel .sc-contact-grid { grid-template-columns: minmax(0,1fr) !important; }
}
@media(max-width:1279px) {
  html body .main-content #view-analytics #top-expensive-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:1100px) {
  html body .main-content #view-smart_cancel .sc-preview-row { grid-template-columns: minmax(0,1fr); }
  html body .main-content #view-analytics .donut-section { flex-direction: column !important; align-items: stretch !important; gap: 25px !important; }
  html body .main-content #view-analytics .donut-wrapper { align-self: center; }
  html body .main-content #view-analytics .category-legend { width: 100%; }
}
@media(max-width:768px) {
  html body .main-content #view-analytics .analytics-summary-neon { grid-template-columns: minmax(0,1fr) !important; }
  html body .main-content #view-analytics .neon-stat-card { min-height: 110px; }
  html body .main-content #view-analytics .neon-stat-card .stat-icon-wrapper { position: absolute; inset-inline-end: 22px; top: 24px; }
  html body .main-content #view-analytics .neon-stat-card :is(.stat-label,.stat-value-large) { padding-inline-end: 50px; }
  html body .main-content #view-analytics .categories-grid { grid-template-columns: minmax(0,1fr) !important; }
  html body .main-content #view-analytics .trend-stats { grid-template-columns: minmax(0,1fr) !important; }
  html body .main-content #view-smart_cancel :is(.sc-provider-card,.sc-signature-card,.sc-preview-card) { padding: 22px !important; }
  html body .main-content #view-smart_cancel .sc-wizard-controls { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  html body .main-content #view-smart_cancel .sc-steps-indicator { justify-content: space-between !important; flex-wrap: nowrap !important; }
  html body .main-content #view-smart_cancel .sc-step { flex: 1; padding: 9px 7px !important; justify-content: center; text-align: center; }
  html body .main-content #view-smart_cancel .sc-step-divider { display: none; }
  html body .main-content #view-smart_cancel .sc-contact-grid { grid-template-columns: minmax(0,1fr) !important; }
}
@media(max-width:600px) {
  html body :is(#modal,#cancel-modal) { padding: 12px !important; align-items: center !important; }
  html body :is(#modal,#cancel-modal) .modal-content { border-radius: 22px !important; border-bottom: 1px solid var(--studio-line-strong) !important; padding: 21px !important; max-height: calc(100dvh - 24px) !important; }
  html body #modal .quick-services { padding: 8px !important; gap: 5px !important; }
  html body #modal .quick-label { display: none; }
  html body #modal .form-row { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }
  html body #modal .form-row > .form-group:nth-child(3) { grid-column: auto; }
  html body #modal .form-group { margin-bottom: 17px !important; }
  html body #cancel-modal .budget-header-wrapper { grid-template-columns: 49px minmax(0,1fr); gap: 0 13px; margin-bottom: 21px !important; }
  html body #cancel-modal .cancel-icon-circle { width: 49px !important; height: 49px !important; border-radius: 14px !important; }
  html body #cancel-modal .budget-title { font-size: 23px !important; }
  html body #cancel-modal .cancel-steps { padding-inline: 13px !important; }
  html body #cancel-modal .cancel-step-text { font-size: 12px !important; }
  html body #cancel-modal #cancel-store-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html body #cancel-modal .cancel-action-btn { font-size: 11px !important; padding-inline: 11px !important; }
  html body .main-content #view-smart_cancel :is(.sc-provider-card,.sc-signature-card,.sc-preview-card) { padding: 19px !important; border-radius: 19px !important; }
  html body .main-content #view-smart_cancel .sc-form-group-row { display: flex !important; }
  html body .main-content #view-smart_cancel .sc-form-group.group-side { flex-basis: 74px !important; }
  html body .main-content #view-smart_cancel .sc-form-group :is(input:not([type=checkbox]),select) { padding-inline: 11px !important; font-size: 12px !important; }
  html body .main-content #view-smart_cancel .sc-step { font-size: 10px !important; flex-direction: column; gap: 5px !important; }
  html body .main-content #view-smart_cancel .sc-info-alert { padding: 12px !important; font-size: 11px !important; }
  html body .main-content #view-smart_cancel .sc-letter-paper { padding: 19px !important; font-size: 11px; }
  html body .main-content #view-smart_cancel .sc-delivery-card { padding: 14px !important; }
  html body .main-content #view-analytics .neon-chart-container { padding: 18px !important; border-radius: 19px !important; }
  html body .main-content #view-analytics .analytics-tab { font-size: 10px !important; padding: 8px 9px !important; }
  html body .main-content #view-analytics .donut-wrapper { width: 222px !important; height: 222px !important; flex-basis: 222px !important; max-width: 100%; }
  html body .main-content #view-analytics .legend-item { padding: 12px !important; gap: 8px; }
  html body .main-content #view-analytics .legend-name { font-size: 11px !important; }
  html body .main-content #view-analytics .legend-right { gap: 8px !important; }
  html body .main-content #view-analytics .legend-percentage { font-size: 11px !important; }
  html body .main-content #view-analytics .legend-amount { font-size: 10px !important; min-width: 44px !important; }
  html body .main-content #view-analytics .change-indicators { flex-direction: column; gap: 10px !important; }
  html body .main-content #view-analytics #top-expensive-list { grid-template-columns: minmax(0,1fr); }
  html body .main-content #view-analytics .analytics-card { padding: 16px !important; }
}
html[dir=rtl] body #modal .input-with-select input { border-radius: 0 12px 12px 0 !important; }
html[dir=rtl] body #modal .input-with-select select { border-radius: 12px 0 0 12px !important; }
html[dir=rtl] body .main-content #view-smart_cancel :is(.sc-back-btn,.sc-step-divider) > i,
html[dir=rtl] body .main-content #view-smart_cancel .sc-action-row :is(.ri-arrow-right-line,.ri-arrow-left-line) { transform: scaleX(-1); }
html[dir=rtl] body .main-content #view-smart_cancel .sc-form-group select { background-position: left 10px center; }
html[dir=rtl] body .main-content #view-smart_cancel .sc-clear-btn { right: auto; left: 12px; }
html[dir=rtl] body .main-content #view-analytics .analytics-card { border-left-width: 2px !important; border-inline-end-width: 1px !important; }
html body.light-theme :is(#modal,#cancel-modal) .modal-content { box-shadow: 0 28px 90px rgba(43,30,79,.16) !important; }
html body.light-theme .main-content #view-analytics :is(.change-value.up,.change-icon.up) { color: #be3c4a !important; }
html body.light-theme .main-content #view-analytics :is(.change-value.down,.change-icon.down) { color: #087e61 !important; }
@media(prefers-reduced-motion:no-preference) {
  html body :is(#modal,#cancel-modal).active .modal-content { animation: studio-detail-in .28s cubic-bezier(.2,.8,.2,1) both !important; }
  html body .main-content #view-smart_cancel .sc-wizard-pane.active { animation: studio-detail-in .25s cubic-bezier(.2,.8,.2,1) both !important; }
  html body :is(#modal .btn-submit,#cancel-modal .cancel-action-primary):hover { transform: translateY(-1px); }
}
@keyframes studio-detail-in { from { opacity: 0; transform: translateY(9px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media(prefers-reduced-motion:reduce) {
  html body :is(#modal,#cancel-modal).active .modal-content,
  html body .main-content #view-smart_cancel .sc-wizard-pane.active { animation: none !important; }
  html body :is(#modal .btn-submit,#cancel-modal .cancel-action-primary):hover { transform: none !important; }
}