/* AZNA /my-account — Zai's "Welcome Page.psd" (1223×1907), reproduced 1:1.
   Every number below is read from the PSD layers (psd-tools) — font, size, tracking,
   colour, layer-effect (fill/stroke/gradient) and the ink position of each element —
   not eyeballed from a flattened export. Text boxes use line-height:1, so with Cera's
   metrics (ascent .80em / descent .20em) the box top = baseline − .8×size and the
   margins are the PSD distances between those boxes.

   Selectors are prefixed `html body.page-id-8778 .azma-app` (0,3,2): the theme's own
   inline skin uses `body.page-id-8778 .azma-*` (0,2,1) with !important and is printed
   AFTER this sheet, so both importance and specificity are needed to win. Markup is the
   theme's azma-* structure. v4 (2026-09-03). */

/* ── page frame: white, edge to edge, no dark card ── */
html body.page-id-8778 .azma-app, html body.page-id-8778 .azma-app * { box-sizing: border-box; }
html body.page-id-8778 .azma-app { background: #fff !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; color: #1d1d1d !important; max-width: none !important; width: auto !important;
  margin: 0 !important; padding: 0 0 70px !important; font-family: Cera, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  /* the PSD's counts and dates use lining figures; the theme's Cera defaults to old-style */
  font-variant-numeric: lining-nums !important; font-feature-settings: "lnum" 1 !important; }
html body.page-id-8778 .azma, html body.page-id-8778 .azma-app .azma-appbody, html body.page-id-8778 .azma-app .azma-main,
html body.page-id-8778 .azma-app .azma-main > * { background-color: transparent !important; }
html body.page-id-8778 .azma-app .azma-appbar { display: none !important; }
html body.page-id-8778 .azma-app .azma-appbody { display: flex !important; flex-direction: column !important;
  align-items: stretch !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* ── WELCOME: Cera Regular 50, black, no tracking; box 258–308 = 38 under the breadcrumb bar ── */
html body.page-id-8778 .azma-app .azma-h--wel { order: 0; text-align: center !important; color: #000 !important;
  font-family: Cera, sans-serif !important; font-weight: 400 !important; font-size: 50px !important; line-height: 1 !important;
  letter-spacing: 0 !important; text-indent: 0 !important; text-transform: uppercase !important;
  margin: 38px 0 0 !important; padding: 0 !important; }

/* ── tab row: 16px stroke icons, Cera Regular 14 #525252 labels 8px under them, active
      label #272727 with a 2px #37aab4 rule 9px under the label, 14px wider each side ── */
html body.page-id-8778 .azma-app .azma-nav { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  justify-content: center !important; align-items: flex-start !important; gap: 0 9px !important;
  border: 0 !important; background: none !important; padding: 0 !important; margin: 28px auto 0 !important; width: 100% !important; }
/* Audit 2026-09-03 (pixel scan of the PSD): icon ink is 15–16px with a 1px stroke and stays
   #9a9a9a even on the active tab; labels are #434343 (#272727 active) with their baseline
   10px above the rule. 18px boxes with a 1.333 stroke render the 24-unit glyphs at that size. */
html body.page-id-8778 .azma-app .azma-navi { display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 8px !important; color: #434343 !important; font-family: Cera, sans-serif !important; font-size: 14px !important;
  font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
  text-decoration: none !important; padding: 0 14px 7px !important; margin: 0 !important; border: 0 !important;
  border-bottom: 2px solid transparent !important; background: none !important; border-radius: 0 !important; width: auto !important; }
html body.page-id-8778 .azma-app .azma-navi svg, html body.page-id-8778 .azma-app .azma-navi .azma-ic {
  width: 18px !important; height: 18px !important; stroke-width: 1.333 !important; color: #9a9a9a !important; margin: 0 !important; }
/* the share glyph is drawn 12×16 in the PSD (narrower than the other four) */
html body.page-id-8778 .azma-app .azma-navi:nth-child(4) svg { width: 16px !important; height: 18px !important; }
html body.page-id-8778 .azma-app .azma-navi:hover { color: #272727 !important; }
html body.page-id-8778 .azma-app .azma-navi.azma-navon { color: #272727 !important; border-bottom-color: #37aab4 !important; }
html body.page-id-8778 .azma-app .azma-navrule { display: none !important; }

/* ── the 761px column (PSD x 250–1011), centred ── */
html body.page-id-8778 .azma-app .azma-main { width: 761px !important; max-width: 100% !important;
  margin: 0 auto !important; padding: 0 !important; flex: none !important; }

/* ── stat tiles: 240×84 #f3f3f3 r4, 20px apart; label Cera Bold 20 .18em #4a4a4a, count Cera Bold 31 #1d1d1d ── */
html body.page-id-8778 .azma-app .azma-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important; margin: 39px 0 0 !important; padding: 0 !important; }
/* Corner radii: Zai (2026-09-03) asked for the soft, forhers.com-style rounding on the
   tiles, banner, cards and meter instead of the PSD's 3-4px — 24px on the boxes, a full
   pill on the 39px banner (24px is more than half its height anyway). */
html body.page-id-8778 .azma-app .azma-stat { display: flex !important; flex-direction: column !important; align-items: center !important;
  height: 84px !important; background: #f3f3f3 !important; border: 0 !important; border-radius: 24px !important;
  padding: 15px 4px 12px !important; margin: 0 !important; text-align: center !important; }
html body.page-id-8778 .azma-app .azma-statlab { display: block !important; color: #4a4a4a !important; font-family: Cera, sans-serif !important;
  font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .18em !important;
  text-indent: .18em !important; text-transform: uppercase !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; }
html body.page-id-8778 .azma-app .azma-statn { display: block !important; color: #1d1d1d !important; font-family: Cera, sans-serif !important;
  font-size: 31px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .04em !important; text-indent: .04em !important;
  margin: 6px 0 0 !important; padding: 0 !important; }

/* ── refer banner: 761×39, PS gradient 77° (#4dbbb6 → #81d4d0), Cera Medium 17 .18em white ── */
html body.page-id-8778 .azma-app .azma-refbar { display: block !important; height: 39px !important; line-height: 39px !important;
  /* the PSD's gradient overlay is two flat teals meeting in a ~52px seam at the centre, not a wash across the bar */
  text-align: center !important; background: linear-gradient(13deg, #4dbbb6 calc(50% - 26px), #81d4d0 calc(50% + 26px)) !important; color: #fff !important;
  font-family: Cera, sans-serif !important; font-size: 17px !important; font-weight: 500 !important; letter-spacing: .18em !important;
  text-indent: .18em !important; text-transform: uppercase !important; border: 0 !important; border-radius: 999px !important;
  padding: 0 !important; margin: 29px 0 0 !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; }
html body.page-id-8778 .azma-app .azma-refbar:hover { filter: brightness(1.04); color: #fff !important; }

/* ── section labels: Cera Bold 20 .18em #4a4a4a, centred, 44×1 black rule 8px under the box ── */
html body.page-id-8778 .azma-app .azma-main .azma-lab.azma-sec, html body.page-id-8778 .azma-app .azma-main .azma-h:not(.azma-h--wel) {
  display: block !important; position: relative !important; text-align: center !important; color: #4a4a4a !important;
  font-family: Cera, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important;
  letter-spacing: .18em !important; text-indent: .18em !important; text-transform: uppercase !important;
  margin: 53px 0 0 !important; padding: 0 0 9px !important; border: 0 !important; background: none !important; }
html body.page-id-8778 .azma-app .azma-main .azma-lab.azma-sec::after, html body.page-id-8778 .azma-app .azma-main .azma-h:not(.azma-h--wel)::after {
  content: '' !important; position: absolute !important; left: 50% !important; bottom: 0 !important; transform: translateX(-50%) !important;
  width: 44px !important; height: 1px !important; background: #000 !important; }
/* the first label (NEXT APPOINTMENT) sits 38 under the banner */
html body.page-id-8778 .azma-app .azma-refbar + .azma-lab.azma-sec { margin-top: 38px !important; }
/* The tabs' own headings are gone (the big title says APPOINTMENTS / ORDERS / … instead,
   Zai 2026-09-03), so whatever comes first in a tab sits where the tiles do: 39 under the row */
html body.page-id-8778 .azma-app .azma-main > .azma-h:first-child,
html body.page-id-8778 .azma-app .azma-main > .azma-lab.azma-sec:first-child,
html body.page-id-8778 .azma-app .azma-main > .azma-blank:first-child,
html body.page-id-8778 .azma-app .azma-main > .azma-sub:first-child,
html body.page-id-8778 .azma-app .azma-main > .azma-card:first-child { margin-top: 39px !important; }
html body.page-id-8778 .azma-app .azma-sub { color: #8a8a8a !important; text-align: center !important; font-size: 13px !important; }

/* ── cards: white, 2px #f3f3f3 stroke OUTSIDE the column (PSD outer stroke), r3 ── */
html body.page-id-8778 .azma-app .azma-card { display: block !important; background: #fff !important; border: 2px solid #f3f3f3 !important; border-radius: 24px !important;
  box-shadow: none !important; color: #1d1d1d !important; text-align: center !important;
  width: calc(100% + 4px) !important; margin: 11px -2px 0 !important; padding: 31px 22px 26px !important; }
/* the theme lays the card out as a flex row (content left, actions right); the PSD centres everything */
html body.page-id-8778 .azma-app .azma-cardin, html body.page-id-8778 .azma-app .azma-cardin > div:not(.azma-acts) { display: block !important; text-align: center !important; color: #1d1d1d !important;
  padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; flex: none !important; }
html body.page-id-8778 .azma-app .azma-cardbar { display: none !important; }
/* upcoming appointment: RESCHEDULE and CANCEL as two identical small outlined pills, faded to
   the grey of the "Bethesda, MD" line, 14px apart (Zai 2026-09-03) */
html body.page-id-8778 .azma-app .azma-cardin > .azma-acts, html body.page-id-8778 .azma-app .azma-acts { display: flex !important; flex-direction: row !important;
  flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 14px !important; margin: 18px 0 0 !important;
  padding: 0 !important; width: 100% !important; }   /* the theme stacks these as a column, which stretched each pill to the card width */
/* .azma-cardin in the selector out-ranks the BOOK NOW pill rule below (same class count otherwise);
   flex:none stops the theme stretching CANCEL to the full card width */
html body.page-id-8778 .azma-app .azma-card .azma-cardin .azma-acts .azma-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 26px !important; margin: 0 !important; padding: 0 16px !important;
  background: #fff !important; color: #8a8a8a !important; border: 1px solid #d0d0d0 !important; border-radius: 13px !important;
  font-family: Cera, sans-serif !important; font-size: 11px !important; font-weight: 700 !important;
  line-height: 1 !important; letter-spacing: .12em !important; text-indent: .12em !important; text-transform: uppercase !important; text-decoration: none !important; }
html body.page-id-8778 .azma-app .azma-card .azma-cardin .azma-acts .azma-btn:hover { color: #1d1d1d !important; border-color: #1d1d1d !important; background: #fff !important; }
html body.page-id-8778 .azma-app .azma-card .azma-svc { font-family: Cera, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: #0d0d0d !important;
  text-transform: uppercase !important; letter-spacing: .04em !important; }   /* Zai: the service in caps */
html body.page-id-8778 .azma-app .azma-card .azma-with { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #4a4a4a !important; margin-top: 6px !important; }
html body.page-id-8778 .azma-app .azma-card .azma-when, html body.page-id-8778 .azma-app .azma-card .azma-where { display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; font-size: 15px !important; color: #1d1d1d !important; margin-top: 10px !important; }
html body.page-id-8778 .azma-app .azma-card .azma-where { font-size: 13px !important; color: #8a8a8a !important; margin-top: 4px !important; }
html body.page-id-8778 .azma-app .azma-card .azma-svc, html body.page-id-8778 .azma-app .azma-card .azma-with { color: #1d1d1d !important; }
/* "NO UPCOMING APPOINTMENTS": Cera Regular 17 at 47% black, then the 137×30 black pill 20 below */
html body.page-id-8778 .azma-app .azma-empty p, html body.page-id-8778 .azma-app .azma-empty .azma-svc,
html body.page-id-8778 .azma-app .azma-sub-empty { color: rgba(0, 0, 0, .47) !important; font-family: Cera, sans-serif !important;
  font-size: 17px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important;
  text-transform: uppercase !important; margin: 0 !important; padding: 0 !important; }
html body.page-id-8778 .azma-app .azma-card .azma-btn.azma-btn--teal, html body.page-id-8778 .azma-app .azma-empty .azma-btn--teal,
html body.page-id-8778 .azma-app a.azma-btn.azma-btn--teal { display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 137px !important; height: 30px !important; margin: 20px auto 0 !important; padding: 0 !important;
  background: #0d0d0d !important; color: #fff !important; border: 0 !important; border-radius: 15px !important;
  font-family: Cera, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important;
  letter-spacing: .12em !important; text-indent: .12em !important; text-transform: uppercase !important; text-decoration: none !important; }
html body.page-id-8778 .azma-app .azma-card .azma-btn.azma-btn--teal:hover { background: #2b2b2b !important; color: #fff !important; }

/* ── recent visits: one card each, 38 apart; date Cera Bold 17 #0d0d0d, service Cera Regular 17 #4cbbb5 caps, price Cera Regular 15 #4a4a4a ── */
html body.page-id-8778 .azma-app .azma-past { display: flex !important; flex-direction: column !important; gap: 38px !important;
  list-style: none !important; padding: 0 !important; margin: 15px -2px 0 !important; width: calc(100% + 4px) !important; border: 0 !important; }
/* Zai 2026-09-03: past visits use the SAME layout as the next-appointment card — service
   title in bold caps, WITH STYLIST, the long date with the calendar glyph, then the price in
   the quiet grey. (The PSD's date/teal-service/price stack is superseded.) */
html body.page-id-8778 .azma-app .azma-past li { list-style: none !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important; background: #fff !important; border: 2px solid #f3f3f3 !important;
  border-radius: 24px !important; padding: 28px 16px 24px !important; margin: 0 !important; gap: 0 !important; }
html body.page-id-8778 .azma-app .azma-pv-svc { display: block !important; order: 1 !important; color: #0d0d0d !important; font-family: Cera, sans-serif !important;
  font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: .04em !important;
  text-transform: uppercase !important; margin: 0 !important; max-width: 420px !important; }
html body.page-id-8778 .azma-app .azma-pv-with { display: block !important; order: 2 !important; color: #4a4a4a !important; font-family: Cera, sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .12em !important; text-transform: uppercase !important; margin: 6px 0 0 !important; }
html body.page-id-8778 .azma-app .azma-pv-when { display: inline-flex !important; order: 3 !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  color: #1d1d1d !important; font-family: Cera, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1 !important;
  letter-spacing: 0 !important; text-transform: none !important; margin: 10px 0 0 !important; }
html body.page-id-8778 .azma-app .azma-pv-when svg { width: 15px !important; height: 15px !important; color: #9a9a9a !important; stroke-width: 1.5 !important; flex: none !important; }
html body.page-id-8778 .azma-app .azma-pv-price { display: block !important; order: 4 !important; color: #8a8a8a !important; font-family: Cera, sans-serif !important;
  font-size: 13px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; margin: 4px 0 0 !important; }
html body.page-id-8778 .azma-app .azma-past li.azma-cx { opacity: .55 !important; }
html body.page-id-8778 .azma-app .azma-past li.azma-cx .azma-pv-when, html body.page-id-8778 .azma-app .azma-past li.azma-cx .azma-pv-svc,
html body.page-id-8778 .azma-app .azma-past li.azma-cx .azma-pv-with, html body.page-id-8778 .azma-app .azma-past li.azma-cx .azma-pv-price { color: #9c9c9c !important; text-decoration: line-through !important; }

/* ── pager "1 2 3 4": Cera Bold 17 #4cbbb5, 24 under the last card ── */
html body.page-id-8778 .azma-app .azma-pages { display: flex !important; justify-content: center !important; gap: 11px !important;
  margin: 24px 0 0 !important; padding: 0 !important; line-height: 1 !important; }
html body.page-id-8778 .azma-app .azma-pages a { color: #4cbbb5 !important; font-family: Cera, sans-serif !important; font-size: 17px !important;
  font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; }
html body.page-id-8778 .azma-app .azma-pages a.on { text-decoration: none !important; }   /* PSD: all four digits identical */
html body.page-id-8778 .azma-app .azma-more { display: block !important; text-align: center !important; color: #4cbbb5 !important; font-size: 13px !important; margin-top: 14px !important; }

/* ── FREE CUT meter: 765×141 #f3f3f3 panel (outer stroke); 39px bar = the gradient with the dark
      #2d2d2d part growing from the left as referrals come in; "FREE CUT" Cera Bold 17 tracked .78em;
      "1/2" Cera Bold 34 .18em #212121; CLICK HERE TO SHARE Cera Bold 17 #000 + 16×21 share glyph ── */
html body.page-id-8778 .azma-app .azma-freecut { width: calc(100% + 4px) !important; max-width: none !important; margin: 33px -2px 0 !important;
  padding: 0 0 18px !important; background: #f3f3f3 !important; border-radius: 24px !important; overflow: hidden !important; text-align: center !important; }
html body.page-id-8778 .azma-app .azma-fc-bar { position: relative !important; height: 39px !important; border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important; background: linear-gradient(13deg, #4dbbb6 calc(50% - 30px), #81d4d0 calc(50% + 30px)) !important; }
html body.page-id-8778 .azma-app .azma-fc-bar i { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important;
  display: block !important; background: #2d2d2d !important; transition: width .4s ease !important; }
html body.page-id-8778 .azma-app .azma-fc-bar span { position: relative !important; z-index: 1 !important; display: block !important;
  color: #fff !important; font-family: Cera, sans-serif !important; font-size: 17px !important; font-weight: 700 !important;
  letter-spacing: .78em !important; text-indent: .78em !important; line-height: 39px !important; text-transform: uppercase !important; }
html body.page-id-8778 .azma-app .azma-fc-n { color: #212121 !important; font-family: Cera, sans-serif !important; font-size: 34px !important;
  font-weight: 700 !important; line-height: 1 !important; letter-spacing: .18em !important; text-indent: .18em !important;
  margin: 18px 0 0 !important; padding: 0 !important; }
html body.page-id-8778 .azma-app .azma-fc-share { display: inline-flex !important; align-items: center !important; gap: 10px !important;
  height: 21px !important; margin: 10px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; cursor: pointer !important; color: #000 !important;
  font-family: Cera, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important;
  letter-spacing: .01em !important; text-transform: uppercase !important; }
/* 21px box → the 24-unit share drawing renders 16×21 like the PSD's Layer 29 */
html body.page-id-8778 .azma-app .azma-fc-share svg { width: 21px !important; height: 21px !important; stroke-width: 1.7 !important; color: #000 !important; transform: translateY(-2px) !important; }
html body.page-id-8778 .azma-app .azma-fc-share:hover { color: #4cbbb5 !important; }
html body.page-id-8778 .azma-app .azma-fc-earned { color: #4a9e6e !important; font-size: 13px !important; margin-top: 10px !important; }

/* ── Referrals tab ── */
html body.page-id-8778 .azma-app .azma-refcode { text-align: center !important; font-family: Cera, sans-serif !important; font-size: 40px !important;
  font-weight: 700 !important; letter-spacing: .3em !important; text-indent: .3em !important; color: #1d1d1d !important; margin: 22px 0 8px !important; }
html body.page-id-8778 .azma-app .azma-main button.azma-ref-sharebtn, html body.page-id-8778 .azma-app .azma-ref-sharebtn { display: block !important;
  margin: 12px auto 8px !important; background: linear-gradient(13deg, #4dbbb6 calc(50% - 26px), #81d4d0 calc(50% + 26px)) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; letter-spacing: .18em !important; text-indent: .18em !important; text-transform: uppercase !important;
  padding: 0 32px !important; height: 39px !important; line-height: 39px !important; font-family: Cera, sans-serif !important;
  font-size: 17px !important; font-weight: 500 !important; cursor: pointer !important; }
html body.page-id-8778 .azma-app .azma-reflink { text-align: center !important; color: #9c9c9c !important; font-size: 12px !important; word-break: break-all !important; margin-bottom: 8px !important; }
html body.page-id-8778 .azma-app .azma-refstats { margin-top: 20px !important; }

/* ── the other tabs reuse the dashboard language ──
   Orders / Notes empty boxes: the same white card as NEXT APPOINTMENT, not the theme's grey box */
html body.page-id-8778 .azma-app .azma-blank { display: block !important; background: #fff !important; border: 2px solid #f3f3f3 !important;
  border-radius: 24px !important; width: calc(100% + 4px) !important; margin: 11px -2px 0 !important; padding: 36px 22px !important; text-align: center !important; }
html body.page-id-8778 .azma-app .azma-blank svg { width: 22px !important; height: 22px !important; color: #9a9a9a !important; stroke-width: 1.5 !important; }
html body.page-id-8778 .azma-app .azma-blank .azma-blankh, html body.page-id-8778 .azma-app .azma-blankh { display: block !important; text-align: center !important;
  color: rgba(0, 0, 0, .47) !important; font-family: Cera, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: 0 !important;
  text-transform: uppercase !important; margin: 14px 0 0 !important; padding: 0 !important; }
html body.page-id-8778 .azma-app .azma-blank .azma-sub { display: block !important; text-align: center !important; font-size: 13px !important; color: #8a8a8a !important;
  text-transform: none !important; letter-spacing: 0 !important; margin: 8px auto 0 !important; max-width: 420px !important; }
/* everything in the column is centred (the Account tab's links under the card were hugging the left) */
html body.page-id-8778 .azma-app .azma-main { text-align: center !important; }
/* Account tab: label / value rows, both readable, inside the card */
html body.page-id-8778 .azma-app .azma-tbl { width: 100% !important; max-width: 440px !important; margin: 0 auto !important; border-collapse: collapse !important; }
html body.page-id-8778 .azma-app .azma-tbl td { display: table-cell !important; text-align: left !important; vertical-align: middle !important;
  padding: 12px 10px !important; font-family: Cera, sans-serif !important; font-size: 15px !important; color: #1d1d1d !important;
  border-bottom: 1px solid #f3f3f3 !important; background: none !important; }
html body.page-id-8778 .azma-app .azma-tbl tr:last-child td { border-bottom: 0 !important; }
html body.page-id-8778 .azma-app .azma-tbl td.azma-lab { width: 34% !important; text-align: right !important; font-size: 11px !important;
  font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #8a8a8a !important; margin: 0 !important; }
html body.page-id-8778 .azma-app .azma-main .azma-more { display: inline-block !important; margin: 18px 12px 0 !important; color: #1d1d1d !important;
  font-family: Cera, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important;
  text-transform: uppercase !important; text-decoration: none !important; }
html body.page-id-8778 .azma-app .azma-main .azma-more:hover { text-decoration: underline !important; }

/* forms readable on white */
html body.page-id-8778 .azma-app .azma-main input, html body.page-id-8778 .azma-app .azma-main textarea, html body.page-id-8778 .azma-app .azma-main select {
  background: #fff !important; color: #1d1d1d !important; border: 1px solid #ddd !important; }
html body.page-id-8778 .azma-app .azma-main label { color: #6a6a6a !important; }

/* ── tablet band (601–800px): the column is narrower than 765, so keep the cards inside it ── */
@media (max-width: 800px) {
  html body.page-id-8778 .azma-app .azma-main { padding: 0 16px !important; }
  html body.page-id-8778 .azma-app .azma-card, html body.page-id-8778 .azma-app .azma-past, html body.page-id-8778 .azma-app .azma-freecut,
  html body.page-id-8778 .azma-app .azma-blank { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}
/* ── phone: the same design in one column; only the three tiles have to shrink to fit 3-up ── */
@media (max-width: 600px) {
  html body.page-id-8778 .azma-app .azma-main { padding: 0 14px !important; }
  /* five tabs have to fit a ~315px row: smaller labels, tighter pads, and never let an
     item shrink below its label (that is what made the labels overlap on Zai's phone) */
  html body.page-id-8778 .azma-app .azma-nav { gap: 0 2px !important; }
  html body.page-id-8778 .azma-app .azma-navi { padding: 0 5px 9px !important; font-size: 11px !important; flex: 0 0 auto !important; white-space: nowrap !important; }
  html body.page-id-8778 .azma-app .azma-h--wel { font-size: 40px !important; }
  html body.page-id-8778 .azma-app .azma-stats { gap: 8px !important; }
  html body.page-id-8778 .azma-app .azma-statlab { font-size: 11px !important; letter-spacing: .12em !important; text-indent: .12em !important; }
  html body.page-id-8778 .azma-app .azma-statn { font-size: 24px !important; }
  html body.page-id-8778 .azma-app .azma-stat { height: 70px !important; padding: 13px 2px 10px !important; }
  html body.page-id-8778 .azma-app .azma-refbar { font-size: 11px !important; letter-spacing: .14em !important; text-indent: .14em !important; }
  html body.page-id-8778 .azma-app .azma-main .azma-lab.azma-sec, html body.page-id-8778 .azma-app .azma-main .azma-h:not(.azma-h--wel) { font-size: 16px !important; }
  html body.page-id-8778 .azma-app .azma-card, html body.page-id-8778 .azma-app .azma-past, html body.page-id-8778 .azma-app .azma-freecut {
    width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body.page-id-8778 .azma-app .azma-card { padding: 24px 14px 22px !important; }
  html body.page-id-8778 .azma-app .azma-pv-svc { font-size: 15px !important; }
  html body.page-id-8778 .azma-app .azma-fc-bar span { letter-spacing: .5em !important; text-indent: .5em !important; font-size: 15px !important; }
  html body.page-id-8778 .azma-app .azma-fc-share { font-size: 15px !important; }
  html body.page-id-8778 .azma-app .azma-refcode { font-size: 30px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   Sign-in screens — "login step 1.psd" and "Enter Code Page.psd" (468×659), 1:1.
   The theme prints its own V11 skin (body.page-id-8778:not(.logged-in) .azf-*) with
   !important; these out-rank it and only correct what differs from the PSD layers.
   ══════════════════════════════════════════════════════════════════════════════════ */
/* bar bottom 75 → WELCOME box (Cera Bold 50, lh 1) at 128: 53px */
html body.page-id-8778:not(.logged-in) .azf-bar, html body.page-id-8778:not(.logged-in) .azma-left { margin: 0 0 53px !important; padding: 16px 0 !important; }
html body.page-id-8778:not(.logged-in) .azf-h { color: #000 !important; line-height: 1 !important; margin: 0 !important; letter-spacing: .12em !important; text-indent: .12em !important; }
/* TO AZNA SALON: Cera Light 18 .42em, baseline 193 → box 179 */
html body.page-id-8778:not(.logged-in) .azf-sub { color: #000 !important; line-height: 1 !important; margin: 1px 0 0 !important; }
/* LOGIN / SIGN UP: Cera Bold 28 .12em black; LOGIN box 245 (48 under the sub), field 8 under it */
html body.page-id-8778:not(.logged-in) .azf-sect { color: #000 !important; line-height: 1 !important; margin: 48px 0 8px !important; letter-spacing: .12em !important; text-indent: .12em !important; }
html body.page-id-8778:not(.logged-in) .azf-sect.azf-sect2 { margin: 31px 0 7px !important; }
/* field: 405×52 #e6e6e6 r4, placeholder Cera Bold 15 .12em #343434 */
/* corner radii from a pixel fit of the login PSD: field/buttons 9, VERIFY 8, RESEND 6, code boxes 4 */
html body.page-id-8778:not(.logged-in) .azf-in { border-radius: 9px !important; color: #343434 !important; font-weight: 700 !important; }
html body.page-id-8778:not(.logged-in) .azf-in::placeholder { color: #343434 !important; font-weight: 700 !important; opacity: 1 !important; }
html body.page-id-8778:not(.logged-in) .azf-in::-webkit-input-placeholder { color: #343434 !important; font-weight: 700 !important; }
/* CONTINUE / CREATE ACCOUNT: 405×52 r4, Cera Bold 15 .12em white, teal #4cbbb5 / black #1d1d1d */
html body.page-id-8778:not(.logged-in) .azf-btn { background: #4cbbb5 !important; border-radius: 9px !important; font-weight: 700 !important; margin-top: 14px !important; letter-spacing: .12em !important; text-indent: .12em !important; }
html body.page-id-8778:not(.logged-in) .azf-btn:hover { background: #43a9a3 !important; }
html body.page-id-8778:not(.logged-in) .azf-btn2 { background: #1d1d1d !important; border-radius: 9px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-indent: .12em !important; }
/* OR: Cera Bold 13 .12em black on a 1px #1d1d1d rule, box 433 (34 under CONTINUE) */
html body.page-id-8778:not(.logged-in) .azf-or { margin: 34px 0 0 !important; gap: 7px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; color: #000 !important; letter-spacing: .12em !important; }
html body.page-id-8778:not(.logged-in) .azf-or span { margin-right: -.12em !important; }
html body.page-id-8778:not(.logged-in) .azf-or::before, html body.page-id-8778:not(.logged-in) .azf-or::after { background: #1d1d1d !important; height: 1px !important; }
/* fine print: 12px at 53% black, one colour, no underline (PSD) */
html body.page-id-8778:not(.logged-in) .azf-fine { margin: 10px 0 0 !important; color: rgba(29, 29, 29, .53) !important; line-height: 1.6 !important; font-size: 12px !important; }
html body.page-id-8778:not(.logged-in) .azf-fine a { color: inherit !important; text-decoration: none !important; }
html body.page-id-8778:not(.logged-in) .azf-fine a:hover { text-decoration: underline !important; }

/* enter code: ENTER CODE box 233 (36 under the sub); note Cera Regular 12 black, 2 lines, 3 under it */
html body.page-id-8778:not(.logged-in) .azma-h { color: #000 !important; line-height: 1 !important; margin: 36px 0 0 !important; letter-spacing: .12em !important; text-indent: .12em !important; }
html body.page-id-8778:not(.logged-in) .azma-sub { color: #000 !important; font-size: 12px !important; line-height: 1.2 !important; margin: 3px auto 0 !important; max-width: 230px !important; }
html body.page-id-8778:not(.logged-in) .azma-lab { margin: 6px 0 5px !important; line-height: 1 !important; }
/* six 46×56 boxes 8 apart (315 across), 1px #747775 r2, digit Cera Regular 26 #424242 */
html body.page-id-8778:not(.logged-in) .azf-code-row { width: 316px !important; max-width: 100% !important; height: 56px !important; gap: 8px !important; margin: 0 !important; }
html body.page-id-8778:not(.logged-in) .azf-code-box { width: 46px !important; height: 56px !important; flex: 0 0 46px !important;
  border: 1px solid #747775 !important; border-radius: 4px !important; font-size: 26px !important; font-weight: 400 !important; color: #424242 !important; }
/* RESEND CODE: 125×28 pill 12 under the boxes, 1px #3e3e3e at 48%, Cera Regular 12 .02em #3e3e3e */
html body.page-id-8778:not(.logged-in) .azf-resend { margin: 11px 0 0 !important; width: 125px !important; height: 28px !important;
  border: 1px solid rgba(62, 62, 62, .48) !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: .02em !important; color: #3e3e3e !important; text-decoration: none !important; background: none !important; }
html body.page-id-8778:not(.logged-in) .azf-resend:hover { background: #1d1d1d !important; color: #fff !important; border-color: #1d1d1d !important; }
/* VERIFY: 314×52 teal r3, Cera Bold 15 .12em, 21 under the pill */
html body.page-id-8778:not(.logged-in) .azma-btn { margin: 20px 0 0 !important; background: #4cbbb5 !important; border-radius: 8px !important;
  font-weight: 700 !important; letter-spacing: .12em !important; text-indent: .12em !important; width: 314px !important; max-width: 100% !important; }
/* RESET PASSWORD / CANCEL: Cera Bold 12 .12em #1d1d1d, 13 under VERIFY, 7 apart, no underline */
html body.page-id-8778:not(.logged-in) .azma-foot { margin-top: 13px !important; gap: 7px !important; }
html body.page-id-8778:not(.logged-in) .azf-reset, html body.page-id-8778:not(.logged-in) .azf-cancel, html body.page-id-8778:not(.logged-in) .azma-foot a {
  font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .12em !important;
  color: #1d1d1d !important; text-decoration: none !important; text-transform: uppercase !important; }
html body.page-id-8778:not(.logged-in) .azma-foot a:hover { text-decoration: underline !important; }
@media (max-width: 600px) {
  html body.page-id-8778:not(.logged-in) .azf-bar { margin-bottom: 53px !important; }
  html body.page-id-8778:not(.logged-in) .azf-h { font-size: 50px !important; }
  html body.page-id-8778:not(.logged-in) .azf-sub { font-size: 18px !important; }
}