/* ==========================================================================
   App-style mobile/tablet shell (mobile-app-version only).
   Desktop (>1180px) is untouched - everything here is gated behind that
   breakpoint, and the *old* web header/mobile-nav/footer are hidden below
   it in favor of this shell. Reuses style.css's color/font tokens exactly.
   ========================================================================== */

/* Per-page content forks: each page keeps its original desktop markup
   wrapped in .app-desktop-only, and adds new app-style markup wrapped in
   .app-mobile-only right alongside it - only one is ever visible. */
.app-mobile-only { display: none; }
@media (max-width: 1180px) {
  .app-desktop-only { display: none !important; }
  .app-mobile-only { display: block; }

  /* Without this, some mobile browsers delay the first tap on a button/card
     by ~300ms while checking whether it's the start of a double-tap-to-zoom
     gesture - the tap can get silently dropped instead of clicking,
     especially right after a panel/step just appeared. Removes that delay
     app-wide (buttons, cards, toggles, tabs) so every tap registers
     immediately on the first touch. */
  button, a, .wd-option-card, .wd-day-pill, .app-tap-card, .app-list-item,
  .app-icon-switch-track, .tab-btn, .pill-toggle button, [role="button"] {
    touch-action: manipulation;
  }
}

@media (max-width: 1180px) {

  /* Hide the original website-style chrome entirely in app mode. */
  .site-header, .mobile-nav, .site-footer { display: none !important; }

  html, body { overflow-x: hidden; }
  body { padding-top: 60px; padding-bottom: 76px; background: var(--mist); }
  body.app-sheet-open { overflow: hidden; }

  /* ---------------------------------------------------------------------
   * Sticky top bar
   * ------------------------------------------------------------------- */
  .app-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    height: 60px;
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0 1rem;
    background: var(--navy);
    color: #fff;
  }
  .app-topbar-back {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1); border: none; color: #fff; flex-shrink: 0;
  }
  /* Centered independent of the back button / avatar, so it never shifts
     off-center depending on which of those happen to be showing. */
  .app-topbar-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 42px; width: auto; }
  #appTopbarAuthSlot { margin-left: auto; }
  .app-topbar-action {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12); border: none; color: #fff; flex-shrink: 0;
  }
  .app-topbar-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--amber), var(--teal));
    color: var(--navy-deep); font-weight: 800; font-size: 0.95rem; flex-shrink: 0;
  }

  /* ---------------------------------------------------------------------
   * Fixed bottom navigation
   * ------------------------------------------------------------------- */
  .app-bottomnav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 0.4rem 0.2rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px -16px rgba(11,28,46,0.3);
  }
  .app-bottomnav a, .app-bottomnav button {
    flex: 1; min-width: 0; border: none; background: none;
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.35rem 0.15rem;
    color: #93a5ae;
    font-size: 0.64rem; font-weight: 700;
    border-radius: 12px;
  }
  .app-bottomnav a svg, .app-bottomnav button svg { width: 21px; height: 21px; }
  .app-bottomnav a.is-active, .app-bottomnav button.is-active { color: var(--teal); background: var(--mist); }

  /* ---------------------------------------------------------------------
   * Portrait lock - full-screen block in landscape on phones/tablets
   * ------------------------------------------------------------------- */
  .app-rotate-lock { display: none; }
}

@media (max-width: 1180px) and (orientation: landscape) {
  .app-topbar, .app-bottomnav, .app-screen { display: none !important; }
  .app-rotate-lock {
    display: flex; position: fixed; inset: 0; z-index: 999;
    flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
    background: var(--navy-deep); color: #fff; text-align: center; padding: 2rem;
  }
  .app-rotate-lock svg { width: 64px; height: 64px; animation: appRotateHint 1.8s ease-in-out infinite; }
  .app-rotate-lock h2 { font-family: var(--font-display); font-size: 1.3rem; }
  .app-rotate-lock p { color: rgba(255,255,255,0.7); font-size: 0.9rem; max-width: 320px; }
}
@keyframes appRotateHint { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }

@media (min-width: 1181px) {
  .app-topbar, .app-bottomnav, .app-rotate-lock { display: none !important; }
  /* The app top bar's account sheet (auth.js) is appended straight to
     <body>, outside the (hidden-on-desktop) topbar, so it needs its own
     explicit hide here - otherwise it has no positioning rules at this
     width and just dumps inline at the bottom of the page. */
  #appAccountSheetWrap { display: none !important; }
  /* Same story again: the "More" sheet (site-header.php) is shared chrome
     living outside .app-mobile-only, with no pre-existing desktop CSS
     hiding it by default (unlike #resultPanel/#calResult, which already
     had their own display:none-until-revealed rules from the original
     site). Needs an explicit hide here too. */
  #appMoreSheet, #appMoreSheetBackdrop { display: none !important; }
  /* Same story: app-mobile.js inserts .app-icon-switch directly next to
     whatever .pill-toggle it's replacing (not inside an .app-mobile-only
     wrapper), so it needs an explicit hide here too, and the original
     .pill-toggle it superseded must stay visible on desktop. */
  .app-icon-switch { display: none !important; }
  .app-toggle-superseded { display: flex !important; }
}

@media (max-width: 1180px) {
  /* The referral link input + Copy button were staying side-by-side and
     overflowing the paywall/account sheet's width on narrow phones - stack
     them instead so nothing ever gets cut off regardless of link length. */
  .fs-referral-link-row { flex-direction: column; }
  .fs-referral-link-row input { width: 100%; }
  .fs-copy-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   App content components (used inside .app-screen on mobile/tablet only -
   all scoped under 1180px so desktop's existing layout is never touched)
   ========================================================================== */
@media (max-width: 1180px) {

  .app-screen { padding: 1rem 1rem 1.5rem; }
  .app-section-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 1.3rem 0 0.7rem; }
  .app-section-title:first-child { margin-top: 0; }

  /* Segmented tab control (e.g. AI Photo vs Navy Method) */
  .app-tabs { display: flex; background: var(--mist); border-radius: 999px; padding: 0.25rem; gap: 0.25rem; }
  .app-tabs button {
    flex: 1 1 0%; min-width: 0; border: none; background: none; padding: 0.6rem 0.5rem;
    border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--navy);
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    white-space: nowrap;
  }
  .app-tabs button.is-active { background: var(--navy); color: #fff; }
  .app-tabs button svg { flex-shrink: 0; }

  /* Two toggles side by side (e.g. gender + front/back on Exercise Finder) */
  .app-toggle-row { display: flex; gap: 0.6rem; margin-bottom: 1.1rem; }
  .app-toggle-row .app-tabs { flex: 1; }
  .app-toggle-row .app-tabs button { padding: 0.55rem 0.3rem; font-size: 0.8rem; }

  /* Compact icon toggle switch (Male/Female, Front/Back) - one pill-shaped
     track with a sliding colored thumb (icon inside), current state named
     in a label underneath. Tapping the track flips to the other state. */
  .app-icon-switch { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
  .app-icon-switch-track {
    position: relative; width: 64px; height: 32px;
    background: var(--mist); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 0; border-width: 1.5px;
    outline: none; -webkit-tap-highlight-color: transparent;
  }
  .app-icon-switch-track:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  .app-icon-switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--teal); color: #fff;
    transition: transform 0.32s cubic-bezier(.4, 0, .2, 1), background 0.32s ease;
  }
  /* "female"/"back" are the semantic states Exercise Finder + the generic
     pill-toggle converter both use for gender; "b" is the generic converter's
     fallback for any non-gender 2-option toggle (Units, etc.) - same slide,
     a neutral navy instead of a state-specific color. */
  .app-icon-switch[data-state="female"] .app-icon-switch-thumb { transform: translateX(30px); background: var(--amber); color: var(--navy-deep); }
  .app-icon-switch[data-state="back"] .app-icon-switch-thumb,
  .app-icon-switch[data-state="b"] .app-icon-switch-thumb { transform: translateX(30px); background: var(--navy); }
  .app-icon-switch-label { font-size: 0.78rem; font-weight: 700; color: var(--navy); }
  .app-icon-switch-text { font-size: 0.62rem; font-weight: 800; }

  /* Any .pill-toggle anywhere in the app (Gender, Units, etc.) gets
     auto-converted to the sliding icon-switch above by app-mobile.js -
     the original segmented-pill markup it built from stays in the DOM
     (for its real click handlers) but is hidden here. */
  .app-toggle-superseded { display: none !important; }

  /* exercise-finder.css sets display:inline-flex on these directly, which
     beats the plain [hidden] attribute (equal specificity, later source) -
     force them off since the icon switches above are what's shown instead. */
  #efDiagramScreen > .ef-gender-toggle[hidden],
  #efDiagramScreen > .ef-view-toggle[hidden] { display: none !important; }

  /* Grid of tappable cards (home tools, muscle groups, equipment) */
  .app-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .app-tap-card {
    background: #fff; border-radius: var(--radius-md); border: 1px solid var(--line);
    padding: 1rem 0.9rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
    box-shadow: var(--shadow-card);
  }
  .app-tap-card .app-icon-badge {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(24,192,252,0.16), rgba(12,144,216,0.08));
    color: var(--teal);
  }
  .app-tap-card h3 { font-size: 0.92rem; font-weight: 700; color: var(--navy); }
  .app-tap-card p { font-size: 0.76rem; color: #6c8894; line-height: 1.35; }
  .app-tap-card.is-selected { border-color: var(--teal); background: rgba(24,192,252,0.06); }

  /* Wide full-bleed card (video, hero content) */
  .app-media-card { border-radius: var(--radius-md); overflow: hidden; background: var(--navy-deep); position: relative; box-shadow: var(--shadow-card); }
  .app-media-card img { width: 100%; display: block; }
  /* Video/iframe fill their aspect-ratio box completely (they have no
     natural size to base width:100% on the way an <img> does, so without
     this they rendered at a tiny intrinsic size - reading as "not showing
     fully" and making the player's own fullscreen control too small to use). */
  .app-media-card video, .app-media-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
  .app-media-card video { object-fit: contain; background: #000; }
  .app-media-card .app-play-btn {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  }
  .app-media-card .app-play-btn svg { width: 52px; height: 52px; color: #fff; opacity: 0.92; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
  .app-media-card .app-fullscreen-btn {
    position: absolute; bottom: 0.6rem; right: 0.6rem; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: rgba(5,21,30,0.65); color: #fff; display: flex; align-items: center; justify-content: center;
  }
  .app-media-card .app-fullscreen-btn svg { width: 18px; height: 18px; }

  /* Simple list row (blog posts, diary entries, FAQ) */
  .app-list-item {
    display: flex; align-items: center; gap: 0.8rem;
    background: #fff; border-radius: var(--radius-md); border: 1px solid var(--line);
    padding: 0.85rem 0.9rem; margin-bottom: 0.6rem; box-shadow: var(--shadow-card);
  }
  .app-list-item .app-icon-badge { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--mist); color: var(--teal); flex-shrink: 0; }
  .app-list-item-body { flex: 1; min-width: 0; }
  .app-list-item-body h4 { font-size: 0.88rem; font-weight: 700; color: var(--navy); }
  .app-list-item-body p { font-size: 0.76rem; color: #6c8894; margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-list-item .chev { color: #b7c6cc; flex-shrink: 0; }

  /* Bottom sheet (filters, details, forms) */
  .app-sheet-backdrop { position: fixed; inset: 0; background: rgba(5,21,30,0.55); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
  .app-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .app-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 401;
    background: #fff; border-radius: 22px 22px 0 0;
    max-height: 82vh; overflow-y: auto;
    padding: 0.6rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 -20px 50px -20px rgba(5,21,30,0.4);
  }
  .app-sheet.is-open { transform: translateY(0); }
  .app-sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--line); margin: 0.6rem auto 1rem; }
  /* Every sheet's only way to close - tapping the backdrop no longer does. */
  .app-sheet-close {
    position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: #e0392f; color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .app-sheet-close svg { width: 15px; height: 15px; }
  .app-sheet-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 0.8rem; padding-right: 2.4rem; }

  /* Primary action button (app-style, full width, thumb-friendly) */
  .app-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.95rem; border-radius: 14px; border: none;
    background: var(--navy); color: #fff; font-weight: 700; font-size: 0.92rem;
  }
  .app-btn-secondary { background: var(--mist); color: var(--navy); }
  .app-btn-outline { background: none; border: 1.5px solid var(--line); color: var(--navy); }

  /* Gender picker (Exercise Finder step 1) - big tappable cards */
  .app-gender-picker { display: flex; gap: 1rem; }
  .app-gender-picker button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    background: #fff; border: 2px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.6rem 1rem; color: var(--navy); box-shadow: var(--shadow-card);
  }
  .app-gender-picker button span { font-weight: 700; font-size: 0.95rem; }
  .app-gender-picker button.is-active { border-color: var(--teal); background: rgba(24,192,252,0.06); color: var(--teal); }

  /* Step header with a back button (diagram step, etc.) */
  .app-step-back-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
  .app-step-back { position: static; background: var(--mist); color: var(--navy); }

  /* Body diagram, sized up for easy tapping on a phone (vs. the desktop's 300px sidebar widget) */
  .app-diagram-wrap { max-width: 100%; padding: 1.2rem 0.8rem 3rem; }

  /* Horizontal chip row (equipment filters, etc.) */
  .app-chip-row button {
    flex-shrink: 0; border: 1.5px solid var(--line); background: #fff; color: var(--navy);
    font-size: 0.8rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 999px; white-space: nowrap;
  }
  .app-chip-row button.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

  /* FAQ accordion, reused as-is but tightened to fit the compact app layout */
  .app-faq-wrap .faq { padding: 0; background: none; }
  .app-faq-wrap .faq-bg { display: none; }
  .app-faq-wrap .faq .container { padding: 0; max-width: none; }
  .app-faq-wrap .faq .section-head { display: none; }
  .app-faq-wrap .faq-grid { gap: 0.6rem; }
  .app-faq-wrap .faq-item { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }

  /* Empty/placeholder state */
  .app-empty { text-align: center; padding: 2.5rem 1rem; color: #6c8894; }
  .app-empty svg { width: 44px; height: 44px; margin-bottom: 0.8rem; color: #b7c6cc; }

  /* ===================================================================
     Body Fat Checker / Calorie Calculator / Workout Diary - restyled in
     place (no duplicate markup needed, these are all plain buttons/inputs)
     per the "start straight into the tool, no hero card" instruction.
     =================================================================== */
  .tool-hero { display: none !important; }
  .tool-section { padding: 1rem 0 1.5rem; }
  .tool-section .container { padding: 0 1rem; max-width: none; }
  .tool-shell { padding: 0; background: none; box-shadow: none; border: none; }

  .tab-switch {
    display: flex; background: var(--mist); border-radius: 999px; padding: 0.25rem; gap: 0.25rem;
    margin-bottom: 1.2rem; width: 100%;
  }
  .tab-switch .tab-btn {
    flex: 1 1 0%; min-width: 0; border: none; background: none; padding: 0.6rem 0.4rem;
    border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--navy);
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  }
  .tab-switch .tab-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  .tab-switch .tab-btn.is-active { background: var(--navy); color: #fff; }

  .tool-intro { margin-bottom: 1rem; }
  .tool-intro h2 { font-size: 1.1rem; }
  .tool-intro p { font-size: 0.82rem; }

  /* Straight from the intro text to the upload action - no disclaimer box
     in between (still shown further down, just not front-and-center). */
  /* Scoped to Photo Check's AI disclaimer specifically - contact.php reuses
     this same class for its "message sent" success confirmation, which must
     stay visible. */
  #panel-photo .honesty-note { display: none !important; }

  .pc-intro-grid { display: flex; flex-direction: column; gap: 1rem; }
  .pc-card { border-radius: var(--radius-md); }
  .pc-receive-card { padding: 1.2rem; }
  .pc-figure { max-width: 100px; margin-inline: auto; }
  /* Upload card first, ahead of the "what you'll receive" card, so it sits
     immediately under the intro text. */
  .pc-upload-card { padding: 1.5rem 1rem; order: -1; }

  /* #navyForm (and similar) render narrower than their container here for
     reasons unrelated to this row - force full width directly so the two
     switches always have room to sit on one line instead of wrapping. */
  #navyForm, .tool-shell form { width: 100%; }
  /* tools.css has its own legacy @media (max-width: 640px) rule setting
     flex-direction: column here (from before this app-mobile project
     existed) - override it explicitly, since not mentioning a property at
     all doesn't beat an earlier rule that does set it. */
  .toggle-row { display: flex; flex-direction: row; gap: 0.6rem; flex-wrap: nowrap; width: 100%; margin-bottom: 1rem; align-items: flex-start; }
  .toggle-row > div { flex: 1 1 0%; min-width: 0; }
  .pill-toggle { display: flex; background: var(--mist); border-radius: 999px; padding: 0.25rem; }
  .pill-toggle button {
    flex: 1 1 0%; min-width: 0; border: none; background: none; padding: 0.55rem 0.3rem;
    border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--navy);
  }
  .pill-toggle button.is-active { background: var(--navy); color: #fff; }

  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

  /* Numeric result panel becomes a bottom sheet instead of an inline block -
     opened via body-fat.js/calorie-calculator.js's mobile-aware reveal. */
  #resultPanel.app-sheet { padding-top: 0.6rem; }
  #resultPanel .result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  #resultPanel .result-actions .btn { width: 100%; justify-content: center; }

  /* Shared submit-button row (Body Fat's Navy Method form + Calorie
     Calculator's form) - original tools.css never set justify-content,
     so it defaulted to left-aligned on a full-width mobile column. */
  .calc-actions { justify-content: center; }
  .calc-actions .btn { width: 100%; justify-content: center; }

  /* ===================================================================
     Calorie Calculator - same restyle-in-place approach as Body Fat.
     =================================================================== */
  .cal-shell { padding: 0; background: none; box-shadow: none; border: none; }
  .cal-banner { display: none; } /* redundant with the (now visible) tool-intro-style heading elsewhere on the page */
  .cal-shell-body { padding: 0; }
  .cal-activity-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
  .cal-activity-card {
    display: flex; align-items: center; gap: 0.8rem; text-align: left;
    padding: 0.8rem 0.9rem; border-radius: var(--radius-md); border: 1.5px solid var(--line); background: #fff;
  }
  .cal-activity-card.is-active { border-color: var(--teal); background: rgba(24,192,252,0.06); }
  .cal-activity-icon { flex-shrink: 0; width: 34px; height: 34px; }
  .cal-activity-title { font-size: 0.88rem; font-weight: 700; color: var(--navy); display: block; }
  .cal-activity-desc { font-size: 0.74rem; color: #6c8894; display: block; }

  .select-wrap select { width: 100%; padding: 0.8rem 0.9rem; border-radius: var(--radius-md); border: 1.5px solid var(--line); font-size: 0.88rem; }

  #calResult.app-sheet { padding-top: 1.4rem; }
  .cal-result-grid { display: flex; flex-direction: column; gap: 1.2rem; }
  .cal-ring-wrap { max-width: 170px; margin-top: 0.5rem; margin-inline: auto; }
  /* 2-up instead of the original's 3-across-desktop stretched to full width
     in a single column, which read as oversized/blocky on a phone. */
  .cal-goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.2rem; }
  .cal-goals-grid .cal-goal-card:last-child { grid-column: 1 / -1; }
  .cal-goal-card { padding: 0.8rem 0.7rem; gap: 0.3rem; }
  .cal-goal-icon { width: 26px; height: 26px; }
  .cal-goal-icon svg { width: 13px; height: 13px; }
  .cal-goal-label { font-size: 0.68rem; }
  .cal-goal-value { font-size: 1.15rem; }
  .cal-macros { display: flex; justify-content: space-around; gap: 0.5rem; }
  .cal-macro-ring-wrap { max-width: 64px; }
  /* calorie.css's own <640px rule nudges .cal-macro-pct up with a negative
     margin-top, which pushes the percentage text out of the ring instead of
     centering it inside - undo that here so it stays centered in the circle. */
  .cal-macro-pct { margin-top: 0; }
  .cal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1rem; }
  .cal-actions .btn { width: 100%; justify-content: center; }
}