:root {
  --ivory: #f1ece6;
  --paper: #fcfaf7;
  --surface: #fffdf9;
  --ink: #40312a;
  --muted: #716257;
  --line: #dfd4c8;
  --copper: #88583c;
  --pale: #efe1d4;
  --serif: "Baskerville Old Face", "Times New Roman", Georgia, serif;
  font: 15px/1.5 "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  color-scheme: light;
}
* { box-sizing: border-box }
body { margin: 0 }
button,input,select,textarea { font: inherit; color: inherit }
button { cursor: pointer }
button:disabled { cursor: default; opacity: .65 }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px }
aside { position: fixed; inset: 0 auto 0 0; width: 248px; display: flex; flex-direction: column; background: var(--ivory); padding: 35px 20px 22px; border-right: 1px solid var(--line); overflow-y: auto }
.brand { display: block; padding: 4px 0 32px; border-bottom: 1px solid var(--line) }
.brand img { display: block; width: 100%; height: auto }
.label,.eyebrow,.stat span,th { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 600 }
.label { margin: 30px 12px 12px; color: var(--muted) }
nav { display: grid; gap: 4px }
nav button { display: flex; align-items: center; gap: 13px; border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 12px; text-align: left; color: var(--muted) }
nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
nav button:hover { background: #e9e0d7 }
nav button.active { background: var(--surface); color: var(--copper); border-color: var(--line); font-weight: 600 }
.aside-bottom { margin-top: auto; padding: 21px 8px 0; border-top: 1px solid var(--line); font: 21px var(--serif) }
.aside-bottom small { display: block; margin-top: 5px; font: 11px "Segoe UI",sans-serif; color: var(--muted) }
main { margin-left: 248px }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(20px,4vw,64px); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .85rem }
.divider { color: #ab917b; margin: 0 8px }
#breadcrumb { color: var(--ink) }
#content { max-width: 1570px; margin: auto; padding: 32px clamp(20px,4vw,64px) 56px }
.page-heading { padding: 8px 0 22px; margin-bottom: 24px; border-bottom: 1px solid var(--line) }
.page-heading.overview { padding: clamp(24px,3vw,45px); background: #513b30; color: #fff7ef; border: 0; border-radius: 7px; position: relative; isolation: isolate; overflow: hidden }
.overview::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto; width: 36%; background: url("/sd.svg") right -32px center / 215px auto no-repeat; opacity: .25 }
.overview .sub,.overview .eyebrow { color: #eddbcd }
.overview .primary { color: #513b30; background: var(--ivory) }
.overview .primary:hover { background: white }
.eyebrow { color: var(--copper) }
h1,h2,.stat strong { font-family: var(--serif); font-weight: 400; line-height: 1.08 }
h1 { margin: 9px 0; font-size: clamp(36px,3.4vw,56px); letter-spacing: -.035em }
h2 { margin: 0; font-size: clamp(25px,2.3vw,34px); letter-spacing: -.02em }
.sub { color: var(--muted); margin: 6px 0 0 }
.row,.modal-head,.week-controls,.appointment,.actions { display: flex; align-items: center; gap: 14px }
.row,.modal-head { justify-content: space-between }
.primary,.secondary { min-height: 42px; border-radius: 5px; padding: 9px 16px; font-weight: 600 }
.primary { background: var(--copper); color: white; border: 1px solid transparent }
.primary:hover { background: #70442d }
.secondary { background: var(--surface); color: var(--copper); border: 1px solid #cdbbab }
.secondary:hover:not(:disabled),.secondary[aria-pressed="true"] { background: var(--pale) }
.stats,.grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px }
.stats { margin-bottom: 24px }
.stat,.card,dialog { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: clamp(17px,2vw,29px) }
.stat { border-top: 2px solid #b99173 }
.stat span,.stat small,.detail small,.muted,.empty,.integration p,th,td small,.note small { color: var(--muted) }
.stat strong { display: block; color: var(--copper); font-size: 44px; margin: 10px 0 3px }
.card { min-width: 0 }
.card-head,.modal-head { padding-bottom: 16px; border-bottom: 1px solid var(--line) }
.empty { padding: 36px 12px; text-align: center; line-height: 1.8 }
.appointment,.note { padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere }
.appointment { flex-wrap: wrap }
.time,.clock-cell { font-variant-numeric: tabular-nums }
.avatar,.badge,.banner,.booking { color: #674834; background: var(--pale) }
.avatar,.badge { border-radius: 24px; padding: 6px 12px }
.detail { flex: 1; min-width: 110px }
.detail b,.note small { display: block }
.badge { font-size: .8rem }
.actions { flex-wrap: wrap; gap: 7px }
.actions button { font-size: .85rem }
.actions + .card { margin-top: 16px }
.banner { margin-top: 16px; padding: 18px; border-left: 2px solid var(--copper) }
.integration,.photos { margin-top: 20px }
.settings-heading { margin: 26px 0 14px }
.toolbar { margin-bottom: 18px; max-width: 540px }
input,select,textarea { width: 100%; min-height: 44px; background: var(--surface); border: 1px solid #baa899; border-radius: 5px; padding: 10px 12px }
label { display: block; margin: 16px 0 5px; color: var(--muted); font-weight: 600; font-size: .86rem }
textarea { min-height: 140px; resize: vertical }
table { width: 100%; border-collapse: collapse; text-align: left }
td,th { padding: 14px 9px; border-bottom: 1px solid var(--line) }
dialog { color: var(--ink); width: min(510px,94vw); max-height: 90dvh; overflow: auto }
dialog::backdrop { background: rgb(52 36 26 / .46) }
.modal-head button { background: transparent; border: 0; font-size: 26px; min-width: 44px }
#error { color: #973e31 }
form>.primary { width: 100% }
#toast { display: none; position: fixed; z-index: 4; bottom: 18px; right: 18px; padding: 13px 20px; color: white; background: #513b30; border-radius: 5px }
.note { white-space: pre-wrap; line-height: 1.8 }
.week-scroll { overflow: auto; max-height: 70vh }
.week-grid { display: grid; grid-template-columns: 52px repeat(7,minmax(105px,1fr)); min-width: 800px }
.week-grid>b,.week-grid>span:first-child { position: sticky; top: 0; z-index: 2; padding: 8px; background: var(--ivory) }
.clock-cell,.slot { min-height: 38px; padding: 3px; border-bottom: 1px solid var(--line) }
.clock-cell { color: var(--muted); font-size: .8rem }
.slot { border-left: 1px solid var(--line) }
.booking { display: grid; gap: 3px; width: 100%; padding: 6px; border: 1px solid #bc9c84; border-radius: 4px; text-align: left; cursor: grab; touch-action: none; user-select: none; overflow-wrap: anywhere }
.booking.moving { position: relative; z-index: 3; pointer-events: none; opacity: .8 }
.target-slot { background: #dec6b3 }
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 14px; white-space: normal }
.photo-gallery a { color: var(--copper); overflow-wrap: anywhere }
.photo-gallery img { display: block; width: 100%; height: 125px; object-fit: contain; background: var(--ivory) }
@media(max-width:1100px) {
  aside { width: 210px } main { margin-left: 210px }
  .grid { grid-template-columns: 1fr }
  .row { flex-wrap: wrap }
}
@media(max-width:760px) {
  :root { --tab-bar-height: calc(64px + env(safe-area-inset-bottom,0px)); scroll-padding-bottom: var(--tab-bar-height) }
  aside { position: static; width: auto; padding: 15px 16px; border: 0; border-bottom: 1px solid var(--line) }
  aside:has(nav .active:not([data-view="overview"])) { padding: 0; border: 0 }
  aside:has(nav .active:not([data-view="overview"])) .brand { display: none }
  .brand { padding: 0; border: 0; width: 200px; margin: 0 auto }
  .label,.aside-bottom,header,.avatar { display: none }
  nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 4;
    height: var(--tab-bar-height);
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 2px;
    padding: 4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
    background: var(--ivory);
    border-top: 1px solid var(--line);
  }
  nav button { flex-direction: column; justify-content: center; padding: 6px 1px; gap: 4px; min-height: 48px; font-size: clamp(9px,2.6vw,12px) }
  nav svg { width: 22px; height: 22px }
  main { margin: 0 }
  #content { padding: 20px 14px calc(20px + var(--tab-bar-height)); overflow-wrap: anywhere }
  .page-heading.overview { padding: 22px }
  .row>.primary { width: 100% }
  .stats { grid-template-columns: 1fr; gap: 8px }
  .stat { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); border-left: 2px solid #b99173 }
  .stat strong { grid-column: 2; grid-row: 1 / 3; font-size: 34px; margin: 0 }
  .actions button,button { min-height: 44px }
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td { display: block }
  .table-wrap thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden }
  .table-wrap tr { border-bottom: 1px solid var(--line); padding: 10px 0 }
  .table-wrap td { border: 0; padding: 4px 0 }
  .table-wrap td:nth-child(3)::before { content: "Nascimento · " }
  input,textarea,select { font-size: 16px; min-width: 0 }
  #toast { left: 12px; right: 12px; bottom: calc(12px + var(--tab-bar-height)) }
}
#login { display: none; max-width: 420px; margin: 8vh auto; overflow-wrap: anywhere }
body.locked #login { display: block }
body.locked > :is(main,aside), .reception nav [data-view="records"], #login [hidden] { display: none }
#login img { max-width: 100%; height: auto }
#login h1 { font-size: 32px }
.activation { display:flex; align-items:center; gap:8px }
.activation input { width:18px; min-height:20px }
.account-list label { flex:1; min-width:105px }
.account-management ~ p { overflow-wrap:anywhere; user-select:all }
@media(max-width:760px){.reception nav { grid-template-columns:repeat(4,minmax(0,1fr)) } #login { margin:6vh 14px } }