/* Metric-matched fallback for Inter: prevents layout shift (CLS) when the web font swaps in */
    @font-face {
      font-family: 'Inter Fallback';
      src: local('Arial'), local('Helvetica'), local('Liberation Sans');
      size-adjust: 107.12%;
      ascent-override: 90.44%;
      descent-override: 22.52%;
      line-gap-override: 0%;
    }
    :root {
      --bg-dark: #1B261E;
      --cream: #FDFBF7;
      --input-bg: #F3F1EA;
      --border-light: #D1D1C7;
      --border-soft: #EBE9E1;
      --sage: #8F9779;
      --forest: #4A5D4E;
      --bulk-green: #3A4D1F;
      --danger: #8B0000;
      --danger-bright: #A80000;
      --accent: #E2B04E;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background-color: var(--bg-dark);
      color: var(--cream);
      font-family: 'Inter', 'Inter Fallback', sans-serif;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      -webkit-font-smoothing: antialiased;
      padding: 0;
    }

    .app-shell {
      width: 100%;
      max-width: 540px;
      min-height: 100vh;
      background-color: var(--bg-dark);
      display: flex;
      flex-direction: column;
      padding-bottom: 60px;
    }

    /* TOP APP HEADER */
    .fixed-header {
      width: 100%;
      padding: 20px 20px 12px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--bg-dark);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .back-link {
      color: var(--sage);
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 7px 12px;
      border-radius: 20px;
      background: rgba(253, 251, 247, 0.06);
      border: 1px solid rgba(143, 151, 121, 0.25);
    }
    .brand-title {
      color: var(--cream);
      font-size: 25px;
      font-weight: 900;
      letter-spacing: -0.5px;
      text-decoration: none;
    }
    .header-share-btn {
      color: var(--cream);
      background: rgba(226, 176, 78, 0.16);
      border: 1px solid rgba(226, 176, 78, 0.45);
      font-size: 12.5px;
      font-weight: 800;
      padding: 7px 13px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: inherit;
    }

    /* PACK / PRIDE TOGGLE */
    .pet-toggle-container {
      display: flex;
      padding: 4px 20px 16px 20px;
      justify-content: center;
      gap: 10px;
    }
    .pet-toggle-btn {
      flex: 1;
      background-color: #D1D1C7;
      padding: 12px 10px;
      border-radius: 25px;
      border: none;
      text-align: center;
      opacity: 0.6;
      font-weight: 800;
      color: #1B261E;
      font-size: 15px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
    }
    .pet-toggle-btn.active {
      background-color: #FDFBF7;
      opacity: 1;
      box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    }

    .scroll-center {
      padding: 0 18px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* IN-APP CREAM EDITOR CARD */
    .app-card {
      background-color: #FDFBF7;
      border-radius: 36px;
      padding: 22px 20px;
      border: 1.5px solid #D1D1C7;
      color: #1B261E;
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    }
    .card-header-title {
      font-size: 23px;
      font-weight: 900;
      color: #1B261E;
      text-align: center;
      margin-bottom: 14px;
    }
    .section-label {
      font-size: 11px;
      font-weight: 800;
      color: #8F9779;
      margin-top: 14px;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* INPUTS */
    .app-input {
      width: 100%;
      background-color: #F3F1EA;
      border-radius: 20px;
      padding: 11px 15px;
      margin-bottom: 10px;
      border: 1.5px solid #D1D1C7;
      color: #1B261E;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s;
    }
    .app-input::placeholder {
      color: #8F9779;
      font-weight: 600;
    }
    .app-input:focus {
      border-color: #4A5D4E;
    }

    /* WEIGHT + UNIT TOGGLE ROW */
    .weight-row {
      display: flex;
      gap: 10px;
      margin-bottom: 6px;
      align-items: center;
    }
    .u-toggle {
      display: flex;
      background-color: #D1D1C7;
      border-radius: 15px;
      padding: 4px;
      width: 96px;
      height: 44px;
      flex-shrink: 0;
    }
    .u-btn {
      flex: 1;
      border: none;
      background: transparent;
      border-radius: 12px;
      font-weight: 800;
      font-size: 12px;
      color: #1B261E;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .u-btn.active {
      background-color: rgba(27, 38, 30, 0.75);
      color: #FDFBF7;
    }
    .weight-conv-hint {
      font-size: 11px;
      font-weight: 700;
      color: #8F9779;
      margin-bottom: 6px;
      padding-left: 6px;
    }

    /* ACTIVITY & DIET STYLE BUTTONS */
    .activity-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }
    .activity-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 6px;
      border-radius: 15px;
      border: 1px solid #D1D1C7;
      background: transparent;
      color: #8F9779;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .activity-btn ion-icon {
      font-size: 18px;
      margin-bottom: 4px;
    }
    .activity-btn .act-lbl {
      font-size: 10.5px;
      font-weight: 800;
      text-align: center;
      line-height: 1.2;
    }
    .activity-btn .act-sub {
      font-size: 8.5px;
      margin-top: 2px;
      text-align: center;
      opacity: 0.85;
    }
    .activity-btn.active {
      background-color: #4A5D4E;
      border-color: #4A5D4E;
      color: #FDFBF7;
    }

    /* PUPPY / KITTEN AGE-STAGE DRAWER */
    .growth-stage-card {
      background-color: #F3F1EA;
      border-radius: 18px;
      padding: 11px 12px;
      margin-top: 8px;
      border: 1.5px solid #D1D1C7;
    }
    .growth-stage-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 11.5px;
      font-weight: 800;
      color: #1B261E;
    }
    .growth-stage-hint {
      font-size: 10.5px;
      font-weight: 700;
      color: #4A5D4E;
    }
    .growth-stage-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }
    .growth-stage-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 7px 4px;
      border-radius: 12px;
      border: 1.5px solid #D1D1C7;
      background-color: #FDFBF7;
      color: #4A5D4E;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .growth-stage-btn .gs-age {
      font-size: 11px;
      font-weight: 900;
      line-height: 1.15;
    }
    .growth-stage-btn .gs-pct {
      font-size: 9.5px;
      font-weight: 700;
      margin-top: 2px;
      opacity: 0.85;
    }
    .growth-stage-btn.active {
      background-color: #4A5D4E;
      border-color: #4A5D4E;
      color: #FDFBF7;
      box-shadow: 0 3px 8px rgba(74, 93, 78, 0.25);
    }

    /* MEALS PER DAY SELECTOR (ALWAYS DISTRIBUTED, NO CHECKBOX) */
    .meals-split-card {
      background-color: #F3F1EA;
      border-radius: 20px;
      padding: 14px 15px;
      margin-top: 14px;
      border: 1.5px solid #D1D1C7;
    }
    .meals-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .meals-title {
      color: #1B261E;
      font-weight: 800;
      font-size: 13.5px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .num-btn {
      width: 36px;
      height: 36px;
      border-radius: 18px;
      background-color: #FDFBF7;
      border: 1.5px solid #4A5D4E;
      color: #4A5D4E;
      font-weight: 900;
      font-size: 13.5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .num-btn.active {
      background-color: #4A5D4E;
      color: #FDFBF7;
      box-shadow: 0 3px 8px rgba(74, 93, 78, 0.3);
    }

    /* HIGH-VISIBILITY MEAL CARDS (BOTH LIVE PREVIEW & SAVED PET CARD) */
    .live-meals-preview {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed #D1D1C7;
    }
    .meals-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 10px;
      margin-top: 8px;
    }
    .meal-card {
      background-color: #FDFBF7;
      border: 1.5px solid #D1D1C7;
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .meal-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1.5px solid #EBE9E1;
      padding-bottom: 7px;
      gap: 8px;
    }
    .meal-card-title {
      font-size: 14px;
      font-weight: 900;
      color: #1B261E;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .meal-card-total-badge {
      background-color: #4A5D4E;
      color: #FDFBF7;
      font-size: 12.5px;
      font-weight: 900;
      padding: 4px 10px;
      border-radius: 10px;
      white-space: nowrap;
    }
    .meal-macros-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .meal-macro-item {
      background-color: #F3F1EA;
      border: 1px solid #E2DFD5;
      border-radius: 10px;
      padding: 6px 9px;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .meal-macro-label {
      font-size: 11px;
      font-weight: 800;
      color: #4A5D4E;
    }
    .meal-macro-weight {
      font-size: 13px;
      font-weight: 900;
      color: #1B261E;
    }

    /* PILLS FOR ALLERGIES & PREFERENCES */
    .row-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .app-pill {
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #D1D1C7;
      background-color: transparent;
      color: #1B261E;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .app-pill.active {
      background-color: #4A5D4E;
      border-color: #4A5D4E;
      color: #FDFBF7;
    }
    .app-pill.allergy-active {
      background-color: #8B0000;
      border-color: #8B0000;
      color: #FDFBF7;
    }
    .custom-add-row {
      display: flex;
      margin-top: 9px;
      gap: 8px;
      align-items: center;
    }
    .custom-add-input {
      flex: 1;
      background-color: #F3F1EA;
      border-radius: 20px;
      padding: 8px 14px;
      border: 1.5px solid #D1D1C7;
      color: #1B261E;
      font-size: 12.5px;
      font-weight: 700;
      font-family: inherit;
      outline: none;
    }
    .custom-add-btn {
      background-color: #4A5D4E;
      width: 38px;
      height: 38px;
      border-radius: 19px;
      border: none;
      color: #FDFBF7;
      font-size: 18px;
      font-weight: 900;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* SAVE PROFILE BUTTON ROW */
    .action-row {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }
    .secondary-btn-half {
      flex: 1;
      background-color: #F3F1EA;
      padding: 16px;
      border-radius: 30px;
      border: 1.5px solid #D1D1C7;
      color: #556B2F;
      font-weight: 900;
      font-size: 15px;
      cursor: pointer;
      font-family: inherit;
    }
    .calc-btn-half {
      flex: 1.3;
      background-color: #1B261E;
      padding: 16px;
      border-radius: 30px;
      border: none;
      color: #FDFBF7;
      font-weight: 900;
      font-size: 16px;
      letter-spacing: 0.3px;
      cursor: pointer;
      font-family: inherit;
      transition: opacity 0.2s;
    }
    .calc-btn-half:hover { opacity: 0.92; }

    /* VIEW MODE TOGGLE: DAILY | WEEKLY | MONTHLY */
    .view-toggle-container {
      display: flex;
      background-color: #D1D1C7;
      border-radius: 25px;
      padding: 4px;
      margin-bottom: 14px;
    }
    .view-toggle-btn {
      flex: 1;
      padding: 11px;
      border-radius: 20px;
      border: none;
      background: transparent;
      font-weight: 800;
      font-size: 13.5px;
      color: #6b7360;
      cursor: pointer;
      font-family: inherit;
    }
    .view-toggle-btn.active {
      background-color: #FDFBF7;
      color: #1B261E;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .add-member-btn {
      width: 100%;
      padding: 15px;
      background-color: #4A5D4E;
      color: #FDFBF7;
      font-weight: 800;
      font-size: 14.5px;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      margin-bottom: 14px;
      font-family: inherit;
    }

    /* IN-APP SAVED PET CARD */
    .res-card {
      background-color: #FDFBF7;
      border-radius: 30px;
      padding: 22px 20px;
      margin-bottom: 16px;
      color: #1B261E;
      box-shadow: 0 10px 28px rgba(0,0,0,0.3);
      border: 1.5px solid #D1D1C7;
    }
    .row-between {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
      gap: 10px;
    }
    .res-title {
      font-size: 20px;
      font-weight: 900;
      color: #1B261E;
    }
    .res-breed {
      font-size: 13px;
      font-weight: 800;
      color: #8F9779;
      margin-top: 2px;
    }
    .method-toggle {
      background-color: #1B261E;
      color: #FDFBF7;
      font-weight: 900;
      font-size: 11px;
      padding: 5px 12px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }
    .icon-action-btn {
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    /* PREFERRED MEAT & ALLERGY HIGHLIGHT BOXES */
    .highlight-box {
      border-radius: 12px;
      padding: 9px 12px;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 800;
    }
    .highlight-pref {
      background-color: #F0F5F1;
      border: 1px solid #C3D8C7;
      color: #2C4A31;
    }
    .highlight-allergy {
      background-color: #FDF2F2;
      border: 1px solid #F8D7DA;
      color: #8B0000;
    }

    /* DAILY MACRO SUMMARY CHIPS ON PET CARD */
    .macro-chips-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 10px 0;
    }
    .macro-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background-color: #F3F1EA;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid #D1D1C7;
      font-size: 12.5px;
    }
    .macro-chip-lbl {
      color: #4A5D4E;
      font-weight: 700;
    }
    .macro-chip-val {
      color: #1B261E;
      font-weight: 900;
    }

    .total-text {
      text-align: right;
      font-weight: 900;
      color: #1B261E;
      font-size: 16px;
      margin-top: 4px;
    }

    .card-divider-section {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1.5px solid #EBE9E1;
    }
    .checklist-header {
      font-size: 11.5px;
      font-weight: 900;
      color: #4A5D4E;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    /* CARD FOOTER ACTIONS (JPEG DOWNLOAD / SHARE OPTIONS / UNIT SWITCH) */
    .card-export-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1.5px solid #EBE9E1;
    }
    .card-export-btn {
      flex: 1;
      min-width: 130px;
      background-color: #F3F1EA;
      color: #1B261E;
      border: 1.5px solid #D1D1C7;
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 12.5px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: inherit;
      transition: all 0.15s;
    }
    .card-export-btn.primary-action {
      background-color: #1B261E;
      color: #FDFBF7;
      border-color: #1B261E;
    }
    .card-export-btn.share-action {
      background-color: #E2B04E;
      color: #1B261E;
      border-color: #d4a03d;
    }
    .card-export-btn:hover {
      opacity: 0.9;
    }

    /* WEEKLY & MONTHLY BULK GREEN CARD */
    .bulk-card {
      background-color: #3A4D1F;
      padding: 26px 22px;
      border-radius: 32px;
      color: #FDFBF7;
      box-shadow: 0 10px 28px rgba(0,0,0,0.3);
    }
    .bulk-header {
      color: #FDFBF7;
      font-size: 19px;
      font-weight: 900;
      text-align: center;
      margin-bottom: 18px;
    }
    .ing-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      align-items: center;
      font-size: 14px;
    }
    .white-ing { color: #FDFBF7; font-weight: 600; }
    .white-amt { color: #FFF; font-weight: 900; }
    .white-divider { height: 1px; background-color: rgba(255,255,255,0.2); margin: 16px 0; }
    .grand-label { color: #FDFBF7; font-size: 17px; font-weight: 800; }
    .grand-value { color: #FFF; font-size: 22px; font-weight: 900; }
    .copy-bulk-btn {
      width: 100%;
      margin-top: 18px;
      background-color: rgba(255,255,255,0.2);
      color: #FDFBF7;
      font-weight: 800;
      font-size: 14px;
      padding: 14px;
      border-radius: 20px;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }

    /* MODALS (BREED & SHARE OPTIONS) */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.68);
      display: none;
      justify-content: center;
      align-items: flex-end;
      z-index: 500;
    }
    .modal-overlay.open { display: flex; }
    .modal-content {
      background-color: #FDFBF7;
      color: #1B261E;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      padding: 22px 20px 28px 20px;
      width: 100%;
      max-width: 540px;
      max-height: 82vh;
      display: flex;
      flex-direction: column;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }
    .modal-title { font-size: 19px; font-weight: 900; color: #1B261E; }
    .modal-list {
      overflow-y: auto;
      flex: 1;
    }
    .modal-list-item {
      padding: 14px 4px;
      border-bottom: 1px solid #D1D1C7;
      font-size: 15px;
      font-weight: 700;
      color: #4A5D4E;
      cursor: pointer;
    }
    .modal-list-item:hover { color: #1B261E; }

    /* SHARE OPTIONS LIST */
    .share-option-card {
      background-color: #F3F1EA;
      border: 1.5px solid #D1D1C7;
      border-radius: 18px;
      padding: 14px 16px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .share-option-card.featured {
      background-color: #FFFDF7;
      border: 2px solid #E2B04E;
      box-shadow: 0 4px 14px rgba(226, 176, 78, 0.18);
    }
    .share-opt-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
    }
    .share-opt-title {
      font-size: 14.5px;
      font-weight: 900;
      color: #1B261E;
    }
    .share-opt-desc {
      font-size: 12px;
      font-weight: 600;
      color: #6b7360;
      line-height: 1.4;
    }
    .share-opt-url {
      font-size: 11px;
      font-weight: 800;
      color: #4A5D4E;
      background: rgba(74, 93, 78, 0.1);
      padding: 4px 8px;
      border-radius: 8px;
      word-break: break-all;
    }
    .share-opt-actions {
      display: flex;
      gap: 8px;
      margin-top: 2px;
    }
    .share-act-btn {
      flex: 1;
      padding: 9px 12px;
      border-radius: 12px;
      border: 1px solid #D1D1C7;
      background-color: #FDFBF7;
      color: #1B261E;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-family: inherit;
    }
    .share-act-btn.primary {
      background-color: #1B261E;
      color: #FDFBF7;
      border-color: #1B261E;
    }
    /* ===================== iOS / MOBILE HARDENING ===================== */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
    .app-shell { min-height: 100dvh; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    button, a, .num-btn, .app-pill, .activity-btn, .modal-list-item { touch-action: manipulation; }
    /* 16px minimum stops iPhone Safari from zooming/jumping when a field is focused */
    input, select, textarea, .app-input, .custom-add-input { font-size: 16px !important; -webkit-appearance: none; appearance: none; }
    .custom-add-input { padding: 10px 14px; }
    button.app-input { font-size: 16px !important; }
    .modal-overlay { overscroll-behavior: contain; }
    .modal-content { max-height: 92%; }
    .modal-list { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    #breedModal { align-items: flex-start; }
    #breedModal .modal-content {
      height: min(100%, 620px); max-height: 100%;
      border-radius: 0 0 28px 28px;
      padding-top: calc(18px + env(safe-area-inset-top));
    }

    /* ===================== COMPACT MEAL PLAN ===================== */
    .meals-box { background: #F3F1EA; border: 1.5px solid #D1D1C7; border-radius: 16px; padding: 12px; width: 100%; }
    .meals-box-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
    .meals-box-title { font-weight: 900; font-size: 13.5px; color: #1B261E; }
    .meal-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
    .meal-chip { background: #FDFBF7; border: 1px solid #D1D1C7; border-radius: 10px; padding: 6px 4px; text-align: center; }
    .meal-chip b { display: block; font-size: 10.5px; color: #4A5D4E; font-weight: 800; }
    .meal-chip span { font-size: 12.5px; font-weight: 900; color: #1B261E; }
    .bulk-btn-row { display: flex; gap: 8px; margin-top: 18px; }
    .bulk-btn-row .copy-bulk-btn { width: auto; flex: 1; margin-top: 0; }
    .copy-bulk-btn.solid { background: #FDFBF7; color: #3A4D1F; }

    @media (max-width: 480px) {
      .scroll-center { padding: 0 12px; }
      .fixed-header { padding: 14px 14px 10px; }
      .app-card { padding: 18px 14px; border-radius: 28px; }
      .res-card { padding: 16px 14px; border-radius: 24px; }
      .macro-chips-wrap { display: grid; grid-template-columns: 1fr 1fr; }
      .macro-chip { flex-direction: column; align-items: flex-start; gap: 1px; }
      .card-export-btn { min-width: calc(50% - 4px); }
      .total-text { font-size: 15px; }
    }

    /* ===================== EXPORT / PRINT MODALS ===================== */
    .export-opt { display: flex; gap: 10px; align-items: center; background: #F3F1EA; border: 1.5px solid #D1D1C7; border-radius: 16px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; }
    .export-opt.sel { background: #EEF4EF; border-color: #4A5D4E; box-shadow: 0 0 0 1.5px #4A5D4E inset; }
    .export-opt .ic { font-size: 22px; }
    .export-opt .t { font-weight: 900; font-size: 14px; color: #1B261E; }
    .export-opt .d { font-size: 11.5px; font-weight: 600; color: #6b7360; }
    .export-h { font-size: 11px; font-weight: 900; color: #8F9779; text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 6px; }
    .dpi-row { display: flex; gap: 8px; }
    .dpi-btn { flex: 1; text-align: center; background: #F3F1EA; border: 1.5px solid #D1D1C7; border-radius: 14px; padding: 9px 4px; cursor: pointer; font-family: inherit; color: #1B261E; }
    .dpi-btn b { display: block; font-size: 13px; font-weight: 900; }
    .dpi-btn span { font-size: 10.5px; font-weight: 700; color: #6b7360; }
    .dpi-btn.sel { background: #4A5D4E; border-color: #4A5D4E; color: #FDFBF7; }
    .dpi-btn.sel span { color: #DDE6DE; }
    .export-actions { display: flex; gap: 8px; margin-top: 14px; }
    .export-btn { flex: 1; padding: 14px 10px; border-radius: 16px; border: 1.5px solid #1B261E; background: #FDFBF7; color: #1B261E; font-weight: 900; font-size: 14px; cursor: pointer; font-family: inherit; }
    .export-btn.dark { background: #1B261E; color: #FDFBF7; }
    .export-btn:disabled { opacity: .6; }
    .export-select { width: 100%; background: #F3F1EA; border: 1.5px solid #D1D1C7; border-radius: 14px; padding: 10px 12px; color: #1B261E; font-weight: 800; font-family: inherit; margin-bottom: 8px; }
    .jpeg-result img { width: 100%; border: 1px solid #D1D1C7; border-radius: 8px; margin-bottom: 10px; display: block; }

    /* ===================== A4 PAGES (PRINT + JPEG EXPORT) ===================== */
    #printRoot { display: none; }
    .a4-page { width: 794px; height: 1122px; background: #fff; color: #1B261E; font-family: 'Inter', 'Inter Fallback', sans-serif; position: relative; overflow: hidden; padding: 32px 38px 24px; display: flex; flex-direction: column; box-sizing: border-box; line-height: 1.3; }
    .a4-page *, .a4-page *::before, .a4-page *::after { box-sizing: border-box; }
    .pg-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #4A5D4E; padding-bottom: 8px; margin-bottom: 12px; }
    .pg-brand { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; }
    .pg-brand small { font-size: 13px; font-weight: 800; color: #6b7360; letter-spacing: 0; margin-left: 8px; }
    .pg-sub { font-size: 12px; font-weight: 800; color: #6b7360; }
    .pg-body { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
    .a4-page.compact .pg-body { gap: 8px; }
    .pg-foot { border-top: 1px solid #D1D1C7; padding-top: 6px; margin-top: 8px; font-size: 10px; font-weight: 700; color: #6b7360; display: flex; justify-content: space-between; gap: 10px; }

    .pc { --k: 1; border: 2px solid #1B261E; border-radius: calc(20px * var(--k)); padding: calc(16px * var(--k)) calc(20px * var(--k)); background: #FDFBF7; box-sizing: border-box; }
    .pc.large { --k: 1.35; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
    .pc.two-up, .pc.half { --k: 1.05; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; }
    .pc.two-up:only-child, .pc.half:only-child { flex: initial; height: 460px; max-height: 480px; }
    .pc.three-up { --k: 0.74; padding: 10px 14px; border-radius: 14px; }
    .pc.large .pc-hand-notes { flex: 1; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
    .pc.large .pc-hand-lines { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
    .pc.two-up .pc-hand-notes, .pc.half .pc-hand-notes { flex: 1; min-height: 85px; display: flex; flex-direction: column; justify-content: space-between; }
    .pc.two-up .pc-hand-lines, .pc.half .pc-hand-lines { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
    .pc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .pc-name { font-size: calc(30px * var(--k)); font-weight: 900; line-height: 1.1; }
    .pc-meta { font-size: calc(14px * var(--k)); font-weight: 700; color: #6b7360; margin-top: 4px; }
    .pc-method { background: #1B261E; color: #fff; font-weight: 900; border-radius: 10px; padding: 6px 14px; font-size: calc(14px * var(--k)); }
    .pc-note { border-radius: 10px; padding: 7px 12px; font-size: calc(13px * var(--k)); font-weight: 800; margin-top: calc(10px * var(--k)); }
    .pc-note.pref { background: #F0F5F1; border: 1px solid #C3D8C7; color: #2C4A31; }
    .pc-note.avoid { background: #FDF2F2; border: 1px solid #F8D7DA; color: #8B0000; }
    .pc-daily { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 8px; margin-top: calc(14px * var(--k)); }
    .pc.large .pc-daily { grid-template-columns: repeat(2, 1fr); }
    .pc-box { border: 1.5px solid #D1D1C7; border-radius: 12px; padding: calc(8px * var(--k)) calc(10px * var(--k)); background: #fff; }
    .pc-box .l { font-size: calc(12px * var(--k)); font-weight: 800; color: #4A5D4E; }
    .pc-box .v { font-size: calc(14.5px * var(--k)); font-weight: 900; }
    .pc-box .s { font-size: calc(10.5px * var(--k)); color: #6b7360; font-weight: 700; }
    .pc-box.dark { background: #4A5D4E; border-color: #4A5D4E; color: #fff; }
    .pc-box.dark .l, .pc-box.dark .s { color: #E3EAE4; }
    .pc-hand-notes { margin-top: calc(12px * var(--k)); border: 1.5px dashed #4A5D4E; border-radius: calc(14px * var(--k)); background: #FFFFFF; padding: calc(10px * var(--k)) calc(14px * var(--k)); page-break-inside: avoid; break-inside: avoid; }
    .pc-hand-notes-head { display: flex; justify-content: space-between; align-items: center; font-size: calc(11.5px * var(--k)); font-weight: 800; color: #4A5D4E; }
    .pc-hand-title { text-transform: uppercase; letter-spacing: 0.3px; }
    .pc-hand-date { color: #7A8472; font-weight: 700; }
    .pc-hand-lines { display: flex; flex-direction: column; gap: calc(10px * var(--k)); margin-top: calc(8px * var(--k)); }
    .pc-hand-line { border-bottom: 1px dashed #CBD5C0; height: calc(14px * var(--k)); }
    .pc-sec { margin-top: calc(16px * var(--k)); font-size: calc(13px * var(--k)); font-weight: 900; color: #4A5D4E; text-transform: uppercase; letter-spacing: .3px; }
    .pc-each { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
    .pc-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
    .pc.large .pc-chips { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pc-chip { border: 1.5px dashed #9AA48A; border-radius: 10px; padding: calc(6px * var(--k)) 8px; text-align: center; background: #fff; }
    .pc-chip b { display: block; font-size: calc(11px * var(--k)); color: #4A5D4E; font-weight: 800; }
    .pc-chip span { font-size: calc(12.5px * var(--k)); font-weight: 900; }

    .bk-title { font-size: 30px; font-weight: 900; }
    .bk-pets { font-size: 13px; font-weight: 700; color: #6b7360; margin-top: 4px; }
    .bk-sec { border-radius: 12px; overflow: hidden; border: 1.5px solid #D1D1C7; }
    .bk-sec-title { background: #4A5D4E; color: #fff; font-weight: 900; font-size: 15px; padding: 9px 16px; }
    .bk-sec.grand .bk-sec-title { background: #1B261E; }
    table.bk-tbl { width: 100%; border-collapse: collapse; }
    table.bk-tbl td { padding: 11px 16px; border-bottom: 1px solid #EBE9E1; font-size: 16px; font-weight: 700; }
    table.bk-tbl td.r { text-align: right; font-weight: 900; }
    table.bk-tbl tr:last-child td { border-bottom: none; }
    .bk-total { display: flex; justify-content: space-between; align-items: center; background: #3A4D1F; color: #fff; border-radius: 14px; padding: 16px 20px; font-size: 22px; font-weight: 900; }
    .bk-note { font-size: 12px; font-weight: 700; color: #6b7360; }

    @media print {
      @page { size: A4 portrait; margin: 0; }
      html, body { background: #fff !important; display: block !important; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; position: static !important; }
      body > *:not(#printRoot) { display: none !important; }
      #printRoot { display: block !important; }
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .a4-page { width: 210mm; height: 296mm; page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid; margin: 0; }
      .a4-page:last-child { page-break-after: auto; break-after: auto; }
      .pc { page-break-inside: avoid; break-inside: avoid; }
    }
    .breed-combo { position: relative; }
    .breed-list {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 100;
      background: #FFFFFF;
      border: 1.5px solid #D1D1C7;
      border-radius: 16px;
      max-height: 220px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    }
    .breed-item { padding: 12px 14px; border-bottom: 1px solid #EBE9E1; font-size: 16px; font-weight: 700; color: #4A5D4E; cursor: pointer; }
    .breed-item:last-child { border-bottom: none; }
    .breed-item:hover, .breed-item:active { background: #F3F1EA; }
    /* sticky headers jump when the iPhone keyboard opens */
    @media (hover: none) { .fixed-header { position: static; } }
    
    /* ===================== SLEEK PET ID CARD ===================== */
    .pcard {
      background: #FFFFFF;
      border-radius: 28px;
      overflow: hidden;
      margin-bottom: 22px;
      border: 1.5px solid #E6E2D8;
      box-shadow: 0 12px 32px rgba(27, 38, 30, 0.08);
      color: #1B261E;
      position: relative;
    }
    .pcard-hero {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 20px;
      background: linear-gradient(135deg, #2D3D30 0%, #1B261E 100%);
      color: #FDFBF7;
    }
    .pcard-avatar {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background: #FFF4E0;
      border: 3px solid #E2B04E;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    }
    .pcard-avatar img, .avatar-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    .doggy-smile-svg, .kitty-smile-svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .pcard-id { flex: 1; min-width: 0; }
    .pcard-name {
      font-size: 22px;
      font-weight: 900;
      line-height: 1.15;
      color: #FDFBF7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -0.3px;
    }
    .pcard-sub {
      font-size: 13px;
      font-weight: 700;
      color: #C9D4C4;
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pcard-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
    .pcard-tag {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 11.5px;
      font-weight: 800;
      color: #FDFBF7;
    }
    .pcard-menu { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
    .pcard-method-pill {
      background: #E2B04E;
      color: #1B261E;
      font-weight: 900;
      font-size: 11.5px;
      padding: 6px 14px;
      border-radius: 20px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 2px 6px rgba(0,0,0,0.18);
      letter-spacing: 0.5px;
    }
    .pcard-icons { display: flex; gap: 6px; }
    .pcard-icon-btn {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      padding: 0;
      transition: background 0.15s;
    }
    .pcard-icon-btn:hover { background: rgba(255,255,255,0.25); }
    .pcard-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
    
    /* Dietary Badges */
    .pcard-diet-pills { display: flex; flex-direction: column; gap: 6px; }
    .pcard-diet-pill {
      font-size: 12px;
      font-weight: 800;
      border-radius: 12px;
      padding: 7px 12px;
      line-height: 1.35;
    }
    .pcard-diet-pill.pref { background: #F0F5F1; color: #2C4A31; border: 1px solid #C3D8C7; }
    .pcard-diet-pill.avoid { background: #FDF2F2; color: #8B0000; border: 1px solid #F8D7DA; }

    /* Unified Nutrition Hero Box */
    .nutri-box {
      background: #F8F6F0;
      border: 1.5px solid #EBE7DD;
      border-radius: 20px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .nutri-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .nutri-left { display: flex; flex-direction: column; }
    .nutri-badge-label { font-size: 10.5px; font-weight: 900; color: #8F9779; letter-spacing: 0.6px; text-transform: uppercase; }
    .nutri-total-row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
    .nutri-total-big { font-size: 28px; font-weight: 900; color: #1B261E; line-height: 1; letter-spacing: -0.5px; }
    .nutri-total-sub { font-size: 12.5px; font-weight: 700; color: #7A8472; }
    .nutri-meal-chip {
      background: #EAE6DB;
      border: 1px solid #DBD5C7;
      border-radius: 14px;
      padding: 6px 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .nutri-meal-lbl { font-size: 11px; font-weight: 800; color: #4A5D4E; }
    .nutri-meal-val { font-size: 13.5px; font-weight: 900; color: #1B261E; margin-top: 1px; }

    .ratio-bar { display: flex; height: 10px; border-radius: 10px; overflow: hidden; background: #E4E0D5; gap: 2px; }
    .ratio-bar i { display: block; min-width: 2px; }

    .nutri-grid {
      display: grid;
      grid-template-columns: repeat(var(--n, 3), 1fr);
      gap: 8px;
    }
    .nutri-tile {
      background: #FFFFFF;
      border: 1px solid #E6E2D8;
      border-radius: 14px;
      padding: 10px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .nutri-tile-title {
      font-size: 11px;
      font-weight: 800;
      color: #636D5A;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .nutri-tile-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
    .nutri-tile-val { font-size: 15px; font-weight: 900; color: #1B261E; margin-top: 2px; }
    .nutri-tile-sub { font-size: 10.5px; font-weight: 800; color: #8F9779; }

    /* Meal Checklist */
    .meal-checklist {
      border-top: 1px solid #ECE8DE;
      padding-top: 12px;
    }
    .meal-checklist-title { font-size: 11px; font-weight: 900; color: #8F9779; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; }
    .meal-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .meal-chip-item {
      background: #F8F6F0;
      border: 1px solid #DED9CD;
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 800;
      color: #4A5D4E;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: inherit;
    }
    .meal-chip-item.checked {
      background: #F0F5F1;
      border-color: #C3D8C7;
      color: #2C4A31;
    }

    /* Card Actions Bar */
    .pcard-actions { display: flex; gap: 8px; margin-top: 4px; }
    .pc-act {
      flex: 1;
      padding: 12px 6px;
      border-radius: 16px;
      border: 1.5px solid #D1D1C7;
      background: #F3F1EA;
      color: #1B261E;
      font-weight: 800;
      font-size: 12.5px;
      cursor: pointer;
      font-family: inherit;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      white-space: nowrap;
    }
    .pc-act.dark { background: #1B261E; border-color: #1B261E; color: #FDFBF7; flex: 1.3; }
    .pc-act.gold { background: #E2B04E; border-color: #E2B04E; }
    .pc-act.unit-btn { flex: 0.7; }

    /* editor avatar */
    .avatar-pick { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
    .avatar-btn { position: relative; width: 92px; height: 92px; border-radius: 50%; border: 3px dashed #8F9779; background: #FFF4E0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; overflow: hidden; }
    .avatar-btn.has { border-style: solid; border-color: #E2B04E; }
    .avatar-cam { position: absolute; right: -2px; bottom: -2px; background: #4A5D4E; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 2px solid #FDFBF7; z-index: 2; }
    .avatar-hint { font-size: 12px; font-weight: 800; color: #8F9779; margin-top: 8px; }
    .avatar-remove { background: none; border: none; color: #A80000; font-weight: 800; font-size: 12px; cursor: pointer; font-family: inherit; margin-top: 2px; }

    .top-actions { display: flex; gap: 8px; margin-bottom: 14px; }
    .top-actions .add-member-btn { flex: 1; margin-bottom: 0; padding: 14px 8px; font-size: 14px; }

    /* PRINT OPTIONS MODAL */
    .print-option-card {
      background-color: #F8F6F0;
      border: 1.5px solid #DED9CD;
      border-radius: 18px;
      padding: 14px 16px;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .print-option-card:hover {
      border-color: #4A5D4E;
      background-color: #FFFFFF;
      box-shadow: 0 4px 14px rgba(74, 93, 78, 0.12);
    }
    .print-opt-top {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .print-opt-icon {
      font-size: 26px;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #EAE6DB;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .print-opt-title {
      font-size: 15px;
      font-weight: 900;
      color: #1B261E;
      line-height: 1.2;
    }
    .print-opt-desc {
      font-size: 12px;
      font-weight: 600;
      color: #6b7360;
      margin-top: 2px;
      line-height: 1.35;
    }
    .print-act-btn {
      padding: 9px 16px;
      border-radius: 12px;
      border: none;
      background: #1B261E;
      color: #FDFBF7;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: inherit;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .print-act-btn:hover {
      background: #4A5D4E;
    }
    .print-density-box {
      background: #FFFFFF;
      border: 1.5px solid #DED9CD;
      border-radius: 16px;
      padding: 12px 14px;
      margin-bottom: 14px;
    }
    .print-density-title {
      font-size: 11.5px;
      font-weight: 800;
      color: #4A5D4E;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 8px;
    }
    .print-density-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .print-density-pill {
      flex: 1;
      min-width: 90px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1.5px solid #D1D1C7;
      background: #F8F6F0;
      color: #1B261E;
      font-size: 11.5px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      text-align: center;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .print-density-pill.active {
      background: #1B261E;
      color: #FDFBF7;
      border-color: #1B261E;
    }
    .print-density-hint {
      font-size: 11px;
      font-weight: 700;
      color: #6b7360;
      margin-top: 8px;
      line-height: 1.35;
    }

    /* simplified export modal */
    .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip { padding: 10px 14px; border-radius: 22px; border: 1.5px solid #D1D1C7; background: #F3F1EA; color: #1B261E; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; }
    .chip.sel { background: #1B261E; border-color: #1B261E; color: #FDFBF7; }
    .export-info { font-size: 12px; font-weight: 700; color: #6b7360; margin-top: 10px; }

    .pc-avatar { width: calc(64px * var(--k)); height: calc(64px * var(--k)); border-radius: 50%; border: 3px solid #4A5D4E; overflow: hidden; font-size: calc(34px * var(--k)); display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0; }
    .pc-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Semantic header styles */
.hero-heading-h1 {
  font-size: 18px;
  font-weight: 900;
  color: var(--cream);
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin: 0;
}

/* Guide, Reference Tables & FAQ semantic classes */
.guide-container {
  margin-top: 32px;
  padding: 24px 20px;
  border-radius: 22px;
  background: rgba(253, 251, 247, 0.05);
  border: 1px solid rgba(163, 173, 139, 0.28);
  color: #C9D4C4;
  font-size: 13.5px;
  line-height: 1.7;
}
.guide-title {
  font-size: 17px;
  font-weight: 900;
  color: #FDFBF7;
  margin-bottom: 12px;
}
.guide-subtitle {
  font-size: 14.5px;
  font-weight: 800;
  color: #E2B04E;
  margin: 20px 0 10px;
}
.guide-list {
  padding-left: 20px;
  margin-bottom: 16px;
}
.guide-list li {
  margin-bottom: 8px;
}
.faq-item {
  margin-bottom: 16px;
}
.faq-question {
  font-size: 14px;
  font-weight: 800;
  color: #FDFBF7;
  margin-bottom: 4px;
}
.faq-answer {
  color: #A3AD8B;
  line-height: 1.6;
}
.table-responsive {
  overflow-x: auto;
  margin: 16px 0 20px;
}
.portion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #FDFBF7;
}
.portion-table th, .portion-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(163, 173, 139, 0.25);
}
.portion-table th {
  background: rgba(253, 251, 247, 0.08);
  color: #E2B04E;
  font-weight: 800;
}
.portion-table tr:hover {
  background: rgba(253, 251, 247, 0.03);
}