/* Panels share one compact, touch-friendly mobile language. */
body.modal-open {
  position: fixed;
  top: var(--modal-scroll-y, 0);
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

@media (min-width: 721px) {
  .quick-log-modal .editor-field input {
    text-align: center !important;
  }
}

@media (max-width: 720px), (min-width: 721px) and (max-width: 1023px) and (orientation: portrait) {
  /* Every mobile dialog behaves as a bottom sheet.  The generic stylesheet
     centers dialogs for desktop, so both grid axes must be reset here. */
  .modal-backdrop {
    place-items: end center !important;
    padding: 0 !important;
    overscroll-behavior: contain;
  }
  .modal {
    width: 100% !important;
    max-height: 92dvh;
    margin: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    overscroll-behavior: contain;
  }
  .modal::before {
    content: "";
    display: block;
    width: 54px;
    height: 5px;
    margin: 12px auto -3px;
    border-radius: 999px;
    background: #90a4bb;
  }
  .modal-body { min-height: 0; overflow-y: auto; }

  /* List / Calendar is a true centered segmented control. */
  .page-registro .history-modes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  .page-registro .history-modes button {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    place-items: center !important;
    text-align: center !important;
  }

  /* Edit a historical day with the same structure as Registro. */
  .history-edit-modal { display: flex !important; flex-direction: column !important; max-height: 94dvh !important; overflow: hidden !important; }
  .history-edit-modal .modal-head { padding: 21px 17px 0 !important; }
  .history-edit-modal .modal-head h2 { font-size: 25px !important; line-height: 1.08 !important; }
  .history-edit-modal .modal-head p { margin-top: 7px !important; font-size: 13px !important; }
  .history-edit-modal .modal-body { padding: 15px 12px 8px !important; }
  .history-edit-modal .registration-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .history-edit-modal .register-field {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: 22px 27px !important;
    min-width: 0 !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 11px 8px !important;
    gap: 0 10px !important;
    border: 1px solid #173b58 !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #081a2d, #04111f) !important;
  }
  .history-edit-modal .register-field > span { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; overflow: hidden !important; color: #93a2b7 !important; font-size: 12px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .history-edit-modal .register-input { display: contents !important; }
  .history-edit-modal .register-input > span { display: grid !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 40px !important; height: 40px !important; place-items: center !important; align-self: center !important; }
  .history-edit-modal .register-input .asset-icon { width: 40px !important; height: 40px !important; object-fit: contain !important; }
  .history-edit-modal .register-input input { grid-column: 2 !important; grid-row: 2 !important; position: static !important; width: 100% !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #f4f7fb !important; font-size: 19px !important; font-weight: 750 !important; text-align: left !important; box-shadow: none !important; }
  .history-edit-modal .counter-field { grid-template-columns: 40px minmax(0, 1fr) 88px !important; grid-template-rows: 1fr !important; align-items: center !important; min-height: 66px !important; overflow: hidden !important; }
  .history-edit-modal .counter-glyph { display: grid !important; grid-column: 1 !important; width: 40px !important; height: 40px !important; place-items: center !important; }
  .history-edit-modal .counter-glyph .asset-icon { width: 40px !important; height: 40px !important; object-fit: contain !important; }
  .history-edit-modal .counter-label { grid-column: 2 !important; grid-row: 1 !important; color: #aab6c8 !important; font-size: 13px !important; }
  .history-edit-modal .counter-input { display: grid !important; grid-column: 3 !important; grid-row: 1 !important; grid-template-columns: 29px 18px 29px !important; width: 88px !important; min-width: 88px !important; min-height: 0 !important; margin: 0 !important; gap: 6px !important; border: 0 !important; background: transparent !important; transform: translateX(-7px) !important; }
  .history-edit-modal .counter-button { width: 29px !important; height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; font-size: 20px !important; }
  .history-edit-modal .counter-input input { position: static !important; width: 18px !important; min-height: 32px !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 16px !important; text-align: center !important; }
  .history-edit-modal .comment-field { display: block !important; min-height: 0 !important; margin-top: 9px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .history-edit-modal .comment-field > span { display: block !important; margin-bottom: 7px !important; font-size: 15px !important; }
  .history-edit-modal .comment-input { display: flex !important; min-height: 62px !important; padding: 11px 12px !important; gap: 9px !important; border: 1px solid #294763 !important; border-radius: 15px !important; background: #061421 !important; }
  .history-edit-modal .comment-input > span, .history-edit-modal .comment-input .asset-icon { width: 25px !important; height: 25px !important; flex: 0 0 25px !important; }
  .history-edit-modal .comment-input textarea { min-height: 37px !important; padding: 1px 0 !important; border: 0 !important; background: transparent !important; font-size: 14px !important; }
  .history-edit-modal .modal-actions { position: sticky !important; bottom: 0 !important; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)) !important; background: linear-gradient(180deg, transparent, #06182d 18%) !important; }
  .history-edit-modal .modal-actions button { min-height: 50px !important; }

  /* Compact history filters; actions remain reachable on short screens. */
  .history-filter-modal { display: flex !important; flex-direction: column !important; max-height: 92dvh !important; overflow: hidden !important; }
  .history-filter-modal .modal-head { padding: 20px 18px 0 !important; }
  .history-filter-modal .modal-head h2 { font-size: 25px !important; }
  .history-filter-modal .modal-head p { font-size: 13px !important; }
  .history-filter-modal .modal-body { padding: 12px 16px 6px !important; }
  .history-filter-modal .field-grid { gap: 7px !important; }
  .history-filter-modal .field { min-height: 70px !important; margin: 0 !important; padding: 9px 10px !important; gap: 5px !important; border-radius: 14px !important; font-size: 11px !important; }
  .history-filter-modal .field input, .history-filter-modal .field select { min-height: 39px !important; padding: 0 10px !important; border-radius: 12px !important; font-size: 12px !important; }
  .history-filter-modal .filter-label { margin: 12px 0 7px !important; font-size: 12px !important; }
  .history-filter-modal .filter-check-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .history-filter-modal .filter-check { min-height: 42px !important; padding: 7px 10px !important; border-radius: 12px !important; font-size: 12px !important; }
  .history-filter-modal .modal-actions { position: sticky !important; bottom: 0 !important; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)) !important; background: linear-gradient(180deg, transparent, #06182d 18%) !important; }
  .history-filter-modal .modal-actions button { min-height: 48px !important; }

  /* A real four-screen calculator wizard. */
  .calculator-wizard { position: relative !important; display: flex !important; flex-direction: column !important; height: min(92dvh, 760px) !important; overflow: hidden !important; }
  .calculator-wizard .modal-head { flex: 0 0 auto !important; padding: 19px 18px 0 !important; }
  .calculator-wizard .modal-head h2 { font-size: 27px !important; }
  .calculator-wizard .modal-head p { font-size: 14px !important; }
  .calculator-wizard .modal-body { padding: 12px 16px 8px !important; }
  .calculator-wizard .wizard-progress { display: grid !important; height: auto !important; margin-bottom: 12px !important; gap: 6px !important; background: transparent !important; }
  .calculator-wizard .wizard-progress > span { color: #18c9e3 !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 750 !important; background: transparent !important; box-shadow: none !important; }
  .calculator-wizard .wizard-progress > i { display: block !important; height: 6px !important; overflow: hidden !important; border-radius: 999px !important; background: #173149 !important; }
  .calculator-wizard .wizard-progress > i > b { display: block !important; height: 100% !important; border-radius: inherit !important; background: linear-gradient(90deg, #286cff, #16d9e8) !important; box-shadow: 0 0 12px #16d9e899 !important; }
  .calculator-wizard .planner-section[hidden] { display: none !important; }
  .calculator-wizard .calculator-form { display: block !important; }
  .calculator-wizard .planner-section { margin: 0 !important; padding: 13px !important; border-radius: 17px !important; }
  .calculator-wizard .planner-section + .planner-section:not([hidden]) { margin-top: 8px !important; }
  .calculator-wizard .planner-section h3 { margin-bottom: 8px !important; font-size: 18px !important; }
  .calculator-wizard .planner-section > p { margin-bottom: 9px !important; font-size: 13px !important; line-height: 1.4 !important; }
  .calculator-wizard .field-grid { gap: 7px !important; }
  .calculator-wizard .field { min-height: 68px !important; margin: 0 !important; padding: 8px 9px !important; gap: 5px !important; border-radius: 14px !important; font-size: 13px !important; line-height: 1.3 !important; }
  .calculator-wizard .field input, .calculator-wizard .field select { min-height: 40px !important; padding: 0 10px !important; border-radius: 12px !important; font-size: 13px !important; }
  .calculator-wizard .calculator-picker-trigger { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; min-height: 40px !important; padding: 0 11px !important; border: 1px solid #245270 !important; border-radius: 12px !important; background: #03101f !important; color: #eef4fb !important; font-size: 13px !important; text-align: left !important; }
  .calculator-wizard .calculator-picker-trigger b { color: #8ea4ba !important; font-size: 15px !important; }
  .calculator-wizard .planner-section > .field { margin-top: 7px !important; }
  .calculator-wizard .calculator-options.triple { margin-top: 8px !important; }
  .calculator-wizard .calculator-options button { min-height: 46px !important; border-radius: 13px !important; }
  .calculator-wizard .intensity-grid { margin-top: 8px !important; gap: 7px !important; }
  .calculator-wizard .intensity-grid button { min-height: 53px !important; }
  .calculator-wizard .calculation-note { margin-top: 8px !important; padding: 9px !important; font-size: 12px !important; line-height: 1.4 !important; }
  .calculator-wizard .weekly-hours { margin-top: 8px !important; gap: 4px !important; }
  .calculator-wizard .weekly-hours input { min-height: 38px !important; padding: 5px 2px !important; }
  .calculator-wizard .inline-check { min-height: 36px !important; margin-top: 5px !important; }
  .calculator-wizard .week-days { margin-top: 8px !important; }
  .calculator-wizard .week-days button { min-height: 38px !important; }
  .calculator-wizard .modal-actions { position: sticky !important; bottom: 0 !important; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)) !important; background: linear-gradient(180deg, transparent, #06182d 18%) !important; }
  .calculator-wizard .modal-actions button { min-height: 50px !important; font-size: 14px !important; }

  /* Paso final: contenido compacto y controles propios de Quantia. */
  .calculator-wizard[data-wizard-step="4"] { height: auto !important; max-height: min(92dvh, 690px) !important; }
  .calculator-wizard[data-wizard-step="4"] .modal-body { padding-bottom: 4px !important; }
  .calculator-wizard[data-wizard-step="4"] .calculator-form { display: grid !important; gap: 8px !important; }
  .calculator-wizard[data-wizard-step="4"] .planner-section:not([hidden]) {
    display: grid !important;
    gap: 7px !important;
    padding: 12px !important;
    border-color: rgba(40, 111, 158, .48) !important;
    background: linear-gradient(145deg, rgba(8, 29, 50, .94), rgba(4, 17, 31, .96)) !important;
  }
  .calculator-wizard[data-wizard-step="4"] .planner-special-section { margin-top: 0 !important; padding-top: 12px !important; }
  .calculator-wizard[data-wizard-step="4"] .planner-section h3 { margin: 0 0 2px !important; }
  .calculator-wizard[data-wizard-step="4"] .planner-section > p { margin: 0 0 3px !important; line-height: 1.35 !important; }
  .calculator-wizard[data-wizard-step="4"] .inline-check {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(42, 91, 127, .5) !important;
    border-radius: 12px !important;
    background: rgba(3, 16, 30, .72) !important;
    color: #b7c6d8 !important;
    font-size: 12px !important;
  }
  .calculator-wizard[data-wizard-step="4"] .inline-check:has(input:checked) {
    border-color: #12c8df !important;
    background: linear-gradient(100deg, rgba(9, 68, 94, .82), rgba(6, 42, 65, .78)) !important;
    color: #f0fbff !important;
  }
  .calculator-wizard[data-wizard-step="4"] .inline-check input {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: grid !important;
    place-content: center !important;
    flex: 0 0 21px !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    inline-size: 21px !important;
    block-size: 21px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #47708f !important;
    border-radius: 6px !important;
    background: #061525 !important;
  }
  .calculator-wizard[data-wizard-step="4"] .inline-check input::before {
    content: "";
    width: 10px;
    height: 6px;
    border: solid #03111f;
    border-width: 0 0 3px 3px;
    transform: rotate(-45deg) scale(0);
    transition: transform .12s ease;
  }
  .calculator-wizard[data-wizard-step="4"] .inline-check input:checked {
    border-color: #1bd4e8 !important;
    background: linear-gradient(135deg, #2377f3, #12d4df) !important;
    box-shadow: 0 0 0 3px rgba(18, 203, 225, .12) !important;
  }
  .calculator-wizard[data-wizard-step="4"] .inline-check input:checked::before { transform: rotate(-45deg) scale(1); }
  .calculator-wizard[data-wizard-step="4"] #exercise-fields { display: grid; gap: 7px; margin-top: 2px; }
  .calculator-wizard[data-wizard-step="4"] #exercise-fields[hidden] { display: none !important; }
  .calculator-wizard[data-wizard-step="4"] .planner-section[hidden] { display: none !important; }

  /* Quick tracking panels: same hierarchy for every metric, current Quantia icons. */
  .quick-log-modal { position: relative !important; display: flex !important; flex-direction: column !important; max-height: 88dvh !important; overflow: hidden !important; }
  .quick-log-modal .modal-head { min-height: 78px !important; padding: 26px 58px 0 86px !important; align-items: flex-start !important; }
  .quick-log-modal .modal-head h2 { font-size: 25px !important; line-height: 1.08 !important; }
  .quick-log-modal .modal-head p { margin-top: 7px !important; font-size: 14px !important; line-height: 1.25 !important; }
  .quick-log-modal .close { position: absolute !important; top: 24px !important; right: 18px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; }
  .quick-log-modal .editor-emblem { position: absolute !important; z-index: 2 !important; top: 43px !important; left: 18px !important; display: grid !important; width: 52px !important; height: 52px !important; margin: 0 !important; place-items: center !important; border: 1px solid #286083 !important; border-radius: 50% !important; background: #0a2036 !important; }
  .quick-log-modal .editor-emblem .asset-icon { width: 43px !important; height: 43px !important; object-fit: contain !important; }
  .quick-log-modal .modal-body { padding: 19px 18px 8px !important; }
  .quick-log-modal .editor-field { min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; border: 0 !important; background: transparent !important; font-size: 15px !important; }
  .quick-log-modal .editor-field input { min-height: 68px !important; padding: 0 17px !important; border: 2px solid #13c9df !important; border-radius: 16px !important; background: #03101f !important; font-size: 28px !important; font-weight: 750 !important; box-shadow: 0 0 0 4px #13c9df12 !important; }
  .quick-log-modal .editor-context { margin: 13px 2px 0 !important; color: #9baabd !important; font-size: 13px !important; }
  .quick-log-modal .modal-actions { padding: 15px 18px calc(18px + env(safe-area-inset-bottom)) !important; }
  .quick-log-modal .modal-actions button { min-height: 56px !important; border-radius: 17px !important; font-size: 15px !important; }
  .quick-counter-modal .quick-counter-control { display: grid !important; grid-template-columns: 64px minmax(74px, 1fr) 64px !important; align-items: center !important; gap: 10px !important; min-height: 82px !important; padding: 9px !important; border: 2px solid #13c9df !important; border-radius: 18px !important; background: #03101f !important; box-shadow: 0 0 0 4px #13c9df12 !important; }
  .quick-counter-modal .quick-counter-button { width: 64px !important; height: 64px !important; border: 1px solid #235270 !important; border-radius: 16px !important; background: #0b2238 !important; font-size: 30px !important; font-weight: 800 !important; }
  .quick-counter-modal .quick-counter-button.minus { color: #ff5964 !important; }
  .quick-counter-modal .quick-counter-button.plus { color: #1bd5e9 !important; }
  .quick-counter-modal #quick-counter-value { color: #f4f7fc !important; font-size: 31px !important; font-weight: 750 !important; text-align: center !important; }
  .modal-backdrop.keyboard-visible { align-items: end !important; }
  .modal-backdrop.keyboard-visible .quick-log-modal { max-height: calc(100% - 6px) !important; }
  .modal-backdrop.keyboard-visible .quick-log-modal .modal-head { min-height: 62px !important; padding-top: 17px !important; }
  .modal-backdrop.keyboard-visible .quick-log-modal .editor-emblem { top: 20px !important; }
  .modal-backdrop.keyboard-visible .quick-log-modal .modal-head p { margin-top: 3px !important; }
  .modal-backdrop.keyboard-visible .quick-log-modal .modal-body { padding-top: 10px !important; }
  .modal-backdrop.keyboard-visible .quick-log-modal .editor-context { margin-top: 8px !important; }
  .modal-backdrop.keyboard-visible .quick-log-modal .modal-actions { padding-top: 9px !important; padding-bottom: 10px !important; }

  /* Editors share one aligned header: current Quantia icon, title and helper
     text read as a single unit. Numeric fields stay compact and centered. */
  .editor-modal .modal-head { min-height: 0 !important; padding: 26px 58px 0 18px !important; }
  .editor-modal .modal-head > div {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
  }
  .editor-modal .editor-emblem {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
  }
  .editor-modal .modal-head h2 { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; }
  .editor-modal .modal-head p { grid-column: 2 !important; grid-row: 2 !important; margin: 4px 0 0 !important; }
  .editor-modal .modal-body { padding-top: 18px !important; }
  .editor-modal .editor-field {
    width: min(100%, 280px) !important;
    margin-inline: auto !important;
  }
  .editor-modal .editor-field input {
    width: 100% !important;
    min-height: 58px !important;
    padding-inline: 14px !important;
    font-size: 24px !important;
    text-align: center !important;
  }
  .editor-modal .editor-context { max-width: 280px !important; margin-inline: auto !important; }
  .editor-modal .modal-actions { padding-inline: 30px !important; }
  .editor-modal .close { top: 24px !important; }

  /* Edge puede reducir el viewport real al aparecer el teclado. Esta variante
     conserva una cabecera legible y deja el valor siempre por encima de él. */
  .modal-backdrop.keyboard-visible .editor-modal .modal-head {
    padding: 16px 58px 0 18px !important;
  }
  .modal-backdrop.keyboard-visible .editor-modal .modal-head > div {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }
  .modal-backdrop.keyboard-visible .editor-modal .editor-emblem {
    width: 42px !important;
    height: 42px !important;
  }
  .modal-backdrop.keyboard-visible .editor-modal .editor-emblem .asset-icon {
    width: 35px !important;
    height: 35px !important;
  }
  .modal-backdrop.keyboard-visible .editor-modal .modal-head h2 { font-size: 20px !important; }
  .modal-backdrop.keyboard-visible .editor-modal .modal-head p {
    max-width: 190px !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
  }
  .modal-backdrop.keyboard-visible .editor-modal .modal-body { padding: 10px 18px 4px !important; }
  .modal-backdrop.keyboard-visible .editor-modal .editor-field input { min-height: 54px !important; font-size: 22px !important; }
  .modal-backdrop.keyboard-visible .editor-modal .editor-context { margin-top: 8px !important; font-size: 11px !important; }
  .modal-backdrop.keyboard-visible .editor-modal .modal-actions { padding-top: 8px !important; padding-bottom: 10px !important; }

  /* Suggested goals use the same final-step hierarchy as the reference. */
  .target-result-modal { display: flex !important; flex-direction: column !important; max-height: 94dvh !important; overflow: hidden !important; }
  .target-result-modal .modal-head { padding: 21px 18px 0 !important; }
  .target-result-modal .modal-head h2 { font-size: 27px !important; }
  .target-result-modal .modal-head p { font-size: 14px !important; }
  .target-result-modal .modal-body { padding: 15px 16px 8px !important; }
  .target-result-modal .suggested-calories, .target-result-modal .suggested-protein { margin-bottom: 10px !important; padding: 16px !important; border-radius: 18px !important; }
  .target-result-modal .suggested-calories strong, .target-result-modal .suggested-protein strong { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 8px !important; letter-spacing: -.045em !important; }
  .target-result-modal .suggested-calories strong { font-size: 43px !important; }
  .target-result-modal .suggested-protein strong { font-size: 36px !important; }
  .target-result-modal .suggested-calories strong em, .target-result-modal .suggested-protein strong em { margin: 0 !important; color: inherit !important; font-size: 17px !important; font-style: normal !important; font-weight: 650 !important; letter-spacing: 0 !important; white-space: nowrap !important; }
  .target-result-modal .suggested-details { margin-bottom: 9px !important; padding: 10px 12px !important; border-radius: 16px !important; }
  .target-result-modal .modal-actions { position: sticky !important; bottom: 0 !important; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)) !important; background: linear-gradient(180deg, transparent, #06182d 18%) !important; }
  .target-result-modal .modal-actions button { min-height: 52px !important; }

  /* Quantia replacements for Android native date/select surfaces. */
  .calculator-picker-layer { position: absolute !important; z-index: 8 !important; inset: 0 !important; display: grid !important; align-items: end !important; background: #010811b8 !important; backdrop-filter: blur(7px) !important; }
  .calculator-picker-panel { max-height: 82% !important; overflow: hidden !important; border: 1px solid #24516e !important; border-radius: 25px 25px 0 0 !important; background: radial-gradient(circle at 50% 0, #0b3150, transparent 230px), #06172a !important; box-shadow: 0 -18px 50px #0009 !important; }
  .calculator-picker-panel > header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 18px 11px !important; }
  .calculator-picker-panel > header h3 { margin: 0 !important; color: #f2f7ff !important; font-size: 21px !important; }
  .calculator-picker-panel > header button { width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #102b43 !important; color: #14cce2 !important; font-size: 24px !important; }
  .calculator-picker-content { padding: 0 16px calc(17px + env(safe-area-inset-bottom)) !important; }
  .calculator-choice-list { display: grid !important; gap: 7px !important; max-height: 58dvh !important; overflow-y: auto !important; overscroll-behavior: contain !important; }
  .calculator-choice-list button { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 49px !important; padding: 0 14px !important; border: 1px solid #1b405c !important; border-radius: 13px !important; background: #061421 !important; color: #b8c4d4 !important; font-size: 14px !important; text-align: left !important; }
  .calculator-choice-list button.active { border-color: #13c9df !important; background: linear-gradient(100deg, #0b3c56, #092e48) !important; color: #f6fbff !important; }
  .calculator-choice-list button b { color: #20d2e8 !important; }
  .quantia-date-heading { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 10px !important; }
  .quantia-date-heading button { min-height: 46px !important; border: 1px solid #1e5678 !important; border-radius: 13px !important; background: #071a2c !important; color: #f3f8ff !important; font-size: 17px !important; font-weight: 750 !important; }
  .quantia-date-nav { display: grid !important; grid-template-columns: 38px 1fr 38px !important; align-items: center !important; margin-bottom: 5px !important; }
  .quantia-date-nav button { height: 36px !important; border: 0 !important; border-radius: 11px !important; background: #0b243a !important; color: #1ac9e2 !important; font-size: 24px !important; }
  .quantia-date-nav span { color: #8999ad !important; font-size: 11px !important; letter-spacing: .75em !important; text-align: center !important; white-space: nowrap !important; }
  .quantia-day-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 4px !important; }
  .quantia-day-grid button, .quantia-day-grid i { aspect-ratio: 1 !important; }
  .quantia-day-grid button { display: grid !important; padding: 0 !important; place-items: center !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #bac6d5 !important; font-size: 13px !important; }
  .quantia-day-grid button.active { background: linear-gradient(135deg, #1769ed, #13c8df) !important; color: #fff !important; font-weight: 800 !important; }
  .quantia-month-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .quantia-month-grid button { min-height: 51px !important; border: 1px solid #1b405c !important; border-radius: 14px !important; background: #061421 !important; color: #b7c4d3 !important; font-size: 14px !important; }
  .quantia-month-grid button.active { border-color: #13c9df !important; background: linear-gradient(110deg, #125bd1, #0b9fb9) !important; color: #fff !important; }
  .quantia-year-list { display: grid !important; max-height: 52dvh !important; overflow-y: auto !important; padding: 4px 0 !important; scroll-snap-type: y proximity !important; overscroll-behavior: contain !important; }
  .quantia-year-list button { min-height: 46px !important; border: 0 !important; border-bottom: 1px solid #132d43 !important; background: transparent !important; color: #95a5b7 !important; font-size: 17px !important; scroll-snap-align: center !important; }
  .quantia-year-list button.active { color: #1cd1e7 !important; font-size: 23px !important; font-weight: 800 !important; }
}

@media (max-width: 380px) {
  .history-edit-modal .counter-field { grid-template-columns: 36px minmax(0, 1fr) 84px !important; padding-inline: 6px !important; gap: 5px !important; }
  .history-edit-modal .counter-input { grid-template-columns: 28px 16px 28px !important; width: 84px !important; min-width: 84px !important; gap: 6px !important; transform: translateX(-5px) !important; }
  .quick-log-modal .modal-head { padding-left: 78px !important; }
}