/* Member area (js/member.js): the header icon, the side panel on every page, and member.html */
.mb-btn { position: relative; text-decoration: none; }
/* Not a member yet: a warm glowing ring around the profile icon (a pseudo-element, so only opacity and transform move),
   and on a computer the icon widens into a "Jadi member" pill. Signed in it is the plain icon again. */
.mb-btn-l { display: none; }
.mb-btn.mb-cta { --mb-glow: 176, 66, 44; color: rgb(var(--mb-glow)); border-color: rgba(var(--mb-glow), .4); background: rgba(var(--mb-glow), .08); }
.mb-btn.mb-cta::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(var(--mb-glow), .28), 0 0 18px 3px rgba(222, 150, 70, .55); opacity: .2; animation: mb-glow 2.8s ease-in-out infinite; }
@keyframes mb-glow { 0%, 100% { opacity: .15; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
.sw-tab-hidden .mb-btn.mb-cta::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mb-btn.mb-cta::after { animation: none; opacity: .7; transform: none; } }
html:not(.app-mode) .mb-btn.mb-cta { width: auto; gap: 7px; padding: 0 15px 0 11px; display: inline-flex; align-items: center; font: inherit; font-size: 14px; font-weight: 700; }
html:not(.app-mode) .mb-btn.mb-cta .mb-btn-l { display: inline; white-space: nowrap; }
.mb-btn.mb-cta:hover { background: rgba(var(--mb-glow), .14); }
.mb-btn .mb-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #c8553d; box-shadow: 0 0 0 2px var(--bg); }

.mb-veil { position: fixed; inset: 0; z-index: 90; background: rgba(26, 14, 10, .42); opacity: 0; pointer-events: none; transition: opacity .3s; }
.mb-side { position: fixed; z-index: 91; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: var(--bg); color: var(--text); box-shadow: -24px 0 60px rgba(26, 14, 10, .18);
  transform: translateX(104%); transition: transform .42s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; visibility: hidden; }
.mb-open .mb-veil { opacity: 1; pointer-events: auto; }
.mb-open .mb-side { transform: none; visibility: visible; }
.mb-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; padding-top: max(18px, env(safe-area-inset-top)); }
.mb-head .eyebrow { margin: 0; }
.mb-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); display: grid; grid-auto-rows: max-content; gap: 18px; align-content: start; }
.mb-hi { font-family: var(--display); font-size: 30px; line-height: 1.1; margin: 0; }
.mb-hi em { color: var(--accent); font-weight: 300; }
.mb-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

  background: radial-gradient(120% 90% at 100% 0%, #8a5a42 0%, transparent 60%), linear-gradient(150deg, #5a3728, #2e1b16); }

.mb-sec h3 { font-family: var(--display); font-size: 19px; font-weight: 400; margin: 0 0 10px; }
.mb-tickets { display: grid; gap: 10px; }
.mb-ticket { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); position: relative; }
.mb-ticket::before { content: ""; position: absolute; left: 52px; top: 10px; bottom: 10px; border-left: 1.5px dashed var(--line); }
.mb-ticket i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--a100); color: var(--a700); font-style: normal; }
.mb-ticket div { padding-left: 6px; }
.mb-ticket b { display: block; font-size: 15px; }
.mb-ticket span { font-size: 12.5px; color: var(--muted); }
.mb-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.mb-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 14px; }
.mb-row + .mb-row { border-top: 1px solid var(--line); }
.mb-row span { color: var(--muted); font-size: 13px; text-align: right; }
.mb-row.past { opacity: .62; }
.mb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mb-actions .pill { justify-content: center; }
.mb-link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; justify-self: start; }
.mb-muted { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.55; }

.mb-form { display: grid; gap: 12px; }
.mb-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.mb-form input { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.mb-form input:focus { outline: 2px solid var(--a300); outline-offset: 1px; }
/* WhatsApp number: the country code (Indonesia by default) and the number side by side, then a line on why it matters */
.mb-tel { display: flex; gap: 8px; min-width: 0; }
.mb-tel select { flex: none; max-width: 42%; font: inherit; font-size: 16px; font-weight: 400; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.mb-tel select:focus { outline: 2px solid var(--a300); outline-offset: 1px; }
.mb-tel input { flex: 1; min-width: 0; }
.mb-hint { margin: -6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--accent); }
.mb-form button { border: 0; cursor: pointer; font: inherit; font-weight: 600; justify-content: center; }
.mb-form button:disabled { opacity: .6; cursor: progress; }
/* The links that swap sign-in and sign-up: one quiet group under a hairline, left-aligned even when a line wraps */
.mb-swaps { display: grid; gap: 0; justify-items: start; padding-top: 4px; margin-top: 2px; border-top: 1px solid var(--line); }
.mb-form .mb-swaps .mb-link { font-weight: 500; font-size: 13.5px; line-height: 1.45; text-align: left; text-underline-offset: 3px; padding: 10px 0; }   /* ~40px tall to tap */
.mb-note { display: grid; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent, #752619) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #752619) 22%, transparent); font-size: 14px; line-height: 1.5; }
.mb-note > b { font-size: 15px; }
.mb-err { color: #b3402a; font-size: 13.5px; margin: 0; min-height: 0; }
/* on the dark palettes the brick red falls to ~2.4:1: a lighter coral reads at 5:1+ */
:root:not(.app-mode):not([data-theme="light"]) .mb-err, :root.app-mode:is([data-pal="mist"], [data-pal="espresso"]) .mb-err { color: #f08f72; }
.mb-rules { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mb-rules li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.mb-rules li b { min-width: 74px; padding: 4px 10px; border-radius: 999px; background: var(--a100); color: var(--a800); font-size: 12px; text-align: center; }
/* the light palettes keep the dark ramp's --a100/--a800 (pale on pale): tint from the accent instead */
:root.app-mode:is([data-pal="latte"], [data-pal="blush"]) .mb-rules li b { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--text); }

/* member.html: the same pieces with a sidebar of sections on wide screens (like an account page) */
.mb-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 32px 0 72px; align-items: start; }
.mb-tabs { position: sticky; top: 96px; display: grid; gap: 4px; }
.mb-tabs a { padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 15px; }
.mb-tabs a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mb-tabs a.on { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mb-main { display: grid; gap: 28px; max-width: 640px; }
.mb-main section { scroll-margin-top: 96px; }
@media (max-width: 760px) {
  .mb-page { grid-template-columns: 1fr; padding-top: 16px; gap: 16px; }
  .mb-tabs { position: sticky; top: 64px; z-index: 5; display: flex; overflow-x: auto; gap: 6px; padding: 8px 0; background: var(--bg); scrollbar-width: none; }
  .mb-tabs a { white-space: nowrap; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .mb-side, .mb-veil { transition: none; } }
/* Buttons that look like the pills (member.html on a computer opens the side panel with them) */
.mb-actions button.pill { cursor: pointer; font: inherit; }
.mb-actions button.pill-outline { background: none; color: inherit; }
.mb-door { padding: 22px; border: 1px solid var(--line); border-radius: 22px; }
.mb-sample { opacity: .92; }
.mb-door .mb-actions { margin-top: 16px; }
.mb-actions button.pill-outline { border: 1px solid var(--line); }
.app-mode .page-hero:has(+ .mb-page) { padding-top: 18px; }

/* Promo offer as a ticket (side panel, member.html, the phone sheet) */
.mb-promo { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.mb-promo::before, .mb-promo::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--bg); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.mb-promo::before { left: -9px; clip-path: inset(0 0 0 50%); }
.mb-promo::after { right: -9px; clip-path: inset(0 50% 0 0); }
.mb-promo-tag { display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mb-promo-label { font-family: var(--display); font-size: 30px; line-height: 1.1; font-weight: 500; }
.mb-promo-title { font-weight: 600; }
.mb-promo small { color: var(--muted); }
.mb-promo-note, .mb-promo-ok { margin: 6px 0 0; font-size: 14px; }
.mb-promo-ok { font-weight: 600; color: var(--accent); }
.mb-promo-ok::before { content: "✓ "; }
.mb-promo.ok { border-style: solid; }
/* Vouchers a member holds */
.mb-vouchers { display: grid; gap: 10px; }
.mb-voucher { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.mb-voucher > div { display: grid; gap: 2px; min-width: 0; }
.mb-voucher b { font-size: 16px; }
.mb-voucher span { font-size: 14px; }
.mb-voucher small { color: var(--muted); font-size: 12.5px; }
.mb-voucher code { flex: none; font: 600 11.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.mb-voucher.used, .mb-voucher.expired { opacity: .55; }
/* Phones: the offer in a bottom sheet, above the Photobooth button */
.mb-sheet { position: fixed; inset: 0; z-index: 150; }
.mb-sheet-veil { position: absolute; inset: 0; background: rgba(26, 14, 10, .5); opacity: 0; transition: opacity .26s; }
.mb-sheet-card { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 14px; padding: 26px 20px; padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0; background: var(--bg); color: var(--text); transform: translateY(104%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.mb-sheet.in .mb-sheet-veil { opacity: 1; }
.mb-sheet.in .mb-sheet-card { transform: none; }
.mb-sheet-x { position: absolute; top: 12px; right: 12px; }
.mb-sheet .mb-actions { display: grid; gap: 8px; }
.mb-sheet .mb-actions .pill { justify-content: center; text-align: center; padding: 13px 16px; }
@media (prefers-reduced-motion: reduce) { .mb-sheet-card, .mb-sheet-veil { transition: none; } }
.mb-promo-label { font-size: clamp(22px, 6.2vw, 30px); }
.mb-sheet-card { padding-top: 58px; }
/* "Pernah foto sebelum punya akun": the request and where it stands */
.mb-claim { margin: 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 14px; }
.mb-claimform { padding-top: 4px; border-top: 1px solid var(--line); }
.mb-form label small { font-weight: 400; }

/* A promo's own page (promo.html, /promo/KODE) */
.pm { display: grid; gap: clamp(28px, 5vw, 48px); padding-block: clamp(28px, 6vw, 64px); max-width: 980px; }
.pm-hero { display: grid; gap: 18px; max-width: 560px; margin: 0 auto; width: 100%; text-align: left; }
.pm-hero .mb-promo { padding: 22px 24px; }
.pm-hero .mb-promo-label { font-size: clamp(30px, 7vw, 44px); }
.pm-skel { min-height: 150px; opacity: .6; }
.pm-act { display: grid; gap: 12px; }
.pm-act .mb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-act .pill { padding: 13px 20px; }
.pm-h { font-size: 22px; margin: 4px 0 0; }
.pm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pm-steps > div { padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.pm-steps b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.pm-steps h3 { margin: 10px 0 4px; font-size: 17px; }
.pm-steps p { margin: 0; color: var(--muted); font-size: 14px; }
.pm-faq { max-width: 680px; }
.pm-faq h2 { font-size: 24px; margin: 0 0 10px; }
.pm-faq details { padding: 2px 0; border-top: 1px solid var(--line); }
.pm-faq summary { cursor: pointer; font-weight: 600; padding: 10px 0; }   /* the whole row is the tap target */
.pm-faq p { margin: 0 0 10px; color: var(--muted); }
@media (max-width: 720px) { .pm-steps { grid-template-columns: 1fr; } }

/* "Unduh app" (js/install.js), phones only: a solid pill on the left of the header, and a wide button under the member card */
.sw-dl-pill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--maroon, #752619); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(117, 38, 25, .7); transition: transform .15s, box-shadow .15s; }
.sw-dl-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(117, 38, 25, .8); }
.sw-dl-pill:focus-visible, .sw-dl-card:focus-visible { outline: 2px solid var(--maroon, #752619); outline-offset: 2px; }
.sw-dl-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; font: inherit;
  background: linear-gradient(135deg, #8a2f1f, #5a1d13); color: #fff; box-shadow: 0 12px 26px -16px rgba(90, 29, 19, .9); transition: transform .15s; }
.sw-dl-card:hover { transform: translateY(-1px); }
.sw-dl-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.sw-dl-txt { display: grid; gap: 2px; min-width: 0; }
.sw-dl-txt b { font-size: 15px; }
.sw-dl-txt small { font-size: 12.5px; opacity: .85; }
.sw-dl-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.sw-dl-head img { border-radius: 14px; flex: none; }
.sw-dl-head b { display: block; font-size: 17px; }
.sw-dl-head small { color: var(--muted, #8a7a72); font-size: 13px; }
.sw-dl-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; }
.sw-dl-sheet .mb-sheet-card { padding-top: 26px; }
.sw-dl-apk { display: grid; gap: 8px; }
.sw-dl-apk .pill { padding: 13px 18px; font-size: 15px; }
.sw-dl-size { white-space: nowrap; }
.sw-installed .sw-dl-pill, .sw-installed .sw-dl-card { display: none; }
@media (display-mode: standalone) { .sw-dl-pill, .sw-dl-card { display: none; } }
/* Phones only (the app layout .app-mode, or a touch screen): a computer shows neither the header pill nor the card
   button. In the phone header the logo sits in the middle and the icons on the right, so the pill takes the empty left */
.sw-dl-left, .sw-dl-card { display: none; }
.app-mode .sw-dl-card { display: flex; }
@media (hover: none) and (pointer: coarse) { .sw-dl-card { display: flex; } }
.app-mode .sw-dl-left { --dl-bg: rgba(176, 66, 44, .12); --dl-ink: #b0422c; --dl-line: rgba(176, 66, 44, .32);
  display: inline-flex; position: absolute; left: max(14px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%);
  height: 34px; padding: 0 12px 0 10px; gap: 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--dl-bg); color: var(--dl-ink); border: 1px solid var(--dl-line); box-shadow: none; }
.app-mode .sw-dl-left:hover { transform: translateY(-50%); box-shadow: none; }
.app-mode .sw-dl-left:active { transform: translateY(-50%) scale(.96); }
.app-mode .sw-dl-left svg { width: 15px; height: 15px; }
/* a computer: the steps as a card in the corner instead of a sheet across the screen */
@media (min-width: 720px) { .sw-dl-sheet .mb-sheet-card { left: auto; right: 24px; bottom: 24px; width: 440px; border-radius: 22px; padding-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .sw-dl-pill, .sw-dl-card { transition: none; } }
@media (max-width: 359px) { .app-mode .sw-dl-left { width: 34px; padding: 0; justify-content: center; } .app-mode .sw-dl-left span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Phones: the bottom bar on the sign-in, sign-up and promo pages (actionBar in js/member.js), like the booking page's:
   what is next, a dot per field filled, one button for the next step. It takes the floating Photobooth button's place
   and steps aside while the keyboard is up */
.mb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--line); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.mb-bar[hidden] { display: none; }
.mb-bar.away { transform: translateY(110%); }
.mb-bar > div { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; }
.mb-bar-sum { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.mb-bar-sum b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-bar-sum > span { color: var(--muted); }
.mb-bar-dots { display: flex; gap: 4px; margin-top: 6px; }
.mb-bar-dots i { width: 18px; height: 3px; border-radius: 3px; background: var(--line); }
.mb-bar-dots i.on { background: var(--accent); }
.mb-bar-go { flex: none; padding: 13px 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .15s; }
.mb-bar-go:active { transform: scale(.97); }
.mb-bar-go.send { background: var(--accent); color: var(--on-accent); }
.mb-barred .tabbar { display: none; }
.mb-barred main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .mb-bar { transition: none; } }
/* sign-up closed: the admin's WhatsApp instead of a dead end */
.mb-form .mb-wa { justify-content: center; }
/* Promo page on phones: the three steps as one compact list, so the offer and its action stay on the first screen */
@media (max-width: 720px) {
  .pm-steps { gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
  .pm-steps > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 12px 14px; border: 0; border-radius: 0; background: none; }
  .pm-steps > div + div { border-top: 1px solid var(--line); }
  .pm-steps b { grid-row: span 2; width: 26px; height: 26px; font-size: 13px; }
  .pm-steps h3 { margin: 2px 0 2px; font-size: 15px; }
  .pm-steps p { font-size: 13px; }
}

/* A history request's code: sent to the desk from the old card's own Instagram or WhatsApp */
.mb-claimcode { display: grid; gap: 10px; }
.mb-claimcode p { margin: 0; }
.mb-code { display: flex; align-items: center; gap: 12px; }
.mb-code code { font: 600 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line); background: var(--surface); color: var(--text); }

/* Akun: the member's photo or brand logo on their card (js/member.js photoHtml) */
.mb-photo { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.mb-photo.busy { opacity: .6; pointer-events: none; }
.mb-photo-av { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #752619; color: #fbf7f2; border: 2px solid #ecc07f; font: 600 28px var(--display, Georgia, serif); }
.mb-photo-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-photo-av.logo { background: #fbf7f2; border-radius: 16px; } .mb-photo-av.logo img { object-fit: contain; padding: 8px; }
.mb-photo-txt { display: grid; gap: 8px; min-width: 0; }
.mb-photo .mb-up { cursor: pointer; font-size: 14px; padding: 9px 16px; }
.mb-photo .mb-link { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 9px 4px; }
@media (max-width: 420px) { .mb-photo { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; } .mb-photo-av { width: 60px; height: 60px; } }