/* Owner view styles (design draft 1). Colors: ground #F5F4F0, ink #17191C, teal #1F6F5C, orange #B4561A. */
* { box-sizing: border-box; }
body { margin: 0; background: #F5F4F0; color: #17191C; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
a { color: #1F6F5C; } a:hover { color: #16503F; }
h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 16px; font-weight: 600; }
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; }
.side { flex: 1 1 232px; max-width: 100%; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; background: #fff; border-right: 1px solid #E4E2DC; }
.main { flex: 999 1 560px; min-width: 0; padding: 32px 40px 48px; display: flex; flex-direction: column; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.logo { width: 32px; height: 32px; border-radius: 8px; background: #1F6F5C; display: flex; align-items: center; justify-content: center; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav .soon { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: #17191C; }
.nav a.current { background: #E3F0EC; color: #16503F; font-weight: 600; }
.nav .soon { color: #6B6F75; }
.tag { font-size: 11px; color: #5F6368; border: 1px solid #E4E2DC; border-radius: 999px; padding: 0 7px; }
.business { margin-top: auto; padding: 12px; border-radius: 10px; border: 1px solid #E4E2DC; display: flex; flex-direction: column; gap: 2px; }
.stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gap { gap: 16px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.end { align-items: flex-end; }
.row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.muted { color: #5F6368; }
.small { font-size: 12px; }
.tiny { font-size: 11px; font-weight: 600; color: #5F6368; }
.strong { font-weight: 600; }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #E3F0EC; color: #16503F; font-size: 13px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #1F6F5C; }
.pills { display: flex; padding: 3px; border-radius: 10px; background: #fff; border: 1px solid #E4E2DC; }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 7px; font-size: 13px; color: #5F6368; text-decoration: none; }
.pill.on { background: #17191C; color: #fff; font-weight: 600; }
.card { padding: 24px; border-radius: 14px; background: #fff; border: 1px solid #E4E2DC; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.tile { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.big { font-size: 32px; font-weight: 700; line-height: 1.1; }
.big.teal { color: #16503F; }
.of { font-size: 16px; font-weight: 600; color: #5F6368; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: #5F6368; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 10px; height: 10px; border-radius: 3px; }
.key.solved, .seg.solved { background: #1F6F5C; }
.key.handed, .seg.handed { background: #E8A273; }
.bars { display: grid; gap: 8px; align-items: end; height: 200px; border-bottom: 1px solid #E4E2DC; }
.bar { display: flex; flex-direction: column; gap: 2px; border-radius: 6px 6px 0 0; overflow: hidden; min-height: 4px; }
.bar.empty { height: 4px; background: #EEECE7; border-radius: 4px; }
.seg { min-height: 3px; }
.bar-labels { display: grid; gap: 8px; margin-top: -8px; font-size: 12px; color: #5F6368; text-align: center; }
.bar-labels .strong { color: #17191C; }
.row { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 10px; }
.row.soft { background: #F5F4F0; }
.row.warm { align-items: stretch; border: 1px solid #F1D5C0; background: #FDF6F0; color: #3C3F44; font-size: 13px; }
.date { width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; }
.day { font-size: 22px; font-weight: 700; }
.reason { font-size: 12px; color: #8A4314; }
.count { font-size: 13px; color: #B4561A; }
.badge { font-size: 12px; font-weight: 600; color: #16503F; background: #E3F0EC; border-radius: 999px; padding: 4px 10px; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.facts dt { font-size: 12px; color: #5F6368; }
.facts dd { margin: 0; font-weight: 600; }
@media (max-width: 640px) { .main { padding: 24px 16px 40px; } .facts { grid-template-columns: minmax(0, 1fr); } }
.input { flex: 1 1 280px; min-height: 44px; padding: 0 12px; border: 1px solid #D5D2CA; border-radius: 10px; font: inherit; background: #fff; }
.input:focus, .button:focus-visible { outline: 2px solid #1F6F5C; outline-offset: 2px; }
.button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: #17191C; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.button.ghost { background: #fff; color: #17191C; border: 1px solid #D5D2CA; }
.link-form { display: flex; flex-direction: column; gap: 6px; }
.ok-text { color: #16503F; font-size: 13px; }
.warn-text { color: #8A4314; font-size: 13px; }
.notice { margin: 0; padding: 12px 16px; border-radius: 10px; background: #E3F0EC; color: #16503F; }
.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.day-col { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: #F5F4F0; min-height: 120px; }
.day-col.today { background: #E3F0EC; }
.day-col h3 { margin: 0; font-size: 13px; font-weight: 600; }
.slot { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: #fff; }
.slot.booking { border-left: 0; box-shadow: inset 0 0 0 1px #BFDCD2; }
.slot.busy { background: repeating-linear-gradient(135deg, #fff, #fff 6px, #F3EEE6 6px, #F3EEE6 12px); box-shadow: inset 0 0 0 1px #E4E2DC; }
.help summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.help ul { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.chair { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 10px; background: #F5F4F0; }
.auth { max-width: 400px; margin: 10vh auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid #E4E2DC; border-radius: 14px; }
.auth .brand { padding: 0; }
.auth .button { width: 100%; }
.notice.warn { background: #FDF0E7; color: #8A4314; }
.account { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.small-button { min-height: 36px; font-size: 13px; }