:root{
  --sv-font: 'Chirp', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

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

/* Desktop + tablet upload composer refresh */
@media (min-width: 768px){
  #svComposer .sv-comp__panel,
  .sv-comp#svComposer .sv-comp__panel{
    inset: clamp(18px, 3vw, 34px) auto auto 50% !important;
    transform: translateX(-50%) !important;
    width: min(1180px, calc(100vw - 56px)) !important;
    height: min(88vh, 920px) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.18) !important;
  }

  #svComposer .sv-comp__header{
    padding-inline: 18px !important;
  }

  #svComposer .sv-comp__page[data-page="compose"] .sv-comp__body{
    padding: 18px 18px 22px !important;
  }

  #svComposer .sv-comp__studio{
    height: 100% !important;
    min-height: 0 !important;
  }

  #svComposer .sv-comp__heroWrap,
  #svComposer .sv-comp__heroWrap--media{
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr) !important;
    align-items: start !important;
    gap: 18px !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  #svComposer .sv-comp__hero,
  #svComposer .sv-comp__heroWrap--media .sv-comp__hero{
    min-height: min(62vh, 640px) !important;
    border-radius: 28px !important;
  }

  #svComposer .sv-comp__pickerCard,
  #svComposer .sv-comp__pickerCard--inline{
    border-radius: 28px !important;
    padding: 14px !important;
  }

  #svComposer .sv-comp__picker,
  #svComposer .sv-comp__pickerCard--inline .sv-comp__picker{
    min-height: 220px !important;
    border-radius: 24px !important;
    padding: 22px 18px !important;
  }

  #svComposer .sv-comp__pickerCard--inline .sv-comp__picker{
    min-height: 0 !important;
  }

  #svComposer .sv-comp__pickBtns{
    gap: 12px !important;
  }

  #svComposer .sv-comp__pickBtn{
    min-width: 138px !important;
    height: 42px !important;
    padding-inline: 18px !important;
  }

  #svComposer .sv-comp__sheet--import .sv-comp__sheetPanel,
  .sv-comp__sheet.sv-comp__sheet--import .sv-comp__sheetPanel{
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(680px, calc(100vw - 72px)) !important;
    max-height: min(76vh, 420px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.22) !important;
  }

  #svComposer .sv-comp__sheet--import .sv-comp__sheetHead{
    padding: 18px 20px !important;
  }

  #svComposer .sv-comp__sheet--import .sv-comp__sheetBody{
    padding: 18px 20px 22px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px){
  #svComposer .sv-comp__panel,
  .sv-comp#svComposer .sv-comp__panel{
    width: min(940px, calc(100vw - 40px)) !important;
    height: min(88vh, 860px) !important;
  }

  #svComposer .sv-comp__heroWrap,
  #svComposer .sv-comp__heroWrap--media{
    grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr) !important;
  }
}