/* Bots pages (the Bots and Add bot mockups): the card grid, a bot's page head and tabs, the wizard rail of
   onboarding and initial stock. Everything else is the shell's components (app.css). */

/* ── a bot's picture: its robot head, the Roblox headshot over it when it loads, the game badge (page-local) ── */
.bface { --sz: 42px; position: relative; display: inline-block; flex: none; width: var(--sz); height: var(--sz); vertical-align: middle; }
.bface__art, .bface__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: calc(var(--sz) * .28); display: block; }
.bface__img { object-fit: cover; color: transparent; background: transparent; }
.bface__game { position: absolute; right: calc(var(--sz) * -.12); bottom: calc(var(--sz) * -.12); border-radius: calc(var(--sz) * .14); border: 2px solid var(--panel); background: var(--panel-2); display: block; }

/* ── the card grid ── */
#bot-cards { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.botgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.botgrid > .empty { grid-column: 1 / -1; }
.botcard { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: inherit; text-decoration: none; min-width: 0; box-shadow: var(--shadow); }
.botcard:hover { border-color: var(--ink-3); text-decoration: none; }
.botcard--bad { border-color: color-mix(in oklab, var(--bad) 40%, var(--line)); }
.botcard--bad:hover { border-color: color-mix(in oklab, var(--bad) 70%, var(--line)); }
.botcard--off { opacity: .62; }
.botcard__head { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; }
.botcard__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.botcard__name { font: 600 14.5px/1.1 var(--mono); color: var(--ink); }
.botcard__sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.botcard__head .pill { flex: none; }
.botcard .sstrip--inline { grid-template-columns: 1.5fr 1fr .7fr; gap: 6px; }
.botcard__err { font-size: 12px; color: var(--bad); text-wrap: pretty; line-height: 1.45; }
.botcard__code { font-family: var(--mono); font-weight: 600; margin-right: 4px; }
.botcard__note { font-size: 12px; color: var(--ink-3); text-wrap: pretty; }
.toolbar .selchips { flex-wrap: nowrap; }
.toolbar .ftabs { flex: 1 1 auto; }
@media (max-width: 760px) {
  .botgrid { grid-template-columns: minmax(0, 1fr); }
  .toolbar { padding: 0 10px; }
  .toolbar__end { margin-left: 0; width: 100%; padding-bottom: 10px; }
}

/* ── a bot's page: the head panel, its meta strip, the tabs ── */
.bothead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; }
.bothead__name { margin: 0; font: 600 20px/1.1 var(--mono); letter-spacing: 0; }
.bothead__game { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.bothead__where { font: 500 12.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.bothead__where a { color: inherit; }
.bothead__where a:hover { color: var(--ink); }
.bothead__end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.bothead__end form { display: contents; }
/* one Roblox account in several games: the seats name each other; "Add to another game" opens its form here */
.botcard__acct { font-size: 12px; color: var(--ink-2); text-wrap: pretty; }
.botacct { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 12px; font-size: 13px; color: var(--ink-2); }
.botacct__line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.botacct__line.is-warn { color: var(--warn); }
.botacct__add > summary { list-style: none; width: max-content; cursor: pointer; }
.botacct__add > summary::-webkit-details-marker { display: none; }
.botacct__add[open] > summary { margin-bottom: 10px; }
.botacct__add form { max-width: 760px; }
.bot-tabs { margin-bottom: 0; border-bottom: 1px dashed var(--line-2); flex-wrap: wrap; }
.bot-tabs a { height: 36px; cursor: pointer; }
.bot-tabs a.is-active { border-bottom-color: var(--ink); font-weight: 600; }
.bot-tabs__n { margin-left: 6px; font: 500 11px/1 var(--mono); color: var(--ink-3); }
.tabpanel { display: grid; gap: 12px; }
.tabpanel .grid { gap: 12px; }
.botlog { max-height: 420px; overflow: auto; }
.pic32 { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: var(--panel-2); border: 1px solid var(--line); display: block; flex: none; }
.pic32 { box-sizing: border-box; }
.pic32--empty { background: repeating-linear-gradient(135deg, var(--stripe) 0 5px, var(--panel-2) 5px 10px); }
.pic32--game { display: grid; place-items: center; }
.pic32--game img { opacity: .9; border-radius: 5px; }
/* the stock table: dense rows (8px cells, a 32px picture), as the mockup */
.stocktbl th { padding: 9px 14px; }
.stocktbl td { padding: 8px 14px; line-height: 1.2; }
.panel .stocktbl th:first-child, .panel .stocktbl td:first-child { padding-left: 14px; }
.panel .stocktbl th:last-child, .panel .stocktbl td:last-child { padding-right: 14px; }
.stocktbl { min-width: 560px; }
.stocktbl .itemcell, .stocklist .itemcell, #listing-coverage .itemcell { display: flex; }
.pic24 { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; background: var(--panel-2); border: 1px solid var(--line); display: block; flex: none; box-sizing: border-box; }
.stocktbl tr.is-total td { padding-top: 9px; padding-bottom: 9px; }
.itemcell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.table .num { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.table th.num { font-family: var(--sans); }
.table .num--faint { color: var(--ink-3); }
.tabpanel .table .num { white-space: nowrap; }
.table tr.is-total td { font-weight: 600; border-top: 1px solid var(--line-2); }
.secret { font-family: var(--mono); letter-spacing: .04em; }
.errshot { width: 54px; height: 30px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--sunk); cursor: zoom-in; display: block; }
.bot-settings .grid--2 { gap: 12px 16px; }
@media (max-width: 760px) {
  .bothead__end { margin-left: 0; width: 100%; }
  .bothead__name { font-size: 18px; }
  .bot-tabs a { padding: 0 9px; }
  /* panel heads: the actions wrap under the title instead of squeezing it */
  .tabpanel .panel__head { flex-wrap: wrap; }
  .tabpanel .panel__title { white-space: normal; }
  .tabpanel .panel__end { margin-left: 0; flex-wrap: wrap; }
}

/* ── the one alert above the tabs: a compact row (glyph · word, code, explanation / Next: · fix at the right) ── */
.balert { border-radius: 8px; border: 1px solid; display: grid; }
.balert--bad { background: var(--bad-bg); border-color: color-mix(in oklab, var(--bad) 30%, transparent); --tone: var(--bad); }
.balert--warn { background: var(--warn-bg); border-color: color-mix(in oklab, var(--warn) 30%, transparent); --tone: var(--warn); }
.balert--run { background: var(--run-bg); border-color: color-mix(in oklab, var(--run) 30%, transparent); --tone: var(--run); }
.balert__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; }
.balert__row--extra { padding-top: 8px; padding-bottom: 8px; border-top: 1px dashed color-mix(in oklab, var(--tone) 25%, transparent); font-size: 12.5px; }
.balert__g { font: 600 13px/1 var(--mono); color: var(--tone); }
.balert__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.balert__line strong, .balert__next strong { font-weight: 600; }
.balert__code { font: 600 11.5px/1 var(--mono); color: var(--tone); }
.balert__text { color: var(--ink-2); }
.balert__act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.balert__act form { display: contents; }
.balert__also { min-width: 0; color: var(--ink-2); }
.balert__also strong { color: var(--ink); font-weight: 600; margin-right: 4px; }
.balert__also form { display: inline; }
.balert__item a, .balert__link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.balert__item a:hover, .balert__link:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .balert__row { grid-template-columns: auto minmax(0, 1fr); }
  .balert__act { grid-column: 2; justify-content: flex-start; }
}

/* ── the wizard rail (Add bot): Account · Sign in · Screenshots · Check stock · Marketplaces ── */
.wiz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wiz__step { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-grad); min-width: 0; color: inherit; text-decoration: none; }
a.wiz__step:hover { border-color: var(--line-2); text-decoration: none; }
.wiz__step--current { border-color: var(--btn); background: var(--accent-bg); }
.wiz__n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--mono); background: var(--panel-2); color: var(--ink-3); }
.wiz__step--done .wiz__n { background: var(--ok); color: #fff; }
.wiz__step--current .wiz__n { background: var(--btn); color: var(--on-btn); }
.wiz__step--fail .wiz__n { background: var(--bad); color: #fff; }
.wiz__step--attn .wiz__n { background: var(--attn); color: #fff; }
.wiz__text { display: flex; flex-direction: column; min-width: 0; }
.wiz__label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz__step--todo .wiz__label { color: var(--ink-3); }
.wiz__sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .wiz { display: flex; gap: 4px; }
  .wiz > li { flex: none; }
  .wiz > li:has([aria-current]) { flex: 1 1 auto; min-width: 0; }
  .wiz__step { padding: 8px; }
  .wiz__text { display: none; }
  .wiz__step[aria-current] .wiz__text { display: flex; }
  .wiz__step[aria-current] .wiz__sub { display: none; }
}

/* ── Add bot, step 1: the panel head, the fields, the game and PC picture cards, the footer bar ── */
.addbot__head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.addbot__head h1, .addbot__head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.addbot__head > span { font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }
.addbot__body { padding: 20px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.addbot__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.addbot__help { margin-top: -10px; }
.addbot__input { height: 40px; padding: 0 12px; border-radius: 10px; }
.addbot__set { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.addbot__set legend { padding: 0; margin-bottom: 8px; font-weight: 500; color: var(--ink); font-size: 13px; }
.addbot .field__label { color: var(--ink); font-size: 13px; }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.gcard { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; min-width: 0; }
.gcard:hover { border-color: var(--line-2); }
.gcard.is-on, .gcard:has(.gcard__radio:checked) { border-color: var(--btn); background: var(--accent-bg); }
.gcard:has(.gcard__radio:focus-visible) { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }
.gcard.is-off { opacity: .5; cursor: not-allowed; }
.gcard__radio { position: absolute; opacity: 0; pointer-events: none; }
.gcard__logo { width: 40px; height: 40px; border-radius: 10px; display: block; flex: none; }
.gcard__pc { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.gcard__text { display: flex; flex-direction: column; min-width: 0; }
.gcard__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard__sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addbot__more { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.addbot__more > summary { padding: 10px 12px; cursor: pointer; font-weight: 500; }
.addbot__more > summary .faint { font-weight: 400; font-size: 12px; margin-left: 6px; }
.addbot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 4px 12px 14px; }
.addbot__wide { grid-column: 1 / -1; }
.addbot__note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--info-bg); color: var(--ink-2); font-size: 12.5px; }
.addbot__note > svg { flex: none; margin-top: 1px; color: var(--info); }
.addbot__note .check { margin-top: 8px; color: var(--ink); }
.addbot__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel); }
.addbot__foot .btn { height: 36px; border-radius: 10px; }
.addbot__alt { font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.addbot__hint { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.addbot__foot .btn--primary { padding: 0 16px; }
.addbot__foot .btn--primary:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) {
  .addbot__head, .addbot__body, .addbot__foot { padding-left: 14px; padding-right: 14px; }
  .addbot__pair, .addbot__grid { grid-template-columns: minmax(0, 1fr); }
  .addbot__alt { order: 3; width: 100%; margin-left: 0; }
  .addbot__more > summary .faint { display: none; }
  .gcards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── the cookie form (opened from Add bot) as a dialog over the board ── */
.cookiedlg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.cookiedlg__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.cookiedlg__box { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--pop); }
.cookiedlg .addbot__body { max-width: none; gap: 12px; }
.cookiedlg .addbot__body > .field { width: 100%; }

/* ── the onboarding tab: the stages at the left, the callout with the live login view at the right ── */
.obtab { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; }
.obrail { list-style: none; margin: 0; padding: 6px; background: var(--panel-grad); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; gap: 2px; }
.obrail__step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; }
.obrail__n { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--panel); color: var(--ink-3); display: grid; place-items: center; font: 600 10px/1 var(--mono); flex: none; }
.obrail__text { display: flex; flex-direction: column; min-width: 0; }
.obrail__label { font-weight: 500; }
.obrail__sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obrail__step--todo .obrail__label, .obrail__step--skip .obrail__label { color: var(--ink-3); }
.obrail__step--done .obrail__n { border-color: var(--ok); background: var(--ok); color: var(--panel); }
.obrail__step--current { background: var(--run-bg); }
.obrail__step--current .obrail__n { border-color: var(--run); color: var(--run); }
.obrail__step--attn { background: var(--attn-bg); }
.obrail__step--attn .obrail__n { border-color: var(--attn); color: var(--attn); }
.obrail__step--current .obrail__label, .obrail__step--attn .obrail__label { font-weight: 600; }
.obrail__step--fail { background: var(--bad-bg); }
.obrail__step--fail .obrail__n { border-color: var(--bad); color: var(--bad); }
.obview__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px dashed var(--line-2); }
.obview__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.obview__text h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.obview__text span { color: var(--ink-2); font-size: 12.5px; text-wrap: pretty; }
.obview__stage { aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, var(--sunk) 0 10px, var(--panel-2) 10px 20px); display: flex; align-items: center; justify-content: center; padding: 12px; }
.obview__card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; text-align: center; }
.obview__card .mono { font: 500 11.5px/1.2 var(--mono); color: var(--ink-2); }
.obview__card > span:last-child { font-size: 11px; color: var(--ink-3); }
.obview__live { padding: 12px 16px 0; }
.obview__live .human { border: 0; background: none; padding: 0; box-shadow: none; }
.obview__live .human__head { display: none; }
.obview__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; }
.obview__foot form { display: contents; }
.obview__note { font-size: 12px; color: var(--ink-3); flex: 1 1 220px; text-wrap: pretty; }
.access__note { font-size: 12px; }
.kv dd.is-bad { color: var(--bad); }
@media (max-width: 860px) { .obtab { grid-template-columns: minmax(0, 1fr); } }

/* ── initial stock: the screenshot drop zone above the counts ── */
.shotdrop { padding: 16px 20px 4px; display: flex; flex-direction: column; gap: 10px; }
.shotdrop__zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 20px; border: 1.5px dashed var(--line-2); border-radius: 14px; background: var(--panel); color: var(--ink-3); text-align: center; cursor: pointer; font: inherit; }
.shotdrop__zone:hover { border-color: var(--btn); background: var(--accent-bg); }
.shotdrop__title { font-size: 14px; font-weight: 500; color: var(--ink); }
.shotdrop__sub { font-size: 12px; max-width: 520px; text-wrap: pretty; }
.shotdrop__or { font-size: 12px; color: var(--ink-3); text-align: center; }
.crumbs { display: flex; align-items: center; gap: 6px; }
.crumbs a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); text-decoration: none; }

/* ── the onboarding page: the state head, the progress list and the agent's log ── */
.obhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.obhead__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 320px; }
.obhead__title { margin: 0; font-size: 16px; font-weight: 600; }
.obhead__sub { font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }
.obbody { padding: 16px 20px; display: grid; gap: 14px; }
.obbody > .human { margin: 0; }
.obfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel); }
.obfoot__end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.obfoot__hint { font-size: 12px; color: var(--ink-3); }
.obfoot form { display: contents; }
#onboarding-steps.grid { gap: 12px; }
.checklist .tl__step { padding: 6px 0; }
.checklist .tl__step.is-pending .tl__title { color: var(--ink-3); font-weight: 400; }
.checklist .tl__step.is-human .tl__dot { border-color: var(--attn); color: var(--attn); }
.checklist .tl__step.is-current .tl__dot { border-color: var(--run); color: var(--run); }
.checklist .tl__step.is-failed .tl__dot { border-color: var(--bad); color: var(--bad); }
.checklist .tl__step.is-done .tl__dot { border-color: var(--ok); background: var(--ok); color: var(--panel); }
.checklist .tl__step.is-done .tl__line { background: var(--ok); }
.stocklist .table td { padding-top: 8px; padding-bottom: 8px; }
.stocklist .input--sm { width: 90px; }
.stocklist .input--cost { width: 110px; }
@media (max-width: 760px) {
  .obhead, .obbody, .obfoot, .shotdrop { padding-left: 14px; padding-right: 14px; }
  #onboarding-steps.grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .tabpanel .panel__meta, .obbody .panel__meta { display: none; } }
.balert__said { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.balert__said strong { color: var(--ink); font-weight: 600; }
.balert__said code { font: 12px/1.4 var(--mono); color: var(--ink); }

/* the PC restart / update notices (machines/_bits.html code_notices), as on the machine page */
.mban { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 18px; border-radius: 14px; background: var(--warn-bg); border: 1px solid color-mix(in oklab, var(--warn) 25%, transparent); color: var(--ink); line-height: 1.45; }
.mban__g { font: 600 13px/20px var(--mono); color: var(--warn); }
.mban__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mban__title strong { font-weight: 600; }
.mban__code { font: 600 11.5px/1 var(--mono); color: var(--warn); white-space: nowrap; }
.mban__text { color: var(--ink-2); text-wrap: pretty; }
.mban__next { text-wrap: pretty; } .mban__next strong { font-weight: 600; }
.mban__end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mban__end .btn { height: 30px; white-space: nowrap; }
.mban--bad { background: var(--bad-bg); border-color: color-mix(in oklab, var(--bad) 25%, transparent); } .mban--bad .mban__g, .mban--bad .mban__code { color: var(--bad); }
.mban--info { background: var(--info-bg); border-color: color-mix(in oklab, var(--info) 25%, transparent); } .mban--info .mban__g { color: var(--info); }
.mban--neutral { background: var(--panel-2); border-color: var(--line-2); } .mban--neutral .mban__g { color: var(--ink-3); }
.mban--ok { background: var(--ok-bg); border-color: color-mix(in oklab, var(--ok) 25%, transparent); } .mban--ok .mban__g { color: var(--ok); }
@media (max-width: 760px) {
  .mban { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .mban__end { grid-column: 2; justify-content: flex-start; }
  .mban__end .btn { white-space: normal; height: auto; min-height: 30px; }
}