:root, body {
  --v-acc: var(--lx-accent, #7C3AED);
  --v-acc-rgb: var(--lx-acc-rgb, 124, 58, 237);
  --v-ink: var(--lx-ink, #111);
  --v-ink2: var(--lx-ink2, #3F3F46);
  --v-mute: var(--lx-mute, #6B6B76);
  --v-line: var(--lx-line, rgba(17, 17, 17, .1));
  --v-line2: var(--lx-line2, rgba(17, 17, 17, .18));
  --v-bg: var(--lx-surface, #fff);
  --v-page: var(--lx-page, #fff);
  --v-soft: var(--lx-blush, #F5F3FF);
  --v-gold: var(--lx-gold, #7C3AED);
  --v-ok: #1F8A5B;
  --v-warn: #B4531A;
  --v-ease: cubic-bezier(.2, .7, .2, 1);
}
body.dark-mode {
  --v-ink: #F0F0F0; --v-ink2: #D6D6DD; --v-mute: #A8A8B3; --v-line: rgba(255, 255, 255, .1); --v-line2: rgba(255, 255, 255, .18);
  --v-bg: #1A1A1F; --v-page: #121216; --v-soft: rgba(124, 58, 237, .16);
}

.auth-roles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .3rem; border-radius: 16px; background: var(--v-soft); margin-bottom: .2rem; }
.auth-role { border: 0; background: transparent; border-radius: 12px; padding: .65rem .5rem; cursor: pointer; text-align: center; color: var(--v-mute); font: inherit; transition: background .2s, color .2s, box-shadow .2s; }
.auth-role b { display: block; font-size: .86rem; font-weight: 600; color: inherit; }
.auth-role small { display: block; font-size: .7rem; margin-top: .1rem; opacity: .85; }
.auth-role.active { background: var(--v-bg); color: var(--v-ink); box-shadow: 0 6px 16px -10px rgba(var(--v-acc-rgb), .55); }
.auth-role.active small { color: var(--v-acc); opacity: 1; }
.auth-role:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }
#signupFields { display: flex; flex-direction: column; gap: .75rem; }
.pw-rules { list-style: none; margin: -.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .45rem; }
.pw-rules li { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--v-mute); padding: .22rem .55rem .22rem .4rem; border-radius: 999px; background: var(--v-soft); transition: color .2s, background .2s; }
.pw-rules li i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-block; position: relative; flex: none; }
.pw-rules li.ok { color: var(--v-ok); background: rgba(31, 138, 91, .1); }
.pw-rules li.ok i { background: currentColor; }
.pw-rules li.ok i::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 6px; border: solid var(--v-bg); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.code-input { font-size: 1.6rem !important; letter-spacing: .55em; text-align: center; font-weight: 600 !important; padding: .9rem .5rem !important; font-variant-numeric: tabular-nums; }
.code-input::placeholder { letter-spacing: .4em; }
#verifyResend { color: var(--v-acc); cursor: pointer; font-weight: 600; }
#verifyResend.off { color: var(--v-mute); cursor: default; font-weight: 400; }
.verify-tip { font-size: .74rem; color: var(--v-mute); text-align: center; margin: 0; }
#authVerifyStep .auth-sub b { color: var(--v-ink); word-break: break-all; }

body.bks-on { overflow: hidden; }
.bks-overlay { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; background: rgba(16, 8, 20, .56); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2.5vh 1rem; }
.bks-overlay.open { display: flex; }
.bks { position: relative; width: min(560px, 100%); height: min(820px, 95vh); background: var(--v-bg); color: var(--v-ink); border-radius: 26px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(20, 6, 26, .65); animation: bksIn .32s var(--v-ease); }
@keyframes bksIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.bks-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem .8rem; border-bottom: 1px solid var(--v-line); flex: none; }
.bks-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--v-line2); background: transparent; color: var(--v-ink); display: grid; place-items: center; cursor: pointer; flex: none; transition: border-color .2s, background .2s; }
.bks-x .ico { width: 18px; height: 18px; }
.bks-x:hover { border-color: var(--v-acc); }
.bks-head-txt { min-width: 0; }
.bks-salon { font-size: .74rem; color: var(--v-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bks-title { margin: .05rem 0 0; font-family: var(--font-s); font-weight: 400; font-size: 1.32rem; line-height: 1.2; color: var(--v-ink); outline: none; }
.bks-title:focus, .bks-title:focus-visible { outline: none !important; box-shadow: none !important; }
.bks-head, .bks-foot { position: static; inset: auto; width: auto; margin: 0; box-shadow: none; text-align: left; }
.bks-sec + .bks-sec { margin-top: 1.1rem; }
.bks-sec-h { margin: 0 0 .5rem; font: 650 .8rem var(--font-b); color: var(--v-ink2); }
.bks-cat.has { border-color: var(--v-acc); color: var(--v-acc); }
.bks-title { font-family: var(--font-b) !important; font-weight: 650; font-size: 1.18rem; letter-spacing: -.01em; }
.bks-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.2rem 1.4rem; -webkit-overflow-scrolling: touch; }
.bks-page.in-fwd { animation: bksFwd .28s var(--v-ease); }
.bks-page.in-back { animation: bksBack .28s var(--v-ease); }
@keyframes bksFwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes bksBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.bks-foot { flex: none; border-top: 1px solid var(--v-line); padding: .7rem 1.2rem calc(.75rem + env(safe-area-inset-bottom, 0px)); background: var(--v-bg); }
.bks-sum { display: flex; justify-content: space-between; gap: .8rem; font-size: .82rem; color: var(--v-ink2); min-height: 1.2rem; }
.bks-sum-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bks-sum-l.muted { color: var(--v-mute); }
.bks-sum-r { font-weight: 700; color: var(--v-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bks-sum-r s { font-weight: 400; color: var(--v-mute); }
.bks-err { min-height: 0; font-size: .78rem; color: #C2410C; margin-top: .25rem; }
.bks-err:empty { display: none; }
.bks-err.shake { animation: bksShake .32s; }
@keyframes bksShake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.bks-actions { display: flex; gap: .6rem; margin-top: .6rem; }
.bks-back { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--v-line2); background: transparent; color: var(--v-ink); border-radius: 14px; padding: 0 1rem; min-height: 50px; font: 600 .86rem var(--font-b); cursor: pointer; }
.bks-back .ico { width: 18px; height: 18px; }
.bks-back:hover { border-color: var(--v-acc); }
.bks-next { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: 14px; min-height: 50px; padding: 0 1rem; font: 700 .9rem var(--font-b); color: #fff; background: var(--v-acc); cursor: pointer; opacity: .5; transition: opacity .2s, transform .15s, box-shadow .2s; }
.bks-next .ico { width: 18px; height: 18px; }
.bks-next.ready { opacity: 1; box-shadow: 0 12px 24px -14px rgba(var(--v-acc-rgb), .9); }
.bks-next.ready:active { transform: scale(.985); }
.bks-next.busy { opacity: .7; cursor: progress; }
.bks-next.busy span::after { content: ''; display: inline-block; width: 13px; height: 13px; margin-left: .5rem; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: bksSpin .7s linear infinite; vertical-align: -2px; }
@keyframes bksSpin { to { transform: rotate(360deg); } }
.bks-back:focus-visible, .bks-next:focus-visible, .bks-x:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }
.bks-steps { --bks-n: 5; --bks-at: 0; position: relative; list-style: none; display: grid; grid-template-columns: repeat(var(--bks-n), 1fr); margin: .8rem 0 0; padding: 0; counter-reset: s; }
.bks-steps::before, .bks-steps::after { content: ''; position: absolute; top: 13px; height: 2px; left: calc(50% / var(--bks-n)); border-radius: 2px; }
.bks-steps::before { right: calc(50% / var(--bks-n)); background: var(--v-line2); }
.bks-steps::after { width: calc((100% - 100% / var(--bks-n)) * var(--bks-at) / (var(--bks-n) - 1)); background: var(--v-acc); transition: width .35s var(--v-ease); }
.bks-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.bks-steps b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .78rem var(--font-b); background: var(--v-bg); color: var(--v-mute); border: 2px solid var(--v-line2); transition: background .25s, border-color .25s, color .25s; }
.bks-steps b .ico { width: 15px; height: 15px; stroke-width: 3; }
.bks-steps span { font-size: .66rem; color: var(--v-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bks-steps li.cur b { border-color: var(--v-acc); color: var(--v-acc); box-shadow: 0 0 0 4px rgba(var(--v-acc-rgb), .14); }
.bks-steps li.cur span { color: var(--v-ink); font-weight: 650; }
.bks-steps li.done b { background: var(--v-acc); border-color: var(--v-acc); color: #fff; }
.bks-steps li.done span { color: var(--v-ink2); }

.bks-label { font-size: .78rem; font-weight: 650; color: var(--v-ink2); margin: 1rem 0 .5rem; }
.bks-label:first-child { margin-top: .1rem; }
.bks-hint { margin: 1.2rem 0; padding: 1rem; border-radius: 16px; background: var(--v-soft); color: var(--v-ink2); font-size: .84rem; text-align: center; }
.bks-hint.small { margin: .8rem 0 0; padding: .55rem .8rem; font-size: .74rem; text-align: left; background: transparent; color: var(--v-mute); }
.bks-loading { padding: 1.4rem 0; text-align: center; font-size: .82rem; color: var(--v-mute); }
.bks-empty { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; padding: 1rem; border-radius: 16px; border: 1px dashed var(--v-line2); font-size: .84rem; color: var(--v-ink2); line-height: 1.5; }
.bks-empty .ico { width: 26px; height: 26px; color: var(--v-acc); }

.bks-cats { display: flex; gap: .45rem; overflow-x: auto; padding: .1rem 0 .6rem; margin: 0 -1.2rem; padding-left: 1.2rem; padding-right: 1.2rem; scrollbar-width: none; }
.bks-cats::-webkit-scrollbar { display: none; }
.bks-cat { flex: none; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink2); border-radius: 999px; padding: .5rem .9rem; font: 600 .8rem var(--font-b); cursor: pointer; white-space: nowrap; }
.bks-cat i { font-style: normal; min-width: 18px; height: 18px; border-radius: 9px; background: var(--v-acc); color: #fff; font-size: .68rem; display: grid; place-items: center; padding: 0 4px; }
.bks-svcs { display: flex; flex-direction: column; gap: .5rem; }
.bks-svc { display: grid; grid-template-columns: 1fr auto 26px; align-items: center; gap: .8rem; width: 100%; text-align: left; border: 1px solid var(--v-line); background: var(--v-bg); color: var(--v-ink); border-radius: 18px; padding: .85rem .95rem; cursor: pointer; font: inherit; transition: border-color .2s, background .2s, transform .12s; }
.bks-svc:active { transform: scale(.992); }
.bks-svc-txt b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.bks-svc-txt small { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; color: var(--v-mute); margin-top: .2rem; }
.bks-svc-txt small .ico { width: 13px; height: 13px; }
.bks-svc-price { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.bks-tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--v-line2); display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.bks-tick .ico { width: 15px; height: 15px; stroke-width: 3; }
.bks-svc.on { border-color: var(--v-acc); background: rgba(var(--v-acc-rgb), .06); }
.bks-svc.on .bks-tick { background: var(--v-acc); border-color: var(--v-acc); color: #fff; }
.bks-svc:focus-visible, .bks-cat:focus-visible, .bks-day:focus-visible, .bks-slot:focus-visible, .bks-art:focus-visible, .bks-pay-opt:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }
.bks-picked { margin-top: 1.1rem; padding: .8rem .9rem; border-radius: 18px; background: var(--v-soft); }
.bks-picked-h { font-size: .74rem; color: var(--v-mute); margin-bottom: .4rem; }
.bks-picked-row { display: flex; align-items: center; gap: .55rem; font-size: .84rem; padding: .3rem 0; }
.bks-picked-row > span:nth-child(3) { color: var(--v-mute); font-size: .76rem; margin-left: auto; white-space: nowrap; }
.bks-picked-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bks-picked-row button { border: 0; background: transparent; color: var(--v-mute); cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.bks-picked-row button:hover { color: #C2410C; background: rgba(194, 65, 12, .08); }
.bks-picked-row button .ico { width: 15px; height: 15px; }
.bks-num { width: 22px; height: 22px; border-radius: 50%; background: var(--v-ink); color: var(--v-bg); font-size: .7rem; font-weight: 700; display: grid; place-items: center; flex: none; }

.bks-artists { display: flex; gap: .6rem; overflow-x: auto; margin: 0 -1.2rem; padding: .2rem 1.2rem .4rem; scrollbar-width: none; }
.bks-artists::-webkit-scrollbar { display: none; }
.bks-art { flex: none; width: 108px; display: flex; flex-direction: column; align-items: center; gap: .2rem; border: 1px solid var(--v-line); background: var(--v-bg); color: var(--v-ink); border-radius: 18px; padding: .75rem .45rem .7rem; cursor: pointer; font: inherit; text-align: center; transition: border-color .2s, background .2s; }
.bks-art .artist-card-img { width: 54px !important; height: 54px !important; border-radius: 50% !important; object-fit: cover; margin-bottom: .2rem; aspect-ratio: 1; display: grid; place-items: center; font-size: 1.2rem; }
.bks-art b { font-size: .82rem; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bks-art small { font-size: .7rem; color: var(--v-mute); }
.bks-art.on { border-color: var(--v-acc); background: rgba(var(--v-acc-rgb), .07); box-shadow: inset 0 0 0 1px var(--v-acc); }
.bks-one-art { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: 18px; background: var(--v-soft); }
.bks-one-art .artist-card-img { width: 46px !important; height: 46px !important; border-radius: 50% !important; object-fit: cover; aspect-ratio: 1; display: grid; place-items: center; }
.bks-one-art b { font-size: .9rem; }
.bks-one-art small { display: block; font-size: .74rem; color: var(--v-mute); }
.rank-badge { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .01em; padding: .14rem .45rem; border-radius: 999px; background: var(--v-soft); color: var(--v-ink2); white-space: nowrap; vertical-align: middle; }
.rank-badge.r-junior { background: rgba(31, 138, 91, .12); color: var(--v-ok); }
.rank-badge.r-senior { background: rgba(var(--v-acc-rgb), .12); color: var(--v-acc); }
.rank-badge.r-master { background: var(--v-acc); color: #fff; }
.rank-badge.r-top { background: var(--k-7c3aed); color: #FFFFFF; }

.bks-days { display: flex; gap: .45rem; overflow-x: auto; margin: 0 -1.2rem; padding: .2rem 1.2rem .5rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.bks-days::-webkit-scrollbar { display: none; }
.bks-day { flex: none; scroll-snap-align: start; width: 64px; display: flex; flex-direction: column; align-items: center; gap: .05rem; border: 1px solid var(--v-line); background: var(--v-bg); color: var(--v-ink); border-radius: 16px; padding: .5rem .2rem .45rem; cursor: pointer; font: inherit; transition: border-color .2s, background .2s, color .2s; }
.bks-day small { font-size: .66rem; color: var(--v-mute); white-space: nowrap; }
.bks-day b { font-size: 1.15rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bks-day em { font-style: normal; font-size: .58rem; color: var(--v-mute); white-space: nowrap; }
.bks-day .bks-day-st { font-style: normal; font-size: .6rem; color: var(--v-ok); font-weight: 650; white-space: nowrap; }
.bks-day.full { opacity: .55; }
.bks-day.full .bks-day-st { color: var(--v-mute); }
.bks-day.closed { opacity: .4; cursor: not-allowed; background: repeating-linear-gradient(135deg, var(--v-bg) 0 6px, var(--v-soft) 6px 12px); }
.bks-day.closed .bks-day-st { color: var(--v-mute); }
.bks-day.on { background: var(--v-ink); border-color: var(--v-ink); color: var(--v-bg); opacity: 1; }
.bks-day.on small, .bks-day.on em { color: var(--v-bg); opacity: .75; }
.bks-day.on .bks-day-st { color: var(--v-bg); }
.bks-slots-wrap { margin-top: .4rem; }
.bks-part { margin-top: .8rem; }
.bks-part-h { font-size: .74rem; color: var(--v-mute); margin-bottom: .4rem; }
.bks-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .42rem; }
.bks-slot { border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); border-radius: 12px; padding: .62rem 0; font: 650 .86rem var(--font-b); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.bks-slot:hover { border-color: var(--v-acc); }
.bks-slot.on { background: var(--v-acc); border-color: var(--v-acc); color: #fff; }
.bks-range { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; margin-top: 1rem; padding: .8rem .9rem; border-radius: 16px; background: rgba(var(--v-acc-rgb), .08); color: var(--v-ink); font-size: .84rem; }
.bks-range .ico { width: 18px; height: 18px; color: var(--v-acc); }
.bks-range span { color: var(--v-ink2); font-size: .78rem; }

.bks-form { display: flex; flex-direction: column; gap: .9rem; }
.bks-field { display: flex; flex-direction: column; gap: .35rem; position: relative; }
.bks-field > span { font-size: .78rem; font-weight: 650; color: var(--v-ink2); }
.bks-field > span em { font-style: normal; font-weight: 400; color: var(--v-mute); margin-left: .25rem; }
.bks-field input, .bks-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); border-radius: 14px; padding: .85rem .95rem; font: 400 .95rem var(--font-b); outline: none; transition: border-color .2s, box-shadow .2s; }
.bks-field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.bks-field input:focus, .bks-field textarea:focus { border-color: var(--v-acc); box-shadow: 0 0 0 4px rgba(var(--v-acc-rgb), .12); }
.bks-count { position: absolute; right: .7rem; bottom: .55rem; font-size: .66rem; color: var(--v-mute); }
.bks-fine { display: flex; gap: .45rem; align-items: flex-start; font-size: .76rem; line-height: 1.5; color: var(--v-mute); margin: .9rem 0 0; }
.bks-fine .ico { width: 16px; height: 16px; flex: none; margin-top: .1rem; color: var(--v-acc); }

.bks-receipt { border: 1px solid var(--v-line); border-radius: 20px; padding: .95rem 1rem; background: var(--v-bg); }
.bks-r-top { display: flex; align-items: center; gap: .7rem; }
.bks-r-top .artist-card-img { width: 42px !important; height: 42px !important; border-radius: 50% !important; object-fit: cover; aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.bks-r-top b { display: block; font-size: .95rem; }
.bks-r-top small { display: block; font-size: .76rem; color: var(--v-mute); }
.bks-r-when { display: flex; align-items: center; gap: .45rem; margin: .8rem 0 .5rem; padding: .55rem .7rem; border-radius: 12px; background: var(--v-soft); font-size: .82rem; }
.bks-r-when .ico { width: 16px; height: 16px; color: var(--v-acc); }
.bks-r-when b { margin-left: auto; font-variant-numeric: tabular-nums; }
.bks-r-lines > div { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; font-size: .86rem; }
.bks-r-lines small { display: block; font-size: .72rem; color: var(--v-mute); }
.bks-r-lines b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bks-r-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--v-line2); margin-top: .4rem; padding-top: .6rem; font-size: .9rem; }
.bks-r-total b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.bks-r-total s { font-size: .85rem; font-weight: 400; color: var(--v-mute); }
.bks-r-who, .bks-r-note { display: flex; gap: .45rem; align-items: flex-start; margin-top: .55rem; font-size: .78rem; color: var(--v-ink2); }
.bks-r-who .ico, .bks-r-note .ico { width: 15px; height: 15px; flex: none; margin-top: .1rem; color: var(--v-mute); }
.bks-coupons { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .5rem; font-size: .78rem; color: var(--v-ink2); }
.bks-coupons > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.bks-coupons button { border: 1px solid var(--v-line2); background: transparent; color: var(--v-ink); border-radius: 999px; padding: .3rem .7rem; font: 600 .74rem var(--font-b); cursor: pointer; }
.bks-coupons button.on { background: var(--v-ink); color: var(--v-bg); border-color: var(--v-ink); }
.bks-pay-opts { display: flex; flex-direction: column; gap: .55rem; }
.bks-pay-opt { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: .8rem; width: 100%; text-align: left; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); border-radius: 18px; padding: .95rem 1rem; cursor: pointer; font: inherit; transition: border-color .2s, background .2s, box-shadow .2s; }
.bks-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--v-line2); position: relative; transition: border-color .2s; }
.bks-pay-opt.on { border-color: var(--v-acc); background: rgba(var(--v-acc-rgb), .06); box-shadow: inset 0 0 0 1px var(--v-acc); }
.bks-pay-opt.on .bks-radio { border-color: var(--v-acc); }
.bks-pay-opt.on .bks-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--v-acc); }
.bks-po-txt b { display: block; font-size: .92rem; }
.bks-po-txt small { display: block; font-size: .74rem; color: var(--v-mute); margin-top: .15rem; line-height: 1.4; }
.bks-po-amt { font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.bks-salonpay { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; padding: .9rem 1rem; border-radius: 18px; background: var(--v-soft); }
.bks-salonpay .ico { width: 24px; height: 24px; color: var(--v-acc); flex: none; }
.bks-salonpay b { display: block; font-size: .9rem; }
.bks-salonpay small { display: block; font-size: .76rem; color: var(--v-mute); margin-top: .1rem; }
.bks-notice { margin-top: 1rem; border-radius: 18px; padding: .2rem 1rem; border: 1px solid rgba(var(--v-acc-rgb), .28); background: rgba(var(--v-acc-rgb), .05); }
.bks-notice > div { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem 0; font-size: .8rem; line-height: 1.5; color: var(--v-ink2); }
.bks-notice > div + div { border-top: 1px solid var(--v-line); }
.bks-notice .ico { width: 19px; height: 19px; flex: none; color: var(--v-acc); margin-top: .05rem; }
.bks-notice b { color: var(--v-ink); }
.bks-xp { margin-top: .8rem; font-size: .76rem; color: var(--v-ok); font-weight: 650; text-align: center; }
.bks-inv { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding-top: .3rem; }
.bks-inv-amt small { display: block; font-size: .78rem; color: var(--v-mute); }
.bks-inv-amt b { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bks-inv-clock { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--v-warn); font-weight: 650; padding: .3rem .7rem; border-radius: 999px; background: rgba(180, 83, 26, .1); }
.bks-inv-clock .ico { width: 15px; height: 15px; }
.bks-inv .pay-qr { width: 210px; height: 210px; border-radius: 18px; border: 1px solid var(--v-line); padding: 8px; background: #fff; }
.bks-inv .pay-banks { width: 100%; }
.bks-inv-st { font-size: .82rem; color: var(--v-ink2); min-height: 1.2rem; }
.bks-inv .bks-fine { text-align: left; }

.bks-done { text-align: center; padding: 1.2rem .2rem .4rem; }
.bks-done-ic { width: 84px; height: 84px; margin: .4rem auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--v-ok); color: #fff; position: relative; animation: bksPop .5s var(--v-ease) both; }
.bks-done-ic::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--v-ok); opacity: 0; animation: bksRing .9s .15s var(--v-ease) both; }
.bks-done.wait .bks-done-ic { background: var(--v-acc); }
.bks-done.wait .bks-done-ic::after { border-color: var(--v-acc); }
.bks-done-ic .ico { width: 40px; height: 40px; stroke-width: 2.6; }
@keyframes bksPop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } to { transform: none; } }
@keyframes bksRing { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.25); opacity: 0; } }
.bks .bks-done h4 { margin: 0; font-family: var(--font-s) !important; font-weight: 400; font-size: 1.6rem; color: var(--v-ink); }
.bks .bks-done h4 { font-family: var(--font-b) !important; font-weight: 700; font-size: 1.4rem; }
.bks .artist-card-ini { font-size: 1.05rem !important; font-weight: 600; }
.bks-done-when { margin: .5rem 0 1.1rem; display: flex; flex-direction: column; gap: .1rem; }
.bks-done-when b { font-size: .95rem; }
.bks-done-when span { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bks-done-rows { text-align: left; border: 1px solid var(--v-line); border-radius: 18px; padding: .4rem 1rem; }
.bks-done-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .84rem; }
.bks-done-rows > div + div { border-top: 1px solid var(--v-line); }
.bks-done-rows span { color: var(--v-mute); white-space: nowrap; }
.bks-done-rows b { text-align: right; font-weight: 600; }
.bks-done .bks-fine { text-align: left; }
.bks-calls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; justify-content: center; }
.bks-calls a { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--v-line2); border-radius: 999px; padding: .5rem .9rem; color: var(--v-ink); text-decoration: none; font-size: .82rem; font-weight: 600; }
.bks-calls a .ico { width: 15px; height: 15px; color: var(--v-acc); }

@media (max-width: 700px) {
  .bks-overlay { padding: 0; align-items: stretch; }
  .bks { width: 100%; height: 100%; height: 100dvh; border-radius: 0; animation: bksUp .3s var(--v-ease); }
  @keyframes bksUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .bks-head { padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1rem .7rem; }
  .bks-body { padding: .9rem 1rem 1.2rem; }
  .bks-cats, .bks-artists, .bks-days { margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
  .bks-foot { padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .bks-steps span { display: none; }
  .bks-steps li.cur span { display: block; position: absolute; top: 32px; white-space: nowrap; }
  .bks-steps { padding-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bks, .bks-page.in-fwd, .bks-page.in-back, .bks-done-ic, .bks-done-ic::after, .bks-err.shake { animation: none !important; }
  .bks-steps::after { transition: none; }
}
.modal-tab-book { color: var(--v-acc) !important; font-weight: 700 !important; }
.bks-any-ic { display: grid !important; place-items: center; background: rgba(var(--v-acc-rgb), .1) !important; color: var(--v-acc); }
.bks-any-ic .ico { width: 24px; height: 24px; }
.bhi-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; align-items: center; }
.reorder-btn.move { color: var(--v-acc); border-color: rgba(var(--v-acc-rgb), .45); }
.reorder-btn.danger { color: #c44a4a; border-color: rgba(196, 74, 74, .4); }
.bhi-for { display: flex; align-items: flex-start; gap: .35rem; font-size: .76rem; color: var(--v-ink2); margin-top: .3rem; }
.bhi-for .ico { width: 14px; height: 14px; flex: none; margin-top: .12rem; color: var(--v-mute); }
.bhi-until { font-size: .7rem; color: var(--v-mute); margin-top: .4rem; }
.bhi-locked { display: block; font-size: .74rem; color: var(--v-warn); margin-top: .45rem; line-height: 1.45; }
.bhi-locked .ico { width: 13px; height: 13px; vertical-align: -.15em; }
.bhi-locked a { color: var(--v-acc); font-weight: 650; text-decoration: none; }
.bks-field select { width: 100%; box-sizing: border-box; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); border-radius: 14px; padding: .8rem .9rem; font: 400 .92rem var(--font-b); outline: none; }
.bks-field select:focus { border-color: var(--v-acc); box-shadow: 0 0 0 4px rgba(var(--v-acc-rgb), .12); }
.bks .bks-title, .bks .wiz-card-h { color: var(--v-ink) !important; }
.wiz-skip { border: 0; background: transparent; color: var(--v-mute); font: 600 .86rem var(--font-b); padding: 0 .8rem; min-height: 50px; cursor: pointer; border-radius: 14px; }
.wiz-skip:hover { color: var(--v-ink); background: var(--v-soft); }
.wiz-lead { margin: 0 0 1rem; font-size: .86rem; line-height: 1.55; color: var(--v-ink2); }
.wiz-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.wiz-hours { display: grid; grid-template-columns: 1fr auto 1fr; gap: .45rem .4rem; align-items: center; }
.wiz-hours i { font-style: normal; color: var(--v-mute); text-align: center; }
.wiz-hours select { width: 100%; box-sizing: border-box; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); border-radius: 12px; padding: .7rem .6rem; font: 400 .9rem var(--font-b); }
.wiz-card { margin-top: 1rem; border: 1px solid var(--v-line); border-radius: 20px; padding: 1rem; background: var(--v-bg); }
.wiz-card-h { font: 650 .9rem var(--font-b); margin-bottom: .8rem; }
.wiz-check { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--v-ink2); cursor: pointer; }
.wiz-check input { width: 18px; height: 18px; accent-color: var(--v-acc); }
.wiz-add { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: 14px; min-height: 46px; padding: 0 1.1rem; font: 700 .86rem var(--font-b); color: #fff; background: var(--v-ink); cursor: pointer; }
.wiz-add .ico { width: 16px; height: 16px; }
.wiz-add.ghost { background: transparent; color: var(--v-ink); border: 1px solid var(--v-line2); }
.wiz-list { display: flex; flex-direction: column; gap: .45rem; }
.wiz-item { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 16px; background: var(--v-soft); font-size: .86rem; }
.wiz-item > div { flex: 1; min-width: 0; }
.wiz-item b { display: block; font-weight: 650; }
.wiz-item small { display: block; font-size: .74rem; color: var(--v-mute); }
.wiz-item > span { font-weight: 700; font-variant-numeric: tabular-nums; }
.wiz-item button { border: 0; background: transparent; color: var(--v-mute); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.wiz-item button .ico { width: 15px; height: 15px; }
.wiz-item .artist-card-img { width: 38px !important; height: 38px !important; border-radius: 50% !important; object-fit: cover; flex: none; display: grid; place-items: center; aspect-ratio: 1; }
.wiz-cover { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 2px dashed var(--v-line2); display: grid; place-items: center; cursor: pointer; background: var(--v-soft); }
.wiz-cover img { width: 100%; height: 100%; object-fit: cover; }
.wiz-cover span { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--v-ink2); font-size: .86rem; }
.wiz-cover .ico { width: 30px; height: 30px; color: var(--v-acc); }
.wiz-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; margin-top: .8rem; }
.wiz-gal img, .wiz-gal-add { width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; }
.wiz-gal-add { border: 1px dashed var(--v-line2); background: transparent; color: var(--v-ink2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; font: 600 .72rem var(--font-b); cursor: pointer; }
.wiz-gal-add .ico { width: 22px; height: 22px; color: var(--v-acc); }
.wiz-up { min-height: 1rem; font-size: .76rem; color: var(--v-acc); margin-top: .5rem; }
.wiz-map { height: 300px; border-radius: 20px; overflow: hidden; border: 1px solid var(--v-line); background: var(--v-soft); position: relative; z-index: 0; }
.wiz-map-off { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; text-align: center; font-size: .82rem; color: var(--v-ink2); }
.wiz-map-off .ico { width: 28px; height: 28px; color: var(--v-acc); }
.wiz-map-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .7rem; flex-wrap: wrap; }
.wiz-map-bar span { font-size: .78rem; color: var(--v-mute); font-variant-numeric: tabular-nums; }
.wiz-done { text-align: center; padding: .6rem 0 .2rem; }
.wiz-done .bks-done-ic { background: var(--v-acc); }
.wiz-done.live .bks-done-ic { background: var(--v-ok); }
.wiz-done p { font-size: .9rem; line-height: 1.55; color: var(--v-ink2); margin: 0 auto 1rem; max-width: 30rem; }
.wiz-done p b { color: var(--v-ink); }
.wiz-sums { display: flex; flex-direction: column; gap: .45rem; }
.wiz-sum { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: .7rem; text-align: left; border: 1px solid var(--v-line); background: var(--v-bg); color: var(--v-ink); border-radius: 16px; padding: .65rem .85rem; font: inherit; cursor: pointer; }
.wiz-sum-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--v-soft); color: var(--v-mute); font: 700 .8rem var(--font-b); }
.wiz-sum-ic .ico { width: 15px; height: 15px; stroke-width: 3; }
.wiz-sum.ok .wiz-sum-ic { background: var(--v-ok); color: #fff; }
.wiz-sum b { font-size: .88rem; }
.wiz-sum small { font-size: .74rem; color: var(--v-mute); }
.wiz-sum:not(.ok) small { color: var(--v-warn); }
.bks-steps li.skipped b { border-style: dashed; }
.wiz .bks-steps span { font-size: .6rem; }
.setup-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: 20px; background: rgba(var(--v-acc-rgb), .06); border: 1px solid rgba(var(--v-acc-rgb), .25); }
.setup-card.draft { background: rgba(180, 83, 26, .06); border-color: rgba(180, 83, 26, .3); }
.sc-ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--v-acc) calc(var(--p) * 1%), var(--v-line2) 0); position: relative; }
.sc-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--v-bg); }
.sc-ring b { position: relative; font: 800 .82rem var(--font-b); color: var(--v-ink); }
.sc-txt { flex: 1; min-width: 0; }
.sc-txt b { display: block; font-size: .9rem; color: var(--v-ink); }
.sc-txt small { display: block; font-size: .76rem; color: var(--v-ink2); margin-top: .15rem; line-height: 1.45; }
.sc-go { border: 0; border-radius: 12px; background: var(--v-acc); color: #fff; font: 700 .82rem var(--font-b); padding: .65rem 1rem; cursor: pointer; white-space: nowrap; }
@media (max-width: 520px) {
  .wiz-row { grid-template-columns: 1fr; }
  .setup-card { flex-wrap: wrap; }
  .sc-go { width: 100%; }
  .wiz .bks-steps span { display: none; }
  .wiz .bks-steps li.cur span { display: block; position: absolute; top: 32px; white-space: nowrap; }
  .wiz .bks-steps { padding-bottom: 1rem; }
}
.tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font: 700 .66rem var(--font-b); display: inline-grid; place-items: center; margin-left: .3rem; vertical-align: 1px; }
.tab-badge[hidden] { display: none; }
.sn-empty { color: rgba(255, 240, 246, .6); font-size: .82rem; }
.sn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.sn-title { font-family: var(--font-s) !important; font-size: 1.35rem; color: #FFF5F8; }
.sn-title { font-family: var(--font-b) !important; font-weight: 700; }
.sn-sub { font-size: .76rem; color: rgba(255, 240, 246, .62); margin-top: .15rem; }
.sn-seen { border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #FFF5F8; border-radius: 999px; padding: .45rem .9rem; font: 600 .76rem var(--font-b); cursor: pointer; white-space: nowrap; }
.sn-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .6rem; scrollbar-width: none; }
.sn-chips::-webkit-scrollbar { display: none; }
.sn-chip { flex: none; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: rgba(255, 245, 248, .82); border-radius: 999px; padding: .42rem .8rem; font: 600 .76rem var(--font-b); cursor: pointer; white-space: nowrap; }
.sn-chip i { font-style: normal; min-width: 17px; height: 17px; border-radius: 9px; background: #E5484D; color: #fff; font-size: .64rem; display: grid; place-items: center; padding: 0 4px; }
.sn-chip.on { background: #FFF5F8; color: #1B0B22; border-color: #FFF5F8; }
.sn-sec { margin-top: 1rem; }
.sn-sec-h { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.sn-sec-h b { font-size: .9rem; color: #FFF5F8; }
.sn-sec-h span { font-size: .7rem; color: #FF9EA2; font-weight: 700; }
.sn-sec-h a { margin-left: auto; font-size: .72rem; color: var(--gold); cursor: pointer; }
.sn-item { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .9rem .8rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); margin-bottom: .45rem; }
.sn-item .artist-card-img { width: 38px !important; height: 38px !important; border-radius: 50% !important; object-fit: cover; flex: none; display: grid; place-items: center; aspect-ratio: 1; }
.sn-dot { position: absolute; left: .4rem; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: #FF6B70; box-shadow: 0 0 0 3px rgba(255, 107, 112, .18); }
.sn-main { flex: 1; min-width: 0; }
.sn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.sn-row b { font-size: .88rem; color: #FFF5F8; }
.sn-meta { font-size: .74rem; color: rgba(255, 240, 246, .62); margin-top: .2rem; line-height: 1.45; overflow-wrap: anywhere; }
.sn-meta a { color: var(--gold); text-decoration: none; }
.sn-warn { color: #F0A15E; }
.sn-tag { font-size: .64rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 245, 248, .82); }
.sn-tag.ok { background: rgba(76, 195, 138, .18); color: #7BE0AE; }
.sn-stars { color: #F2C14E; font-size: .78rem; letter-spacing: .05em; }
.sn-prog { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); margin-top: .45rem; overflow: hidden; }
.sn-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--k-7c3aed), var(--k-c4b5fd)); border-radius: 2px; }
.sn-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex: none; }
.sn-when { font-size: .66rem; color: rgba(255, 240, 246, .5); white-space: nowrap; }
.sn-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.sn-photos figure { margin: 0; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .05); position: relative; }
.sn-photos figure.new::after { content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #FF6B70; box-shadow: 0 0 0 2px #1B0B22; }
.sn-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sn-photos figcaption { font-size: .68rem; color: rgba(255, 245, 248, .8); padding: .35rem .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-photos figcaption small { display: block; color: rgba(255, 240, 246, .5); font-size: .6rem; }

.ai-fab { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 460; display: inline-flex; align-items: center; gap: .5rem; height: 52px; padding: 0 1.2rem 0 1rem; border: 0; border-radius: 999px; background: var(--v-ink); color: var(--v-bg); font: 650 .9rem var(--font-b); cursor: pointer; box-shadow: 0 16px 32px -16px rgba(20, 6, 26, .6), 0 2px 6px rgba(20, 6, 26, .14); transition: transform .2s var(--v-ease), box-shadow .2s; }
.ai-fab .ico { width: 22px; height: 22px; }
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(20, 6, 26, .65), 0 2px 6px rgba(20, 6, 26, .14); }
.ai-fab:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 3px; }
.ai-fab[hidden], body.admin-mode .ai-fab, body.sa-full-mode .ai-fab, body.ai-on .ai-fab, body.bks-on .ai-fab, body.tryon-on .ai-fab { display: none; }

.ai-chat { position: fixed; z-index: 520; right: 20px; bottom: 20px; width: 392px; height: min(660px, calc(100vh - 104px)); display: flex; flex-direction: column; background: var(--v-bg); color: var(--v-ink); border: 1px solid var(--v-line); border-radius: 24px; box-shadow: 0 34px 80px -34px rgba(20, 6, 26, .55), 0 4px 14px rgba(20, 6, 26, .08); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.98); transform-origin: 100% 100%; transition: opacity .22s, transform .28s var(--v-ease); }
.ai-chat.open { opacity: 1; transform: none; }
.ai-chat[hidden] { display: none; }
.ai-head, .ai-log, .ai-form { border-radius: 0; }
.ai-head { display: flex; align-items: center; gap: .7rem; padding: .85rem .8rem .85rem 1rem; border-bottom: 1px solid var(--v-line); flex: none; }
.ai-mark { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--v-acc-rgb), .12); color: var(--v-acc); flex: none; }
.ai-mark .ico { width: 20px; height: 20px; }
.ai-head-txt { flex: 1; min-width: 0; }
.ai-head-txt b { display: block; font-size: .95rem; font-weight: 650; color: var(--v-ink); }
.ai-head-txt small { display: block; font-size: .72rem; color: var(--v-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-hbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--v-ink2); display: grid; place-items: center; cursor: pointer; flex: none; transition: background .2s; }
.ai-hbtn:hover { background: var(--v-soft); }
.ai-hbtn:focus-visible, .ai-send:focus-visible, .ai-tip:focus-visible, .ai-card:focus-visible, .ai-retry:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }
.ai-hbtn .ico { width: 19px; height: 19px; }
.ai-log { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1rem 1rem .7rem; display: flex; flex-direction: column; gap: .7rem; }
.ai-hello { display: flex; flex-direction: column; gap: .8rem; }
.ai-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.ai-msg.me { align-items: flex-end; }
.ai-bub { max-width: 88%; padding: .62rem .9rem; border-radius: 18px; font-size: .88rem; line-height: 1.55; overflow-wrap: anywhere; }
.ai-msg.me .ai-bub { background: var(--v-acc); color: #fff; border-bottom-right-radius: 6px; }
.ai-msg.bot .ai-bub { background: var(--v-soft); color: var(--v-ink); border-bottom-left-radius: 6px; }
.ai-bub p { margin: 0; }
.ai-bub p + p, .ai-bub p + ul, .ai-bub p + ol, .ai-bub ul + p, .ai-bub ol + p { margin-top: .45rem; }
.ai-bub ul, .ai-bub ol { margin: .3rem 0 0; padding-left: 1.15rem; }
.ai-bub li + li { margin-top: .2rem; }
.ai-bub b { font-weight: 700; }
.ai-msg.note .ai-bub { background: transparent; border: 1px dashed var(--v-line2); color: var(--v-ink2); }
.ai-retry { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); border-radius: 999px; padding: .38rem .8rem; font: 600 .76rem var(--font-b); cursor: pointer; }
.ai-retry .ico { width: 14px; height: 14px; }
.ai-typing { display: inline-flex; align-items: center; gap: 5px; padding: .85rem 1rem; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--v-mute); animation: aiDot 1.1s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-tips { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.ai-tip { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; text-align: left; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); border-radius: 14px; padding: .6rem .85rem; font: 500 .84rem/1.35 var(--font-b); cursor: pointer; transition: border-color .2s, background .2s; }
.ai-tip:hover { border-color: var(--v-acc); }
.ai-tip .ico { width: 17px; height: 17px; flex: none; }
.ai-tip-try { color: var(--v-acc); border-color: rgba(var(--v-acc-rgb), .35); background: rgba(var(--v-acc-rgb), .06); font-weight: 650; }
.ai-cards { display: flex; gap: .55rem; overflow-x: auto; width: calc(100% + 2rem); margin: .55rem -1rem 0; padding: .1rem 1rem .35rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.ai-cards::-webkit-scrollbar { display: none; }
.ai-card { flex: none; width: 172px; scroll-snap-align: start; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--v-line); background: var(--v-bg); color: var(--v-ink); border-radius: 16px; padding: 0 0 .65rem; overflow: hidden; cursor: pointer; font: inherit; transition: border-color .2s, transform .15s; }
.ai-card:hover { border-color: var(--v-acc); }
.ai-card:active { transform: scale(.985); }
.ai-card-img { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; background: var(--v-soft); overflow: hidden; border-radius: 0; }
.ai-card-img i { font-style: normal; font: 700 1.5rem var(--font-b); color: var(--v-acc); }
.ai-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.ai-card b { display: block; padding: .55rem .75rem 0; font-size: .84rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-card small { display: block; padding: .12rem .75rem 0; font-size: .72rem; color: var(--v-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-form { flex: none; margin: 0; border-top: 1px solid var(--v-line); padding: .7rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--v-bg); }
.ai-input { display: flex; align-items: flex-end; gap: .5rem; border: 1px solid var(--v-line2); border-radius: 22px; padding: .3rem .3rem .3rem .95rem; background: var(--v-bg); transition: border-color .2s, box-shadow .2s; }
.ai-input:focus-within { border-color: var(--v-acc); box-shadow: 0 0 0 4px rgba(var(--v-acc-rgb), .12); }
.ai-input textarea { flex: 1; min-width: 0; min-height: 0; max-height: 120px; border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; color: var(--v-ink); resize: none; font: 400 .92rem/1.45 var(--font-b); padding: .5rem 0 !important; margin: 0; }
.ai-input textarea::placeholder { color: var(--v-mute); }
.ai-send { width: 40px; height: 40px; border-radius: 50% !important; border: 0; background: var(--v-acc); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: opacity .2s, transform .15s; }
.ai-send:active { transform: scale(.94); }
.ai-send:disabled { opacity: .45; cursor: default; }
.ai-send .ico { width: 18px; height: 18px; }
.ai-fine { font-size: .68rem; line-height: 1.4; color: var(--v-mute); text-align: center; margin-top: .45rem; }

.ai-band[hidden] { display: none; }
body.admin-mode .ai-band, body.sa-full-mode .ai-band { display: none !important; }
.ai-band-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); grid-template-areas: "txt drop" "more drop"; grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: 1.2rem; padding: clamp(1.3rem, 3vw, 2.4rem); border-radius: 28px; background: var(--v-bg); border: 1px solid var(--v-line); }
.ai-band-txt { grid-area: txt; }
.ai-band-txt .row-head { margin-bottom: .8rem !important; }
.ai-band-lead { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--v-ink2); max-width: 46ch; }
.ai-band-more { grid-area: more; align-self: start; }
.ai-band .ai-drop { grid-area: drop; align-self: stretch; justify-content: center; }
.ai-steps { list-style: none; counter-reset: aistep; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ai-steps li { counter-increment: aistep; display: grid; grid-template-columns: 30px 1fr; column-gap: .75rem; align-items: center; }
.ai-steps li::before { content: counter(aistep); grid-row: span 2; align-self: start; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem var(--font-b); background: rgba(var(--v-acc-rgb), .1); color: var(--v-acc); }
.ai-steps b { font-size: .9rem; font-weight: 650; color: var(--v-ink); }
.ai-steps span { font-size: .78rem; color: var(--v-mute); }
.ai-band-fine { margin: 1.1rem 0 0; font-size: .78rem; color: var(--v-mute); }
.ai-band-ask { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; border: 0; background: transparent; color: var(--v-acc); font: 650 .86rem var(--font-b); padding: .3rem 0; cursor: pointer; }
.ai-band-ask .ico { width: 18px; height: 18px; }
.ai-band-ask[hidden] { display: none; }

.ai-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1.5rem 1.2rem; border: 1.5px dashed var(--v-line2); border-radius: 24px; background: rgba(var(--v-acc-rgb), .035); transition: border-color .2s, background .2s; }
.ai-drop.over { border-color: var(--v-acc); background: rgba(var(--v-acc-rgb), .08); }
.ai-drop-ic { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--v-bg); color: var(--v-acc); box-shadow: 0 12px 26px -16px rgba(var(--v-acc-rgb), .8), 0 0 0 1px rgba(var(--v-acc-rgb), .14); }
.ai-drop-ic .ico { width: 30px; height: 30px; stroke-width: 1.8; }
.ai-drop-txt b { display: block; font-size: 1rem; font-weight: 650; color: var(--v-ink); }
.ai-drop-txt small { display: block; font-size: .78rem; line-height: 1.5; color: var(--v-mute); max-width: 32ch; margin: .3rem auto 0; }
.ai-drop-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ai-drop-or { font-size: .72rem; color: var(--v-mute); }
.ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: 0 1.15rem; border-radius: 14px; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); font: 650 .86rem var(--font-b); cursor: pointer; transition: border-color .2s, transform .15s; }
.ai-btn:hover { border-color: var(--v-acc); }
.ai-btn:active { transform: scale(.985); }
.ai-btn.acc { background: var(--v-acc); border-color: var(--v-acc); color: #fff; box-shadow: 0 12px 24px -14px rgba(var(--v-acc-rgb), .9); }
.ai-btn .ico { width: 18px; height: 18px; }
.ai-btn:focus-visible, .tr-seg button:focus-visible, .tr-opt:focus-visible, .tr-act:focus-visible, .tr-th:focus-visible, .tr-change:focus-visible, .ai-band-ask:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }

.tr-seg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--v-soft); }
.tr-seg button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: 999px; background: transparent; color: var(--v-mute); padding: .5rem 1rem; font: 600 .82rem var(--font-b); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.tr-seg button .ico { width: 17px; height: 17px; }
.tr-seg button.on { background: var(--v-bg); color: var(--v-ink); box-shadow: 0 4px 12px -6px rgba(20, 6, 26, .35); }
body.tryon-on { overflow: hidden; }
body.tryon-on #authOverlay { z-index: 950; }
.tr-top { display: flex; justify-content: center; margin-bottom: .9rem; }
.tr-stage { position: relative; width: min(100%, calc(var(--tr-max, 50vh) * var(--ar, .8))); aspect-ratio: var(--ar, .8); margin: 0 auto; border-radius: 22px; overflow: hidden; background: #0E0B10; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tr-stage.cmp { cursor: col-resize; }
.tr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; pointer-events: none; -webkit-user-drag: none; }
.tr-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.tr-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 48px; transform: translateX(-50%); display: grid; place-items: center; cursor: ew-resize; touch-action: none; outline: none; border-radius: 0; }
.tr-handle i { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .35); }
.tr-handle b { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #17121A; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transition: transform .15s; }
.tr-handle b .ico { width: 15px; height: 15px; stroke-width: 2.8; margin: 0 -2px; }
.tr-stage.drag .tr-handle b { transform: scale(1.08); }
.tr-handle:focus-visible b { box-shadow: 0 0 0 3px var(--v-acc), 0 8px 20px rgba(0, 0, 0, .35); }
.tr-tag { position: absolute; top: .7rem; max-width: 44%; padding: .3rem .65rem; border-radius: 999px; background: rgba(14, 10, 16, .58); color: #fff; font: 650 .7rem var(--font-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.tr-tag.l { left: .7rem; }
.tr-tag.r { right: .7rem; }
.tr-change { position: absolute; right: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .35rem; border: 0; border-radius: 999px; padding: .45rem .8rem; background: rgba(14, 10, 16, .62); color: #fff; font: 650 .74rem var(--font-b); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.dark-mode span.tr-tag.tr-tag.tr-tag { color: #fff !important; }
.tr-change .ico { width: 14px; height: 14px; }
.tr-stage.busy .tr-img { filter: saturate(.55) brightness(.82); transition: filter .4s; }
.tr-scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(var(--v-acc-rgb), 0) 38%, rgba(var(--v-acc-rgb), .35) 47%, rgba(255, 255, 255, .7) 50%, rgba(var(--v-acc-rgb), .35) 53%, rgba(var(--v-acc-rgb), 0) 62%, transparent 100%); background-size: 100% 240%; animation: trScan 2s linear infinite; mix-blend-mode: screen; pointer-events: none; }
@keyframes trScan { from { background-position: 0 100%; } to { background-position: 0 -140%; } }
.tr-busy { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: inline-flex; align-items: baseline; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; background: rgba(14, 10, 16, .66); color: #fff; font: 650 .82rem var(--font-b); white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tr-busy small { font-weight: 400; opacity: .78; font-size: .72rem; }
.tr-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .8rem; }
.tr-act { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .95rem; border-radius: 999px; border: 1px solid var(--v-line2); background: var(--v-bg); color: var(--v-ink); font: 600 .8rem var(--font-b); cursor: pointer; }
.tr-act:hover { border-color: var(--v-acc); }
.tr-act.acc { border-color: rgba(var(--v-acc-rgb), .45); color: var(--v-acc); background: rgba(var(--v-acc-rgb), .06); }
.tr-act .ico { width: 16px; height: 16px; }
.tr-strip-h { font-size: .74rem; color: var(--v-mute); margin: 1rem 0 .4rem; }
.tr-strip { display: flex; gap: .5rem; overflow-x: auto; margin: 0 -1.2rem; padding: .1rem 1.2rem .3rem; scrollbar-width: none; }
.tr-strip::-webkit-scrollbar { display: none; }
.tr-th { flex: none; width: 70px; display: flex; flex-direction: column; gap: .25rem; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.tr-th img { width: 70px; height: 70px; object-fit: cover; border-radius: 14px !important; border: 2px solid transparent; box-sizing: border-box; transition: border-color .2s; }
.tr-th.on img { border-color: var(--v-acc); }
.tr-th span { font-size: .64rem; color: var(--v-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-note { display: flex; gap: .45rem; align-items: flex-start; margin: .8rem 0 0; font-size: .72rem; line-height: 1.5; color: var(--v-mute); }
.tr-note .ico { width: 15px; height: 15px; flex: none; margin-top: .12rem; color: var(--v-acc); }
.tr-label { margin-top: 1.2rem !important; }
.tr-cats .bks-cat.on { background: var(--v-ink); border-color: var(--v-ink); color: var(--v-bg); }
.tr-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tr-opt { display: flex; align-items: center; gap: .6rem; min-height: 54px; text-align: left; border: 1px solid var(--v-line); background: var(--v-bg); color: var(--v-ink); border-radius: 16px; padding: .6rem .65rem .6rem .8rem; font: 600 .84rem var(--font-b); cursor: pointer; transition: border-color .2s, background .2s, transform .12s; }
.tr-opt:active { transform: scale(.985); }
.tr-opt-l { flex: 1; min-width: 0; line-height: 1.3; }
.tr-opt .bks-tick { width: 22px; height: 22px; flex: none; }
.tr-opt .bks-tick .ico { width: 13px; height: 13px; }
.tr-opt.on { border-color: var(--v-acc); background: rgba(var(--v-acc-rgb), .06); }
.tr-opt.on .bks-tick { background: var(--v-acc); border-color: var(--v-acc); color: #fff; }
body.dark-mode span.bks-tick.bks-tick.bks-tick.bks-tick { color: transparent !important; }
body.dark-mode .on > span.bks-tick.bks-tick.bks-tick.bks-tick { color: #fff !important; }
.tr-sw { width: 26px; height: 26px; flex: none; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.tr-custom textarea { min-height: 84px; }
.tr .bks-next:disabled { cursor: not-allowed; }
.tr-fine { font-size: .7rem; color: var(--v-mute); text-align: center; margin-top: .45rem; min-height: .9rem; }
.tr-fine:empty { display: none; }
.tr #trDrop { margin-top: .2rem; }

@media (max-width: 860px) {
  .ai-band-in { grid-template-columns: 1fr; grid-template-areas: "txt" "drop" "more"; grid-template-rows: auto; }
  .ai-band-lead { max-width: none; }
}
@media (max-width: 700px) {
  .ai-fab { height: 48px; padding: 0 1rem 0 .85rem; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font-size: .86rem; }
  .ai-chat { left: 0; right: 0; bottom: auto; top: var(--ai-top, 0px); width: 100%; height: var(--ai-vh, 100dvh); border: 0; border-radius: 0 !important; transform: translateY(24px); }
  .ai-chat.open { transform: none; }
  body.ai-on { overflow: hidden; }
  .ai-head { padding-top: calc(.75rem + env(safe-area-inset-top, 0px)); }
  .ai-band-in { padding: 1.1rem; border-radius: 22px; }
  .ai-drop { padding: 1.2rem 1rem; }
  .tr-stage { --tr-max: 46vh; }
  .ai-band .ai-drop-btns { flex-direction: column; align-self: stretch; }
  .ai-band .ai-drop-btns .ai-btn { width: 100%; }
  .tr-strip { margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat, .ai-fab, .ai-card, .ai-btn { transition: none; }
  .ai-typing i { animation: none; opacity: .6; }
  .tr-scan { animation: none; opacity: .3; }
}
.art-rank { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .72rem; color: var(--s0-text2, #6B6B76); }
.art-rank select { border: 1px solid var(--border, rgba(0, 0, 0, .15)); border-radius: 10px; padding: .25rem .5rem; font: 500 .76rem var(--font-b); background: transparent; color: inherit; }
.acct-pw { margin-top: 1.6rem; border: 1px solid var(--border, rgba(0, 0, 0, .12)); border-radius: 16px; padding: .2rem 1rem; }
.acct-pw summary { cursor: pointer; padding: .8rem 0; font-weight: 600; font-size: .88rem; list-style-position: inside; }
.acct-pw[open] { padding-bottom: 1rem; }
.acct-pw .pw-rules { margin: -.2rem 0 .6rem; }

.tr [hidden] { display: none !important; }
.tr-bal { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid rgba(var(--v-acc-rgb), .35); background: rgba(var(--v-acc-rgb), .06); color: var(--v-acc); border-radius: 999px; padding: .15rem .6rem; font: 700 .76rem var(--font-b); cursor: pointer; white-space: nowrap; }
.tr-bal .ico { width: 13px; height: 13px; }
.tr-buy-lead { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.55; color: var(--v-ink2); }
.tr-buy-lead b { color: var(--v-ink); }
.tr .bks-inv { padding-top: .4rem; }
.ai-sa-h { margin: 1rem 0 .4rem; font: 650 .82rem var(--font-b); color: #FFF5F8; }
.ai-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .5rem .9rem; margin-top: .4rem; }
.ai-pack-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.ai-pack-row .sd-f { min-width: 0; }
.ai-pack-row .sd-f input { width: 100%; min-width: 0; box-sizing: border-box; }
body.dark-mode button.tr-bal { color: var(--lx-accent-lt, #C4B5FD) !important; }
.ai-loc[disabled] { opacity: .6; cursor: default; }
.ai-prov { display: grid; gap: .45rem; margin: .2rem 0 .7rem; }
.ai-prov-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .55rem .75rem; border: 1px solid rgba(var(--k-124-58-237),.22); border-radius: 12px !important; background: rgba(255,255,255,.05); }
.ai-prov-row b { min-width: 3.2rem; font-size: .84rem; color: #F0F0F4; }
.ai-prov-row .ai-prov-m { flex: 1 1 12rem; min-width: 0; font-size: .8rem; color: #b9a99c; overflow-wrap: anywhere; }
.ai-prov-row .sd-state { margin-left: auto; }
.ai-err { font-size: .8rem; overflow-wrap: anywhere; }
.ai-cmd { font: 600 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; background: rgba(255,255,255,.1); color: #F0F0F4; border-radius: 6px; padding: .05rem .35rem; overflow-wrap: anywhere; }
.ai-card-img .ai-card-km { position: absolute; top: 8px; left: 8px; z-index: 1; padding: .2rem .55rem; border-radius: 999px; background: rgba(20, 12, 18, .66); color: #fff; font: 650 .72rem/1.2 var(--font-b); letter-spacing: .01em; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }