/* ── Hộ chiếu bếp — screen styles, from the "Recipe App - Desktop" mockup.
   The phone layout lives in mobile.css; the server picks one per request, so
   only one of the two is ever loaded. Anything that depends on the chosen
   cuisine (accent, tint, deep, band, gradients) stays inline in the templates,
   because it is data.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --font-heading: "Baloo 2", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --line: rgba(32, 30, 29, .08);
  --line-strong: rgba(32, 30, 29, .14);
}

body {
  background: #e7e2d8;
  padding: 24px;
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; }

/* The app window. Cuisine colours arrive as --accent/--tint/--deep/--band. */
.win {
  width: min(1360px, 100%);
  min-width: 1140px;
  margin: 0 auto;
  height: min(880px, calc(100vh - 48px));
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 24px 60px rgba(46, 43, 37, .22);
  position: relative;
  display: flex;
  flex-direction: column;
}

.sc { overflow-y: auto; scrollbar-width: thin; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.scr { animation: fadeUp .24s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) { .scr { animation: none; } }

/* Cuisine-pattern stand-in shown wherever a photo has not been generated yet. */
.img-fallback { width: 100%; height: 100%; overflow: hidden; }
.img-fallback > span { display: block; width: 100%; height: 100%; opacity: .16; }

.eyebrow {
  font: 600 11.5px var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
}
.eyebrow-light { color: rgba(255, 255, 255, .8); }

/* ── Welcome / cook / login: image on one side, panel on the other ─────── */

.split-screen {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr);
  min-height: 0;
}
.split-image { position: relative; overflow: hidden; }
.split-panel { padding: 48px 44px 36px; min-width: 0; }

.welcome-title { margin: 12px 0 0; color: #fff; font-size: 46px; line-height: 1.05; }
.welcome-lede {
  color: rgba(255, 255, 255, .72);
  font: 400 16px/1.6 var(--font-body);
  margin: 14px 0 26px;
  max-width: 44ch;
}

.country-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.country-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  border-radius: 16px;
  padding: 12px 14px;
  color: #fff;
  text-decoration: none;
  transition: background .15s ease;
}
.country-card:hover { background: rgba(255, 255, 255, .13); }
.country-code {
  width: 38px; height: 38px; flex: none;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--font-body);
}
.country-card-text { min-width: 0; }
.country-card-name { display: block; font: 700 14px var(--font-body); white-space: nowrap; }
.country-card-count { display: block; font: 400 11.5px var(--font-body); opacity: .6; }

.welcome-admin {
  display: inline-block;
  margin-top: 22px;
  font: 600 12.5px var(--font-body);
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
}
.welcome-admin:hover { color: #fff; }

/* ── App chrome ────────────────────────────────────────────────────────── */

.topbar {
  flex: none;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.topbar-brand {
  font: 700 15px var(--font-heading);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.country-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.country-row::-webkit-scrollbar { display: none; }
.country-chip {
  flex: none;
  white-space: nowrap;
  border: 1px solid rgba(32, 30, 29, .12);
  border-radius: 999px;
  padding: 7px 13px;
  font: 600 12.5px var(--font-body);
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
}
.country-chip:hover:not(.is-on) { background: rgba(32, 30, 29, .05); }

.serv-stepper {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(32, 30, 29, .12);
  border-radius: 999px;
  padding: 5px 6px 5px 14px;
  margin: 0;
}
.serv-label { font: 600 12.5px var(--font-body); white-space: nowrap; }

.step-btn {
  width: 30px; height: 30px;
  border-radius: 999px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.step-btn-minus { border: 1px solid rgba(32, 30, 29, .15); background: #fff; }
.step-btn-plus { border: 0; background: var(--accent); }

.section-nav { flex: none; display: flex; gap: 6px; }
.nav-pill {
  border: 0;
  background: var(--tint);
  color: var(--color-text);
  border-radius: 999px;
  padding: 9px 14px;
  font: 600 12.5px var(--font-body);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-pill.is-on { background: var(--accent); color: #fff; }

.shell-body { flex: 1; min-height: 0; display: flex; background: var(--tint); }

.sidebar {
  width: clamp(232px, 19%, 264px);
  flex: none;
  border-right: 1px solid var(--line);
  padding: 22px 20px 30px;
  overflow-y: auto;
}
.side-heading {
  font: 600 11px var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0 0 12px;
}
.side-heading + .chip-wrap { margin-bottom: 26px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-wrap form { margin: 0; display: contents; }

.chip {
  cursor: pointer;
  white-space: nowrap;
  font: 600 12px var(--font-body);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  color: var(--color-text);
  display: flex; align-items: center; gap: 7px;
}
.chip-dot { padding-left: 7px; }
.chip-bullet { width: 12px; height: 12px; border-radius: 999px; background: var(--accent); }
.chip.is-on { background: var(--accent); color: #fff; }
.chip.is-on .chip-bullet { background: rgba(255, 255, 255, .55); }

.side-admin-link {
  display: block;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 11px;
  font: 600 12px var(--font-body);
  text-align: center;
  color: inherit;
  text-decoration: none;
  opacity: .6;
}
.side-admin-link:hover { opacity: 1; }

.content { flex: 1; min-width: 0; padding: 0 0 34px; }
.content-pad { padding: 24px 32px 0; }
.content-pad-top { padding: 28px 32px 34px; }

/* ── Browse ────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; }
.hero-browse { height: 230px; }
.hero-detail { height: 300px; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; }
.hero-caption { position: absolute; left: 32px; bottom: 26px; pointer-events: none; }
.hero-title { margin: 6px 0 0; color: #fff; font-size: 44px; line-height: 1; }
.hero-title-sm { font-size: 38px; line-height: 1.05; }
.hero-back {
  position: absolute; top: 18px; left: 22px;
  background: rgba(255, 255, 255, .22);
  width: 38px; height: 38px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.pattern-strip { height: 8px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-head h2 { margin: 0; font-size: 20px; }
.section-meta { font: 600 12px var(--font-body); opacity: .5; white-space: nowrap; }

.dish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}
.dish-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dish-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dish-card-img { height: 150px; overflow: hidden; }
.dish-card-body { padding: 13px 15px 16px; }
.dish-card-title { display: block; font: 700 16px/1.25 var(--font-body); }
.dish-card-meta { display: block; font: 400 12px var(--font-body); opacity: .5; margin-top: 3px; }
.dish-card-hit { display: block; font: 600 12px var(--font-body); margin-top: 8px; }

/* ── Detail ────────────────────────────────────────────────────────────── */

.stat-row { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.stat { background: #fff; border-radius: var(--radius-md); padding: 11px 18px; box-shadow: var(--shadow-sm); }
.stat-value { display: block; font: 700 15px var(--font-body); }
.stat-label { display: block; font: 400 11px var(--font-body); opacity: .5; }

.block-heading { margin: 0 0 12px; font-size: 20px; }

.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.step-item {
  display: flex; gap: 14px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.step-num {
  width: 28px; height: 28px; flex: none;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--font-body);
  color: #fff;
}
.step-text { font: 400 15px/1.55 var(--font-body); }

.rail {
  width: clamp(300px, 26%, 352px);
  flex: none;
  border-left: 1px solid var(--line);
  padding: 24px 22px 30px;
  background: #fff;
}
.rail-serv {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 999px;
  padding: 7px 8px 7px 16px;
  margin: 0 0 22px;
}
.rail-serv-label { font: 700 13px var(--font-body); white-space: nowrap; }
.rail-serv-btns { display: flex; align-items: center; gap: 8px; }
.rail-serv .step-btn { width: 32px; height: 32px; }

.ing-grid {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px;
}
.ing { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.ing-img { width: 100%; aspect-ratio: 1; border-radius: 999px; overflow: hidden; display: block; }
.ing-name { font: 700 13px/1.2 var(--font-body); }
.ing-amount { font: 600 12px var(--font-body); }

.btn-cook {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 16px;
  font: 600 16px var(--font-heading);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.btn-save {
  margin-top: 10px;
  width: 100%;
  border: 1px solid var(--line-strong);
  background: #fff;
  cursor: pointer;
  border-radius: 999px;
  padding: 14px;
  font: 600 13px var(--font-body);
  color: inherit;
}

/* ── Menu ──────────────────────────────────────────────────────────────── */

.page-title { margin: 0 0 4px; font-size: 28px; }
.page-lede { font: 400 14px var(--font-body); opacity: .55; margin: 0 0 20px; }

.saved-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 900px; }
.saved-row {
  display: flex; gap: 14px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.saved-row form { margin: 0; display: flex; align-items: center; }
.saved-thumb { width: 96px; height: 96px; flex: none; border-radius: 12px; overflow: hidden; display: block; }
.saved-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  color: inherit; text-decoration: none;
}
.saved-name { font: 700 16px/1.2 var(--font-body); }
.saved-meta { font: 400 12px var(--font-body); opacity: .5; }
.saved-remove { border: 0; background: none; cursor: pointer; padding: 8px; opacity: .4; color: inherit; }
.saved-remove:hover { opacity: .9; }

.btn-primary-lg {
  display: inline-block;
  margin-top: 24px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 15px 26px;
  font: 600 15px var(--font-heading);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.empty-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 34px;
  max-width: 560px;
  box-shadow: var(--shadow-sm);
}
.empty-title { font: 700 15px var(--font-body); margin: 0; }
.empty-body { font: 400 14px/1.5 var(--font-body); opacity: .55; margin: 4px 0 0; }

/* ── Shopping list ─────────────────────────────────────────────────────── */

.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 940px; }
.shop-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.shop-row { margin: 0; }
.shop-btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid rgba(32, 30, 29, .06);
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.shop-btn:hover { background: rgba(32, 30, 29, .03); }
.shop-tick {
  width: 22px; height: 22px; flex: none;
  border-radius: 999px;
  border: 2px solid rgba(32, 30, 29, .22);
  display: flex; align-items: center; justify-content: center;
}
.shop-initial {
  width: 34px; height: 34px; flex: none;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--font-body);
}
.shop-text { flex: 1; min-width: 0; }
.shop-name { display: block; font: 700 14px var(--font-body); }
.shop-from { display: block; font: 400 11.5px var(--font-body); opacity: .45; }
.shop-amount { font: 600 13px var(--font-body); white-space: nowrap; }

.shop-row.is-on .shop-name { text-decoration: line-through; }
.shop-row.is-on .shop-name,
.shop-row.is-on .shop-initial,
.shop-row.is-on .shop-amount { opacity: .4; }

/* ── Cook mode ─────────────────────────────────────────────────────────── */

.cook-panel { padding: 28px 34px 30px; display: flex; flex-direction: column; }
.cook-head { display: flex; justify-content: space-between; align-items: center; }
.cook-close {
  background: rgba(255, 255, 255, .16);
  width: 36px; height: 36px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}

.cook-progress { display: flex; gap: 8px; margin-top: 18px; }
.cook-step-pill {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  height: 40px;
  font: 700 14px var(--font-body);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.cook-step-pill.is-done { background: rgba(255, 255, 255, .28); }
.cook-step-pill.is-now { background: #fff; border-color: #fff; }

.timer {
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .12);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 16px;
  margin-top: 20px;
}
.timer.is-done { background: var(--accent); }
.timer-main { flex: 1; min-width: 0; }
.timer-label {
  font: 600 11px var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin: 0;
}
.timer-time { font: 700 40px/1.05 var(--font-heading); color: #fff; margin: 2px 0 0; }
.timer-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .2); margin-top: 10px; }
.timer-fill { height: 5px; border-radius: 999px; background: #fff; transition: width .9s linear; }
.timer-btn {
  flex: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 15px 22px;
  background: #fff;
  font: 600 14px var(--font-body);
}
.timer-note { color: rgba(255, 255, 255, .7); font: 400 12px var(--font-body); margin-top: 8px; }

.cook-stepno {
  color: rgba(255, 255, 255, .65);
  font: 600 12px var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 24px 0 0;
}
.cook-steptext { color: #fff; font: 400 24px/1.5 var(--font-body); margin: 10px 0 0; }
.cook-ings { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.cook-ings li {
  font: 600 12.5px var(--font-body);
  color: #fff;
  background: rgba(255, 255, 255, .14);
  padding: 8px 14px;
  border-radius: 999px;
}

.cook-actions { margin-top: auto; padding-top: 26px; display: flex; gap: 12px; }
.cook-prev {
  flex: none; width: 74px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center;
  padding: 16px 0;
}
.cook-prev.is-disabled { opacity: .35; pointer-events: none; }
.cook-next {
  flex: 1;
  border-radius: 999px;
  padding: 17px;
  font: 600 16px var(--font-heading);
  background: #fff;
  text-align: center;
  text-decoration: none;
}

/* ── Login ─────────────────────────────────────────────────────────────── */

.login-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: min(380px, 100%); }
.login-title { margin: 8px 0 6px; color: #fff; font-size: 30px; }
.login-lede { color: rgba(255, 255, 255, .65); font: 400 14px/1.55 var(--font-body); margin: 0 0 18px; }
.login-input {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 15px 20px;
  font: 400 15px var(--font-body);
  background: rgba(255, 255, 255, .94);
  color: #201e1d;
}
.login-error { color: #ffd7c9; font: 600 12.5px var(--font-body); margin: 10px 0 0; }
.login-actions { display: flex; gap: 10px; margin-top: 14px; }
.login-back {
  flex: none;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: 15px 20px;
  font: 600 13px var(--font-body);
  color: #fff;
  text-decoration: none;
}
.login-submit {
  flex: 1;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 15px;
  font: 600 15px var(--font-heading);
  background: #fff;
}

/* ── Admin ─────────────────────────────────────────────────────────────── */

.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; max-width: 900px; }
.admin-exit {
  border: 0;
  background: #fff;
  border-radius: 999px;
  padding: 11px 18px;
  font: 600 12.5px var(--font-body);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; max-width: 900px; }
.admin-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 9px;
  margin: 0;
}
.admin-card.is-hidden { opacity: .55; }
.admin-row-top { display: flex; gap: 10px; align-items: center; }
.admin-name {
  flex: 1; min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 30, 29, .12);
  padding: 5px 0;
  font: 700 15px var(--font-body);
  background: none;
  color: inherit;
}
.admin-badge {
  flex: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 7px 13px;
  font: 600 11.5px var(--font-body);
  white-space: nowrap;
  background: rgba(32, 30, 29, .1);
  color: rgba(32, 30, 29, .6);
}
.admin-row-bottom { display: flex; gap: 10px; }
.admin-field {
  flex: 1; min-width: 0;
  border: 1px solid rgba(32, 30, 29, .12);
  border-radius: 999px;
  padding: 7px 13px;
  font: 400 12.5px var(--font-body);
  background: none;
  color: inherit;
}
.admin-row-actions { display: flex; gap: 8px; }
.admin-save, .admin-delete, .admin-reset {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font: 600 12px var(--font-body);
  color: inherit;
}
.admin-save { border-color: transparent; }
.admin-delete { color: #9a3412; }
.admin-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.admin-actions form { margin: 0; }
.admin-reset { padding: 14px 20px; }

/* ── Recipe editor ─────────────────────────────────────────────────────── */

.editor { max-width: 900px; }
.editor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font: 600 11px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 6px;
}
/* Text-like controls only: the checkboxes in .field-flags and the ingredient
   picker live inside .field too, and must keep their intrinsic size. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  border: 1px solid rgba(32, 30, 29, .14);
  border-radius: 14px;
  padding: 10px 14px;
  font: 400 14px var(--font-body);
  background: #fff;
  color: inherit;
}
.field textarea { border-radius: 16px; line-height: 1.6; resize: vertical; }
.field-wide { grid-column: 1 / -1; }
.field-hint { font: 400 12px var(--font-body); opacity: .5; margin: -8px 0 16px; }
.field-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.field-flags > span { width: 100%; margin-bottom: 2px; }
.flag { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--font-body); cursor: pointer; }

.ing-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.ing-pick {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(32, 30, 29, .12);
  font: 600 12.5px var(--font-body);
  cursor: pointer;
}
.ing-pick.is-on { background: var(--band); border-color: transparent; }
.ing-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-pick-amount { font: 400 11px var(--font-body); opacity: .5; white-space: nowrap; }

.editor-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding-bottom: 30px; }
.admin-edit {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font: 600 12px var(--font-body);
  color: inherit;
  text-decoration: none;
}