html[data-custom-design] body {font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-normal);line-height:var(--leading-normal)}
html[data-custom-design] :is(input,select,textarea,button) {font-family:var(--font-sans)}
html[data-custom-design] .card {border-width:var(--design-border);border-radius:var(--radius-lg);padding:var(--design-spacing)}
/* Settings remain readable while the user experiments. Status colors are not customized. */
#designEditor {background:#fff;color:#292522;padding:16px;border:1px solid #82776f;border-radius:12px;font:16px/1.6 -apple-system,BlinkMacSystemFont,sans-serif;max-width:100%;box-sizing:border-box}
#designEditor :is(input,select,button) {color:#292522;background:#fff;border:1px solid #82776f;min-height:44px;max-width:100%;box-sizing:border-box;font:inherit}
#designEditor summary {cursor:pointer}
#designEditor :focus-visible {outline:3px solid #a64312;outline-offset:3px}
.settings-categories {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.settings-categories button {min-height:44px;flex:1 1 90px}
.settings-categories button[aria-pressed="true"] {outline:2px solid var(--color-focus);outline-offset:2px;font-weight:700}
#p-settings > section[hidden] {display:none!important}


.design-studio{display:grid;grid-template-columns:minmax(240px,1fr) minmax(290px,390px);gap:28px;align-items:start}
.design-studio-fields{min-width:0}.design-studio-fields>label{padding:8px 0;border-bottom:1px solid var(--line,#ccc)}
.design-studio-fields select,.design-studio-fields input{font-size:16px;max-width:100%;box-sizing:border-box}
.design-studio-fields details{padding:16px;border:1px solid var(--line,#ccc);border-radius:12px;margin-top:16px}
.design-studio-switch{display:none}.design-studio-preview{min-width:0;position:sticky;top:16px}
.design-preview-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.design-preview-heading span{font-size:12px;border:1px solid var(--line,#ccc);border-radius:99px;padding:3px 10px}
.design-preview-note{font-size:13px;line-height:1.6}
.design-phone{border:6px solid #26313b;border-radius:32px;overflow:hidden;background:var(--t-surface,#fff);color:var(--t-text,#292522);font-family:var(--font-sans,sans-serif);font-size:var(--text-lg,16px);font-weight:var(--weight-normal,400);line-height:var(--leading-normal,1.7);box-shadow:0 12px 30px #00000012}
.design-phone-top{display:flex;justify-content:space-between;padding:14px 20px;font-size:11px;letter-spacing:.1em;border-bottom:1px solid var(--t-border,#82776f)}
.design-phone-content{padding:var(--design-spacing,20px)}.design-phone .design-eyebrow{font-size:11px;letter-spacing:.18em;margin:8px 0}.design-phone h3{font-size:1.6em;margin:8px 0;font-family:inherit}.design-phone h4{font-size:1.1em;margin:8px 0;font-family:inherit}.design-phone p{font-size:inherit;line-height:inherit}
.design-sample-card{padding:var(--design-spacing,16px);margin:16px 0;border:var(--design-border,1px) solid var(--t-border,#82776f);border-radius:var(--radius-md,12px);background:var(--t-surface-raised,#fff)}
.design-sample-card small{font-size:.75em}.design-sample-times{display:flex;flex-wrap:wrap;gap:8px}.design-sample-times span{padding:7px 10px;border:1px solid var(--t-border,#82776f);border-radius:var(--radius-md,12px)}
.design-sample-action{padding:14px;text-align:center;background:var(--t-action,#a64312);color:var(--t-text-on-action,#fff);border-radius:var(--radius-md,12px);font-weight:600}.design-phone .design-sample-foot{font-size:.8em;text-align:center;margin-bottom:8px}
@media(max-width:850px){.design-studio{display:block}.design-studio-switch{display:flex;gap:8px;margin-bottom:16px}.design-studio-switch button{min-height:44px;flex:1}.design-studio-switch [aria-pressed=true]{outline:2px solid currentColor;outline-offset:2px}.design-studio[data-view=settings] .design-studio-preview,.design-studio[data-view=preview] .design-studio-fields{display:none}.design-studio-preview{position:static;max-width:390px;margin:auto}}

.salon-logo-controls{min-width:0;border:1px solid var(--line,#82776f);border-radius:12px;padding:16px;margin:0 0 24px}.salon-logo-controls legend{font-weight:700}.salon-logo-controls label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}.salon-logo-controls input[type=file]{width:100%}.salon-logo-controls select,.salon-logo-controls button{min-height:44px}.salon-logo-controls p{line-height:1.6}