/* Generated by scripts/site/build_assets.js from assets/src/css/bento.css. Do not edit; edit the source. */
/* "Also included" board: tiles with small example screens (section type included, look "bento"). The final state is
   the default; bento.js adds .bnt-armed then .bnt-play to run the arrival story once (never with reduced motion). */
.adm-root .bnt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; }
.adm-root .bnt-t { --mx: 50%; --my: 0%; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.adm-root .bnt-t::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--blue2) 10%, transparent), transparent 60%); }
html[data-adm-theme="dark"] .adm-root .bnt-t::after { background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%); }
.adm-root .bnt-t:hover { transform: translateY(-4px); box-shadow: var(--lift); border-color: var(--line2); } .adm-root .bnt-t:hover::after { opacity: 1; }
.adm-root .bnt-t.bnt-big { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, color-mix(in srgb, var(--blue2) 7%, var(--card)), var(--card) 55%); }
html[data-adm-theme="dark"] .adm-root .bnt-t.bnt-big { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 6%, var(--card)), var(--card) 55%); }
.adm-root .bnt-t.bnt-strip { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.adm-root .bnt-h { display: grid; grid-template-columns: 44px 1fr; gap: 12px 14px; align-items: center; }
.adm-root .bnt-h i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--bg3); color: var(--hl); transition: background .3s, color .3s, transform .35s var(--spring); }
html[data-adm-theme="light"] .adm-root .bnt-h i { background: #EEF3FF; }
.adm-root .bnt-h i svg { width: 21px; height: 21px; }
.adm-root .bnt-t:hover .bnt-h i { background: linear-gradient(135deg, var(--blue1), var(--blue2)); color: #fff; transform: rotate(-6deg); }
html[data-adm-theme="dark"] .adm-root .bnt-t:hover .bnt-h i { background: var(--gold); color: var(--black); }
.adm-root .bnt-h b { font: 700 19px Sora; letter-spacing: -.02em; color: var(--ink); } .adm-root .bnt-t.bnt-big .bnt-h b { font-size: 24px; }
.adm-root .bnt-h p { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.55; color: var(--mut); }
.adm-root .bnt-a { position: relative; margin-top: auto; font-size: 13px; color: var(--ink); }
.adm-root .bnt-t.bnt-strip .bnt-a { margin: 0; }
.adm-root .bx-ex { display: table; margin: 0 0 8px auto; font: 700 11px 'Inter Tight'; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); }

/* day of bookings + reminder */
.adm-root .bx-day { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--bg3); }
.adm-root .bx-day .bx-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.adm-root .bx-day .bx-wk span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 58px; padding: 8px 0 10px; border-radius: 12px; background: var(--card); font-size: 11px; font-weight: 700; color: var(--mut); }
.adm-root .bx-day .bx-wk i { width: 70%; height: 4px; border-radius: 9px; background: color-mix(in srgb, var(--blue2) 45%, transparent); }
.adm-root .bx-day .bx-wk .bx-on { background: var(--gold); color: var(--black); } .adm-root .bx-day .bx-wk .bx-on i { background: var(--black); }
.adm-root .bx-day .bx-dh { display: flex; justify-content: space-between; font-size: 12px; color: var(--mut); } .adm-root .bx-day .bx-dh b { font: 700 14px Sora; color: var(--ink); }
.adm-root .bx-slot { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.adm-root .bx-slot em { font-style: normal; font-weight: 700; color: var(--mut); }
.adm-root .bx-slot.bx-on { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); } .adm-root .bx-slot.bx-on em { color: var(--ink); }
.adm-root .bx-slot i { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--ink); white-space: nowrap; }
.adm-root .bx-slot.bx-free { border-style: dashed; background: transparent; } .adm-root .bx-slot.bx-free span { color: var(--mut); }
.adm-root .bx-wa { margin: 14px 0 0 auto; max-width: 80%; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: #DCF8C6; color: #101214; box-shadow: 0 8px 20px rgba(16,18,20,.08); }
.adm-root .bx-wa small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: #15803D; }
.adm-root .bx-wa p { font-size: 13px; line-height: 1.45; }
.adm-root .bx-wa em { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-style: normal; font-size: 11px; color: #5B6270; }
.adm-root .bx-wa .bx-tk svg { width: 18px; height: 11px; display: block; color: #34B7F1; transition: color .4s; }

/* orders */
.adm-root .bx-ord { display: grid; gap: 8px; }
.adm-root .bx-ord .bx-row { position: relative; display: grid; grid-template-columns: 8px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg3); }
.adm-root .bx-ord .bx-row.bx-new { background: linear-gradient(90deg, var(--blue1), var(--blue2)); color: #fff; }
.adm-root .bx-ord .bx-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-root .bx-ord { padding-top: 8px; }
.adm-root .bx-ord .bx-row i { position: absolute; right: 12px; top: -8px; box-shadow: 0 4px 10px rgba(16,18,20,.18); font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: var(--gold); color: var(--black); }
.adm-root .bx-ord .bx-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; } .adm-root .bx-ord .bx-new .bx-dot { background: var(--gold); }
.adm-root .bx-ord em { font-style: normal; font-weight: 700; white-space: nowrap; }

/* invoice */
.adm-root .bx-inv { display: grid; place-items: center; padding: 6px 0; }
.adm-root .bx-inv .bx-paper { position: relative; display: grid; gap: 8px; width: min(220px, 100%); padding: 16px; border-radius: 14px; background: #fff; color: #101214; box-shadow: 0 14px 30px rgba(16,18,20,.14); transform: rotate(-2deg); transition: transform .45s var(--spring); }
.adm-root .bnt-t:hover .bx-inv .bx-paper { transform: rotate(0deg) translateY(-4px); }
.adm-root .bx-inv .bx-paper > b { font: 700 13px Sora; } .adm-root .bx-inv .bx-paper i { height: 7px; border-radius: 9px; background: #E9ECF2; } .adm-root .bx-inv .bx-paper i.bx-s { width: 60%; }
.adm-root .bx-inv .bx-tot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px dashed #D5DAE3; font-size: 12px; }
.adm-root .bx-inv .bx-paid { position: absolute; right: 12px; top: 12px; padding: 2px 7px; border: 2px solid #16A34A; border-radius: 8px; font: 800 11px 'Inter Tight'; letter-spacing: .12em; text-transform: uppercase; color: #16A34A; transform: rotate(8deg); }

/* customer */
.adm-root .bx-cus { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--bg3); }
.adm-root .bx-cus .bx-top { display: flex; gap: 12px; align-items: center; }
.adm-root .bx-cus .bx-av { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brown); color: #fff; } .adm-root .bx-cus .bx-av svg { width: 20px; height: 20px; }
.adm-root .bx-cus .bx-nm b { display: block; } .adm-root .bx-cus small { display: block; font-size: 12px; color: var(--mut); }
.adm-root .bx-cus .bx-cf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.adm-root .bx-cus .bx-owe { font-weight: 700; }
.adm-root .bx-cus .bx-rem { padding: 5px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, #22C55E 16%, transparent); color: #15803D; }
html[data-adm-theme="dark"] .adm-root .bx-cus .bx-rem { color: #4ADE80; }

/* report */
.adm-root .bx-rep { display: flex; align-items: flex-end; gap: 16px; }
.adm-root .bx-rep .bx-bars { flex: 1; display: flex; align-items: flex-end; gap: 7px; height: 96px; }
.adm-root .bx-rep .bx-bars i { flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px; background: var(--line2); transition: height .6s var(--ease); }
.adm-root .bx-rep .bx-bars i.bx-hi { background: linear-gradient(180deg, var(--blue2), var(--blue1)); }
.adm-root .bnt-t:hover .bx-rep .bx-bars i { height: calc(var(--h) + 8%); }
.adm-root .bx-rep .bx-kp b { display: block; font: 800 26px Sora; color: #16A34A; white-space: nowrap; } html[data-adm-theme="dark"] .adm-root .bx-rep .bx-kp b { color: #4ADE80; }
.adm-root .bx-rep .bx-kp small { color: var(--mut); }

/* security */
.adm-root .bx-sec { display: flex; align-items: center; gap: 16px; }
.adm-root .bx-sec .bx-sh { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--black); color: var(--gold); transition: transform .45s var(--spring); }
html[data-adm-theme="dark"] .adm-root .bx-sec .bx-sh { background: var(--gold); color: var(--black); }
.adm-root .bnt-t:hover .bx-sec .bx-sh { transform: scale(1.06) rotate(-4deg); }
.adm-root .bx-sec .bx-sh svg { width: 28px; height: 28px; }
.adm-root .bx-sec ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.adm-root .bx-sec li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 99px; background: var(--bg3); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.adm-root .bx-sec li i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #22C55E; color: #fff; } .adm-root .bx-sec li svg { width: 11px; height: 11px; }

/* arrival story (bento.js; skipped with reduced motion) */
.adm-root .bnt.bnt-armed .bx-ord .bx-row.bx-new { opacity: 0; transform: translateY(-14px) scale(.97); }
.adm-root .bnt.bnt-armed .bx-inv .bx-paid { opacity: 0; transform: rotate(8deg) scale(2.2); }
.adm-root .bnt.bnt-armed .bx-wa { opacity: 0; transform: translateY(12px) scale(.96); transform-origin: right bottom; }
.adm-root .bnt.bnt-armed .bx-wa .bx-tk svg { color: #9AA3AF; }
.adm-root .bnt.bnt-armed .bx-rep .bx-bars i { height: 6%; }
.adm-root .bnt.bnt-armed .bx-sec li { opacity: 0; transform: translateY(6px); }
.adm-root .bnt.bnt-armed .bx-slot.bx-on { box-shadow: none; border-color: var(--line); }
.adm-root .bnt.bnt-armed .bx-ord .bx-row.bx-new, .adm-root .bnt.bnt-armed .bx-inv .bx-paid, .adm-root .bnt.bnt-armed .bx-wa, .adm-root .bnt.bnt-armed .bx-sec li, .adm-root .bnt.bnt-armed .bx-slot.bx-on { transition: opacity .5s var(--ease), transform .55s var(--spring), box-shadow .5s, border-color .5s; }
.adm-root .bnt.bnt-play .bx-ord .bx-row.bx-new { opacity: 1; transform: none; transition-delay: .25s; }
.adm-root .bnt.bnt-play .bx-slot.bx-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); border-color: var(--gold); transition-delay: .4s; }
.adm-root .bnt.bnt-play .bx-wa { opacity: 1; transform: none; transition-delay: .9s; }
.adm-root .bnt.bnt-play .bx-wa .bx-tk svg { color: #34B7F1; transition-delay: 1.9s; }
.adm-root .bnt.bnt-play .bx-inv .bx-paid { opacity: 1; transform: rotate(8deg) scale(1); transition-delay: 1.1s; }
.adm-root .bnt.bnt-play .bx-rep .bx-bars i { height: var(--h); transition-delay: calc(.5s + var(--n, 0) * 80ms); }
.adm-root .bnt.bnt-play .bx-sec li { opacity: 1; transform: none; } .adm-root .bnt.bnt-play .bx-sec li:nth-child(1) { transition-delay: 1.3s; } .adm-root .bnt.bnt-play .bx-sec li:nth-child(2) { transition-delay: 1.5s; } .adm-root .bnt.bnt-play .bx-sec li:nth-child(3) { transition-delay: 1.7s; } .adm-root .bnt.bnt-play .bx-sec li:nth-child(4) { transition-delay: 1.9s; }
.adm-root .bnt.bnt-play .bx-ord .bx-row.bx-new i { animation: adm-bxpulse 1.6s 1s ease-out 2; }
@keyframes adm-bxpulse { 0% { box-shadow: 0 0 0 0 rgba(254,193,55,.7); } 100% { box-shadow: 0 0 0 10px rgba(254,193,55,0); } }

@media (max-width: 1000px) {
  .adm-root .bnt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-root .bnt-t.bnt-big { grid-row: auto; }
}
@media (max-width: 640px) {
  .adm-root .bnt { grid-template-columns: 1fr; }
  .adm-root .bnt-t, .adm-root .bnt-t.bnt-big, .adm-root .bnt-t.bnt-strip { grid-column: auto; }
  .adm-root .bnt-t.bnt-strip { flex-direction: column; align-items: stretch; }
  .adm-root .bnt-t { padding: 20px; } .adm-root .bx-wa { max-width: 92%; }
  .adm-root .bx-day .bx-wk span { min-height: 50px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .adm-root .bnt-t, .adm-root .bnt-t *, .adm-root .bnt-t::after { transition: none !important; animation: none !important; } }

.adm-root .bnt-strip .bnt-h { flex: 1; max-width: 560px; }