/* Booking page and business app, on top of site.css */
.book { padding: 56px 0 40px; }
body.embed { background: var(--bg); }
body.embed .book { padding: 16px 0 8px; }
body.embed::after { display: none; }
.book-wrap { max-width: 980px; }
.book-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.book-head h1 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 8px; }
.book-head .lead { margin-bottom: 8px; }
.book-meta { font-size: 13px; letter-spacing: .04em; }
.book-meta a { text-decoration: underline; text-decoration-color: var(--accent); }
.steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.steps li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); }
.steps li.on { border-color: var(--accent); color: var(--accent); }
.steps li.ok { border-color: var(--line2); }
.book-list .book-row { grid-template-columns: 1fr 90px 110px; text-decoration: none; padding: 18px 24px; align-items: center; gap: 16px; }
.book-row p, .book-row h4 { margin: 0; }
.book-row h4 { font-size: 18px; }
.book-row p:not(.mono) { font-size: 14px; margin-top: 4px; }
.book-row:hover { text-decoration: none; }
.book-row .price { text-align: right; }
.staff-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; transition: background .2s, border-color .2s; }
.day:hover { background: var(--glass2); border-color: var(--line2); text-decoration: none; }
.day.off { opacity: .45; }
.day .dow, .day .mon, .day .n { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.day .dom { font-family: var(--display); font-size: 24px; font-weight: 600; }
.day .n { color: var(--accent); margin-top: 4px; }
.day.off .n { color: #fff; }
.times { display: flex; flex-wrap: wrap; gap: 10px; }
.book-summary { padding: 24px 26px; }
.book-summary h4 { font-size: 24px; margin-bottom: 8px; }
.book-done { padding: 36px 32px; }
.book-foot { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 40px; }
.book-foot a { text-decoration: underline; text-decoration-color: var(--accent); }
@media (max-width: 860px) { .days { grid-template-columns: repeat(4, 1fr); } .book-list .book-row { grid-template-columns: 1fr; } .book-row .price { text-align: left; } .steps { flex-wrap: wrap; } }

/* app */
.app-nav { position: sticky; top: 0; z-index: 20; background: rgba(7, 8, 13, 0.7); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.app-nav .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }
.app-nav nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.app-nav nav a { padding: 6px 9px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.app-nav nav a:hover { background: var(--glass2); text-decoration: none; }
.app-nav nav a.active { background: var(--glass2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.app-nav .who { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
@media (max-width: 1360px) { .app-nav .who { display: none; } }
.app-main { padding: 36px 0 64px; }
.app-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.app-head h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 0; }
.app-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.stat { padding: 18px 20px; }
.stat .big { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 6px 0 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.cal { display: grid; gap: 0; overflow: hidden; }
.cal-head { display: grid; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.cal-head div { padding: 10px 12px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; border-left: 1px solid var(--line); }
.cal-body { display: grid; position: relative; }
.cal-hours { border-right: 1px solid var(--line); }
.cal-hours div { height: 60px; padding: 4px 8px; font-family: var(--mono); font-size: 11px; border-bottom: 1px solid var(--line); }
.cal-col { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 60px; }
.appt { position: absolute; left: 4px; right: 4px; border-radius: 10px; padding: 6px 8px; font-size: 12px; line-height: 1.3; overflow: hidden; background: rgba(125, 240, 255, 0.16); border: 1px solid rgba(125, 240, 255, 0.5); }
.appt:hover { text-decoration: none; background: rgba(125, 240, 255, 0.26); }
.appt.confirmed { background: rgba(255, 255, 255, 0.16); border-color: var(--line2); }
.appt.completed { background: rgba(255, 255, 255, 0.08); border-color: var(--line); }
.appt.cancelled, .appt.no_show { background: rgba(255, 122, 217, 0.12); border-color: rgba(255, 122, 217, 0.5); text-decoration: line-through; }
.appt b { display: block; font-weight: 600; }
.appt .m { font-family: var(--mono); font-size: 11px; }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.status-pill.booked { border-color: var(--accent); color: var(--accent); }
.status-pill.cancelled, .status-pill.no_show { border-color: var(--accent3); color: var(--accent3); }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form select, .inline-form input { height: 36px; padding: 0 30px 0 10px; width: auto; }
.inline-form .btn { height: 36px; padding: 0 12px; font-size: 13px; }
.hours-grid { display: grid; grid-template-columns: 120px 1fr 1fr 60px; gap: 10px; align-items: center; }
.hours-grid .mono { font-size: 13px; }
.form-wide { max-width: 720px; }
.key { font-family: var(--mono); font-size: 13px; word-break: break-all; padding: 12px 14px; border: 1px dashed var(--line2); border-radius: 12px; }
@media (max-width: 1000px) { .app-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .hours-grid { grid-template-columns: 90px 1fr 1fr 50px; } }

/* app mobile */
@media (max-width: 860px) {
  .app-nav .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px 14px; }
  .app-nav .who { display: none; }
  .app-nav nav { order: 3; width: 100%; gap: 0; }
  .app-nav nav a { padding: 6px 9px; font-size: 13px; }
  .app-main .table-scroll, .app-main table.table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
  .app-main table.table td, .app-main table.table th { white-space: normal; min-width: 90px; }
  .hours-grid { grid-template-columns: 72px 1fr 1fr 36px; gap: 8px; }
  .hours-grid input[type=time] { padding: 0 6px; min-width: 0; }
  .inline-form { flex-wrap: wrap; }
  .inline-form select, .inline-form input { max-width: 100%; }
  .app-head { flex-direction: column; align-items: start; }
  .stats { grid-template-columns: 1fr 1fr; }
  .key { font-size: 12px; }
  .app-head .btn-row .btn { width: auto; height: 40px; padding: 0 14px; font-size: 14px; }
  .hours-grid input[type=time] { font-size: 13px; padding: 0 4px; }
}