:root { --ink: #24211d; --muted: #746d63; --line: #ded6c8; }
* { box-sizing: border-box; } [hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: #f7f2e8; font: 15px/1.6 Arial,sans-serif; }
h1,h2,h3 { font-family: Georgia,serif; font-weight: 500; line-height: 1.2; } h1 { font-size: clamp(1.8rem,4vw,2.8rem); margin: 8px 0; }
a { color: #226956; } button { cursor: pointer; background: #24211d; color: white; border: 1px solid #24211d; padding: 11px 16px; font: inherit; } button:disabled { opacity: .5; cursor: default; }
input,textarea,select { font: inherit; padding: 10px; border: 1px solid var(--line); background: white; max-width: 100%; } input:not([type="checkbox"]),textarea { width: 100%; }
label { display: grid; gap: 5px; } input[type="checkbox"] { width: auto; } :focus-visible { outline: 2px solid #226956; outline-offset: 3px; }
label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; }
label input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; padding: 0; }
.client-shell { max-width: 1120px; margin: 0 auto; padding: 32px 24px 60px; }
.client-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.client-header nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.client-kicker { color: #795921; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
.client-card { border: 1px solid var(--line); background: #fffdf8; padding: 24px; margin: 20px 0; min-width: 0; }
.login-card { max-width: 600px; margin: 48px auto; } .login-card form { display: grid; gap: 18px; }
.client-status { padding: 0 24px; color: #795921; overflow-wrap: anywhere; }
.client-content { padding: 24px; } .client-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.client-editor { padding: 24px; background: #fffdf8; border: 1px solid var(--line); margin: 30px 0; }
.client-form-grid,.package-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.credit-total { font-size: 1.3rem; color: #226956; } .client-booking { border-top: 1px solid var(--line); padding: 16px 0; }
.client-booking h3,.client-booking p { margin: 5px 0; } .client-booking-list { max-height: 620px; overflow: auto; } td { overflow-wrap: anywhere; }
@media(max-width:650px) { .client-shell { padding: 20px 16px; } .client-header { align-items: start; flex-direction: column; } .client-form-grid,.package-cards { grid-template-columns: minmax(0,1fr); } .client-card,.client-content,.client-editor { padding: 18px; } .client-toolbar { align-items: stretch; flex-direction: column; } }
@media(max-width:650px) {
  #clientsDashboard table { min-width: 0; width: 100%; }
  #clientsDashboard thead { display: none; }
  #clientsRows tr { display: grid; border: 1px solid var(--line); padding: 12px; margin-bottom: 12px; }
  #clientsRows td { display: block; border: 0; padding: 6px; }
  #clientsRows td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; }
}