/* Optional appearance only. Original style.css and staff colors stay intact. */
.appearance-switcher{position:fixed;bottom:14px;left:12px;width:206px;z-index:20;background:#fff;color:#30343b;border:1px solid #c8cdd2;border-radius:10px;padding:10px 12px;box-shadow:0 4px 18px #0002;font-family:'DM Sans',sans-serif}
.appearance-switcher label{font-size:12px;gap:5px}.appearance-switcher select{padding:7px;font-size:13px;background:#fff;color:#30343b}
html[data-salon-theme="scarlet"]{color:#292929;background:#f1f1f2;accent-color:#bb0000}
html[data-salon-theme="scarlet"] aside{background:#292929;border-right:5px solid #bb0000}
html[data-salon-theme="scarlet"] .brand{color:#fff}
html[data-salon-theme="scarlet"] .brand small,html[data-salon-theme="scarlet"] aside footer{color:#ccc}
html[data-salon-theme="scarlet"] nav button{color:#e1e1e1}
html[data-salon-theme="scarlet"] nav button:hover{background:#424242;color:#fff}
html[data-salon-theme="scarlet"] nav button.active{background:#bb0000;color:#fff;box-shadow:inset 3px 0 #eee}
html[data-salon-theme="scarlet"] button.primary{background:#bb0000;border-color:#bb0000;color:white}
html[data-salon-theme="scarlet"] button.primary:hover{background:#900000;border-color:#900000}
html[data-salon-theme="scarlet"] .eyebrow{color:#a00000}
html[data-salon-theme="scarlet"] h1{color:#292929}
html[data-salon-theme="scarlet"] .banner{background:#e6e6e8;color:#363636;border-color:#ccc;border-left:4px solid #bb0000}
html[data-salon-theme="scarlet"] .card,html[data-salon-theme="scarlet"] .toolbar,html[data-salon-theme="scarlet"] .calendar{border-color:#d1d1d3}
html[data-salon-theme="scarlet"] .toolbar{border-top:3px solid #bb0000}
html[data-salon-theme="scarlet"] .calhead{background:#e6e6e8;color:#292929;border-bottom-color:#bababc}
html[data-salon-theme="scarlet"] .calhead>div{border-right-color:#c8c8ca}
html[data-salon-theme="scarlet"] .staffbutton{border-left-color:#bb0000}
html[data-salon-theme="scarlet"] .muted,html[data-salon-theme="scarlet"] .time,html[data-salon-theme="scarlet"] th,html[data-salon-theme="scarlet"] .rotation-help summary{color:#5b5b60}
html[data-salon-theme="scarlet"] .pill{background:#e8e8ea;color:#414146}
html[data-salon-theme="scarlet"] input,html[data-salon-theme="scarlet"] select,html[data-salon-theme="scarlet"] textarea{border-color:#bcbcc1}
html[data-salon-theme="scarlet"] :is(button,input,select,textarea):focus-visible{outline:3px solid #bb0000;outline-offset:3px}
html[data-salon-theme="scarlet"] .appearance-switcher{border-top:3px solid #bb0000}
@media(max-width:800px){.appearance-switcher{left:auto;right:12px;bottom:10px;width:185px;padding:8px 10px}body{padding-bottom:90px}}
@media print{.appearance-switcher{display:none!important}}

/* Original supplied artwork, presented on a quiet white brand panel. */
aside{padding-top:22px;padding-bottom:110px;gap:20px;overflow-y:auto}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.salon-logo-frame{width:148px;background:#fff;border:1px solid #e4e4e4;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px #00000012}
.salon-logo-frame img{display:block;width:100%;height:auto}
.salon-brand-caption{font:600 10px/1.4 Arial,sans-serif;letter-spacing:3px;color:#d5dce1}
aside nav{gap:4px}aside nav button{padding:11px 14px}aside footer{display:none}
.salon-login-logo{width:190px;margin:0 auto 26px;box-shadow:none;border:0}
.login-shell>.card{padding:30px}.login-shell .eyebrow{text-align:center}
@media(max-width:800px){aside{padding:12px 18px;gap:12px;overflow:visible}.brand{flex-direction:row;gap:16px}.salon-logo-frame{width:76px;border-radius:8px}.salon-brand-caption{font-size:11px;letter-spacing:3px}aside nav button{padding:10px}.salon-login-logo{width:160px}.login-shell>.card{padding:24px}}
