/* SalonFlex motion system — tactile, calm and consistent across every theme. */
:root{
  --ease-app:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.2,1.35,.45,1);
  --motion-fast:160ms;
  --motion-base:280ms;
  --motion-slow:520ms;
}
html{scroll-behavior:smooth}
body[data-theme]{position:relative;isolation:isolate;min-height:100vh;overflow-x:hidden}
body[data-theme]::before,body[data-theme]::after{content:"";position:fixed;z-index:0;width:min(48vw,720px);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:.5;filter:blur(8px);will-change:transform;transition:opacity var(--motion-slow) var(--ease-app)}
body[data-theme]::before{top:-24%;right:-14%;background:radial-gradient(circle at 42% 44%,color-mix(in srgb,var(--accent,var(--pink)) 22%,transparent),color-mix(in srgb,var(--accent,var(--pink)) 7%,transparent) 42%,transparent 70%);animation:workspaceAuraOne 18s ease-in-out infinite}
body[data-theme]::after{left:8%;bottom:-34%;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent,var(--pink)) 13%,var(--panel)),transparent 68%);opacity:.32;animation:workspaceAuraTwo 23s ease-in-out infinite}
.app-shell{position:relative;z-index:1;background:transparent}
@keyframes workspaceAuraOne{0%,100%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(-7vw,6vh,0) scale(1.08)}72%{transform:translate3d(-3vw,12vh,0) scale(.94)}}
@keyframes workspaceAuraTwo{0%,100%{transform:translate3d(0,0,0) scale(1)}42%{transform:translate3d(8vw,-8vh,0) scale(1.12)}75%{transform:translate3d(3vw,-4vh,0) scale(.96)}}
body,.sidebar,.topbar,.panel,.metrics article,.service-card,.employee-card,.automation-card,.week-day,.settings-grid,.modal,.notification-menu,.login-shell,.login-showcase,.login-card,.login-input,input,select,textarea{
  transition-property:background-color,border-color,color,box-shadow,transform,opacity,filter;
  transition-duration:var(--motion-base);
  transition-timing-function:var(--ease-app)
}
body.theme-changing .app-shell,body.theme-changing .login-screen{animation:themeWash var(--motion-slow) var(--ease-app)}
@keyframes themeWash{0%{filter:saturate(.82);opacity:.88}100%{filter:none;opacity:1}}

.brand,.login-brand{font-family:'Space Grotesk','Manrope',sans-serif!important;letter-spacing:-.045em}
.brand-wordmark{position:relative;display:block;font-weight:700;line-height:.92}
.brand-wordmark b{font-weight:700}
.brand-wordmark small{margin-top:7px!important;font-family:'Manrope',sans-serif!important;font-size:6.5px!important;font-weight:800!important;letter-spacing:3.1px!important;line-height:1;color:var(--muted)}
.brand-mark{position:relative;isolation:isolate;overflow:hidden;flex:none;border:1px solid color-mix(in srgb,#fff 18%,transparent);font-family:'Space Grotesk',sans-serif!important;box-shadow:0 10px 25px color-mix(in srgb,var(--accent,var(--pink)) 18%,rgba(0,0,0,.18))!important}
.brand-mark::before{content:"";position:absolute;inset:-55% 42% -55% -35%;z-index:-1;background:linear-gradient(110deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-140%) rotate(10deg);animation:logoSheen 6.5s ease-in-out infinite}
.brand-mark::after{content:"✦";position:absolute;right:4px;top:2px;color:rgba(255,255,255,.78);font:700 7px/1 'Manrope',sans-serif;animation:logoSpark 3.2s ease-in-out infinite}
.brand-mark>span{position:absolute;inset:0;display:grid;place-items:center;font-size:.8em;font-weight:700;line-height:1}
.login-brand{gap:16px!important;font-size:28px!important}
.login-brand .brand-mark{width:58px!important;height:58px!important;border-radius:17px!important;font-size:31px!important}
.login-brand .brand-wordmark small{margin-top:8px!important;font-size:7px!important;letter-spacing:3.8px!important}
.brand:hover .brand-mark{transform:translateY(-2px) rotate(-2deg);filter:brightness(1.06)}
@keyframes logoSheen{0%,62%,100%{transform:translateX(-140%) rotate(10deg)}78%{transform:translateX(310%) rotate(10deg)}}
@keyframes logoSpark{0%,100%{opacity:.45;transform:scale(.82) rotate(0)}50%{opacity:1;transform:scale(1.16) rotate(16deg)}}

.sidebar{border-right-color:color-mix(in srgb,var(--line) 78%,transparent);backdrop-filter:blur(24px) saturate(122%)}
.topbar{border-bottom-color:color-mix(in srgb,var(--line) 78%,transparent);box-shadow:0 8px 30px color-mix(in srgb,var(--bg) 72%,rgba(0,0,0,.08));backdrop-filter:blur(24px) saturate(128%)}
.page-heading h1,.simple-page>h1{text-wrap:balance;letter-spacing:-.055em}
.panel,.metrics article,.service-card,.employee-card,.automation-card,.settings-grid,.backup-card,.empty-card,.week-day,.archive-item{border-color:color-mix(in srgb,var(--line) 84%,transparent);box-shadow:0 14px 38px color-mix(in srgb,var(--bg) 58%,rgba(0,0,0,.12)),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(14px) saturate(116%)}
.panel,.service-card,.employee-card,.settings-grid,.backup-card,.empty-card{border-radius:16px}
.metrics article,.automation-card,.week-day,.archive-item{border-radius:14px}
.add-button{border-radius:11px;box-shadow:0 10px 24px color-mix(in srgb,var(--accent,var(--pink)) 22%,transparent)}
.outline,.view-switch,.calendar-toolbar,.table-tools{backdrop-filter:blur(15px) saturate(118%)}
.search{padding:8px 11px;border:1px solid transparent;border-radius:11px;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.search:focus-within{border-color:color-mix(in srgb,var(--accent,var(--pink)) 30%,var(--line));background:color-mix(in srgb,var(--panel) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,var(--pink)) 8%,transparent)}

.page.active{animation:appPageIn 420ms var(--ease-app) both}
.page.page-arriving{transform-origin:50% 0}
@keyframes appPageIn{from{opacity:0;transform:translateY(12px) scale(.992);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.page.active :is(.metrics article,.panel,.service-card,.employee-card,.automation-card,.client-row,.archive-item,.week-day)[data-motion-ready="true"]{
  animation:itemReveal 460ms var(--ease-app) both;
  animation-delay:calc(var(--motion-order,0) * 38ms)
}
@keyframes itemReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

button,.add-button,.outline,.nav-link,a{ -webkit-tap-highlight-color:transparent }
button,.add-button,.outline,.nav-link{transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-app),background-color var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),filter var(--motion-fast)}
button.pressed,.add-button.pressed,.outline.pressed,.nav-link.pressed{transform:scale(.965)!important;transition-duration:80ms}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent,var(--pink)) 34%,transparent);outline-offset:3px}
.icon-button:hover{transform:translateY(-2px) scale(1.06);color:var(--accent,var(--pink))}
.nav-link{position:relative;overflow:hidden}
.nav-link::after{content:"";position:absolute;inset:7px auto 7px 7px;width:3px;border-radius:99px;background:currentColor;transform:scaleY(0);transition:transform var(--motion-base) var(--ease-spring)}
.nav-link.active::after{transform:scaleY(1)}
.nav-link i{transition:transform var(--motion-base) var(--ease-spring)}
.nav-link:hover i,.nav-link.active i{transform:translateX(2px) scale(1.08)}
.add-button:hover{transform:translateY(-2px);filter:brightness(1.06)}

.panel,.metrics article,.service-card,.employee-card,.automation-card,.week-day{will-change:transform}
.panel:hover,.metrics article:hover,.service-card:hover,.employee-card:hover{transform:translateY(-4px);box-shadow:0 20px 45px color-mix(in srgb,var(--bg) 30%,rgba(0,0,0,.24))}
.metrics article .metric-icon{transition:transform var(--motion-slow) var(--ease-spring)}
.metrics article:hover .metric-icon{transform:rotate(-5deg) scale(1.09)}
.chart i{transform-origin:50% 100%;animation:barGrow 620ms var(--ease-app) both;transition:height var(--motion-slow) var(--ease-app),filter var(--motion-fast)}
.chart i:hover{filter:brightness(1.22)}
@keyframes barGrow{from{transform:scaleY(.08);opacity:.3}to{transform:scaleY(1);opacity:1}}
.smart-day::after{animation:orbFloat 8s ease-in-out infinite}
@keyframes orbFloat{50%{transform:translate(-18px,12px) rotate(8deg)}}
.upcoming-appointment:not([hidden]){animation:softPop 420ms var(--ease-spring)}
@keyframes softPop{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}

.modal-backdrop{opacity:0;visibility:hidden;display:grid!important;transition:opacity var(--motion-base),visibility 0s linear var(--motion-base);backdrop-filter:blur(0)}
.modal-backdrop.open{opacity:1;visibility:visible;transition-delay:0s;backdrop-filter:blur(8px)}
.modal-backdrop .modal{opacity:0;transform:translateY(18px) scale(.965);transition:transform 380ms var(--ease-spring),opacity 240ms var(--ease-app)}
.modal-backdrop.open .modal{opacity:1;transform:none}
.modal-symbol{transition:transform var(--motion-slow) var(--ease-spring)}
.modal-backdrop.open .modal-symbol{transform:rotate(360deg)}
.notification-menu:not([hidden]){transform-origin:calc(100% - 28px) 0;animation:menuIn 260ms var(--ease-app)}
.top-actions :is(#themeToggle,#notificationsToggle,#chatToggle){width:36px;height:36px;min-width:36px;display:grid;place-items:center;padding:0;border-radius:11px;font-size:20px;line-height:1}
.top-actions :is(#themeToggle,#notificationsToggle,#chatToggle):hover,.top-actions :is(#themeToggle,#notificationsToggle,#chatToggle)[aria-expanded="true"]{background:var(--soft);color:var(--accent,var(--pink))}
.notification-bell{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notification-menu>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.notification-menu>header>button{border:0;border-radius:8px;background:var(--soft);color:var(--accent,var(--pink));padding:7px 9px;font-size:9px;font-weight:800;cursor:pointer;white-space:nowrap}
.notification-menu>header>button[hidden]{display:none}
.notification-manageable{grid-template-columns:minmax(0,1fr) 34px!important;padding:0!important}
.notification-main{min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 8px 12px 15px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.notification-main>i{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#f1e8fb;color:#8068b5;font-style:normal}
.notification-main span{min-width:0}.notification-main strong,.notification-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notification-main strong{font-size:11px}.notification-main small{margin-top:3px;color:var(--muted);font-size:9px}.notification-main em{color:var(--accent,var(--pink));font-size:8px;font-style:normal;font-weight:800;white-space:nowrap}
.notification-read{width:28px;height:28px;margin-right:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--accent,var(--pink));font-weight:900;cursor:pointer}
.notification-read:hover{background:var(--soft);transform:scale(1.06)}
.notification-manageable:not(.unread){opacity:.66}.notification-manageable:not(.unread) .notification-main em{color:var(--muted)}
@keyframes menuIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}
.toast{border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);transition:opacity var(--motion-base),transform 420ms var(--ease-spring),visibility var(--motion-base)}
.toast.show{transform:translateY(0) scale(1)}

.login-screen{transition:background var(--motion-slow) var(--ease-app)}
.login-footer{position:absolute;right:24px;bottom:17px;left:24px;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;color:color-mix(in srgb,var(--muted) 88%,transparent);font:650 9px/1.4 'Manrope',sans-serif;letter-spacing:.1px;text-align:center}
.login-footer strong{color:color-mix(in srgb,var(--ink) 86%,transparent);font-size:10px;font-weight:800}
.login-footer span{display:flex;align-items:center;gap:7px}.login-footer i{color:var(--accent,var(--pink));font-size:9px;font-style:normal}
.login-shell{animation:loginShellIn 700ms var(--ease-app) both}
.login-showcase{isolation:isolate;background-size:175% 175%,145% 145%;animation:loginAmbientFlow 15s ease-in-out infinite}
.login-showcase::before{border:1px solid rgba(255,255,255,.13);box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 72px rgba(255,255,255,.022);animation:loginOrbDrift 10s ease-in-out infinite}
.login-showcase::after{transform-origin:50% 50%;animation:loginStarFloat 6.5s ease-in-out infinite;will-change:transform,opacity,filter}
.login-showcase>*{animation:loginItemIn 650ms var(--ease-app) both}
.login-showcase-copy{animation-delay:90ms}.login-benefits{animation-delay:170ms}
.login-showcase-copy h2{min-height:3.18em;display:flex;align-items:center;transition:opacity 220ms var(--ease-app),transform 220ms var(--ease-app)}
.login-showcase-copy h2.is-changing{opacity:0;transform:translateY(7px)}
.login-card>*{animation:loginItemIn 560ms var(--ease-app) both}
.login-card>*:nth-child(2){animation-delay:50ms}.login-card>*:nth-child(3){animation-delay:90ms}.login-card>*:nth-child(4){animation-delay:130ms}.login-card>*:nth-child(5){animation-delay:170ms}
@keyframes loginShellIn{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes loginItemIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes loginAmbientFlow{0%,100%{background-position:18% 22%,50% 50%}50%{background-position:82% 70%,58% 44%}}
@keyframes loginOrbDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-28px,-18px,0) scale(1.08)}}
@keyframes loginStarFloat{0%,100%{transform:translate3d(0,0,0) rotate(12deg) scale(1);opacity:.78;filter:drop-shadow(0 0 0 transparent)}50%{transform:translate3d(-9px,11px,0) rotate(28deg) scale(1.1);opacity:1;filter:drop-shadow(0 0 15px rgba(255,255,255,.16))}}

body[data-theme="light"] .login-screen{background:radial-gradient(circle at 14% 14%,rgba(226,115,158,.2),transparent 31%),radial-gradient(circle at 88% 82%,rgba(244,190,210,.35),transparent 28%),linear-gradient(145deg,#fff9fb,#f8e9ef)}
body[data-theme="light"] .login-shell{background:rgba(255,255,255,.72);border-color:rgba(190,94,132,.2);box-shadow:0 35px 90px rgba(107,57,76,.18)}
body[data-theme="light"] .login-showcase{background:linear-gradient(150deg,rgba(178,72,115,.87),rgba(110,57,84,.9)),linear-gradient(135deg,#ca7295,#713850)}
body[data-theme="light"] .login-card{background:rgba(255,255,255,.9)!important;color:#342731!important;border-color:rgba(190,94,132,.16)!important}
body[data-theme="light"] .login-card h1{color:#342731}
body[data-theme="light"] .login-card>p:not(.login-security){color:#786570}
body[data-theme="light"] .login-card label{color:#4f3c46}
body[data-theme="light"] .login-input{background:#fff;border-color:#ead8df}
body[data-theme="light"] .login-card .login-input input{color:#342731!important}
body[data-theme="light"] .login-card input::placeholder{color:#aa929d}
body[data-theme="light"] .login-submit{background:linear-gradient(105deg,#c95882,#a83f69)!important}
body[data-theme="light"] .login-security{color:#9d8791!important;border-color:#eadde2}
body[data-theme="dark"] .login-screen{background:radial-gradient(circle at 16% 15%,rgba(205,88,130,.18),transparent 30%),linear-gradient(145deg,#171014,#2a1b22 50%,#120d10)}
body[data-theme="dark"] .login-showcase{background:linear-gradient(150deg,rgba(133,48,78,.72),rgba(54,28,39,.75)),#2b1820}
body[data-theme="lavender"] .login-screen{background:radial-gradient(circle at 15% 14%,rgba(72,166,213,.2),transparent 30%),radial-gradient(circle at 86% 84%,rgba(49,118,153,.18),transparent 28%),linear-gradient(145deg,#061018,#102634 52%,#07121a)}
body[data-theme="lavender"] .login-shell{border-color:rgba(96,189,230,.2);background:rgba(7,22,31,.84)}
body[data-theme="lavender"] .login-showcase{background:linear-gradient(150deg,rgba(40,125,166,.72),rgba(16,55,75,.66)),#0b2431}
body[data-theme="lavender"] .login-brand b,body[data-theme="lavender"] .login-badge{color:#87dcff}
body[data-theme="lavender"] .login-submit{background:linear-gradient(105deg,#267ba5,#4fb7df)!important;box-shadow:0 12px 27px rgba(48,150,194,.25)}
body[data-theme="lavender"] .login-input:focus-within{border-color:#48a6d5;box-shadow:0 0 0 3px rgba(72,166,213,.15)}

.empty-state-icon{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:13px;background:color-mix(in srgb,var(--accent,var(--pink)) 15%,transparent);color:var(--accent,var(--pink));font-size:18px}
.next-actions[hidden]{display:none}
.panel-title>.dots{display:none}
.settings-save{align-self:end;min-height:42px}
.calendar-filter-popover{position:fixed;z-index:60;top:var(--filter-top);right:var(--filter-right);width:min(330px,calc(100vw - 24px));overflow:hidden;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.28);backdrop-filter:blur(18px);animation:menuIn 260ms var(--ease-app)}
.calendar-filter-popover header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--line)}
.calendar-filter-popover header strong,.calendar-filter-popover header span{display:block}.calendar-filter-popover header strong{font-size:13px}.calendar-filter-popover header span{margin-top:2px;color:var(--muted);font-size:10px}
.calendar-filter-popover header button{width:31px;height:31px;border:0;border-radius:9px;background:var(--soft);color:var(--ink);font-size:19px;cursor:pointer}
.calendar-filter-popover>div{display:grid;gap:4px;padding:8px}
.calendar-filter-popover [data-employee-filter]{display:grid;grid-template-columns:36px 1fr 20px;align-items:center;gap:10px;width:100%;padding:9px;border:0;border-radius:11px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.calendar-filter-popover [data-employee-filter]:hover,.calendar-filter-popover [data-employee-filter].active{background:var(--soft)}
.calendar-filter-popover [data-employee-filter]>i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent,var(--pink));color:#fff;font-size:11px;font-style:normal;font-weight:800}
.calendar-filter-popover [data-employee-filter] strong,.calendar-filter-popover [data-employee-filter] small{display:block}.calendar-filter-popover [data-employee-filter] strong{font-size:11px}.calendar-filter-popover [data-employee-filter] small{margin-top:2px;color:var(--muted);font-size:9px}.calendar-filter-popover [data-employee-filter]>b{color:var(--accent,var(--pink));opacity:0}.calendar-filter-popover [data-employee-filter].active>b{opacity:1}

.appointment-service-picker{min-width:0;margin:0;padding:0;border:0}
.appointment-service-picker legend{display:flex;align-items:center;gap:5px;width:100%;margin-bottom:7px;color:var(--ink);font-size:11px;font-weight:700}
.appointment-service-picker legend small{margin-left:auto;color:var(--muted);font-size:9px;font-weight:500}
.service-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.service-picker-item{position:relative;display:grid!important;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:9px 10px!important;border:1px solid var(--line);border-radius:11px;background:var(--panel);cursor:pointer;transition:border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.service-picker-item:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent,var(--pink)) 50%,var(--line));box-shadow:0 7px 18px rgba(0,0,0,.07)}
.service-picker-item:has(input:checked){border-color:var(--accent,var(--pink));background:color-mix(in srgb,var(--accent,var(--pink)) 9%,var(--panel));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,var(--pink)) 10%,transparent)}
.service-picker-item input{position:absolute;opacity:0;pointer-events:none}
.service-picker-check{width:21px;height:21px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:transparent;font-size:12px;font-weight:900;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.service-picker-item input:checked+.service-picker-check{border-color:var(--accent,var(--pink));background:var(--accent,var(--pink));color:#fff;transform:scale(1.04)}
.service-picker-item input:focus-visible+.service-picker-check{outline:2px solid var(--accent,var(--pink));outline-offset:2px}
.service-picker-item strong,.service-picker-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.service-picker-item strong{font-size:10px}.service-picker-item small{margin-top:3px;color:var(--muted);font-size:8px;font-weight:500}
.service-picker-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 10px;border-radius:9px;background:var(--soft);color:var(--muted);font-size:9px}
.service-picker-summary b{color:var(--ink)}.service-picker-summary.empty{justify-content:center;color:var(--accent,var(--pink))}

.weekly-event .event-services{display:grid;gap:4px;margin-top:6px;padding:5px 6px;border-radius:6px;background:color-mix(in srgb,var(--service-color,#cf648c) 8%,transparent)}
.weekly-event .event-service{display:grid;grid-template-columns:6px minmax(0,1fr);align-items:start;gap:5px;margin:0;color:var(--ink);font-size:8px;font-weight:650;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip}
.weekly-event .event-service>i{width:6px;height:6px;margin-top:2px;border-radius:50%;background:var(--service-dot,var(--service-color,#cf648c))}
.weekly-event .event-service>span{display:-webkit-box;margin:0;color:var(--ink);font-size:8px;line-height:1.25;white-space:normal;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.weekly-event .event-employee{display:block;margin-top:5px;color:var(--muted);font-size:8px;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip}
.month-calendar .weekly-event .event-services,.month-calendar .weekly-event .event-employee{display:none}

@media print{
  .sidebar,.topbar,.smart-day,.view-switch,.add-button,.outline,.text-button,.export-row{display:none!important}
  main{margin:0;width:100%}.page{display:none!important;padding:0}.page.active{display:block!important;animation:none!important}
  body,.page,.panel,.metrics article{background:#fff!important;color:#111!important;box-shadow:none!important}
}

@media(max-width:760px){
  body[data-theme]::before{width:430px;top:-250px;right:-260px;opacity:.16;filter:blur(28px)}
  body[data-theme]::after{width:400px;left:-230px;bottom:-250px;opacity:.1;filter:blur(30px)}
  body[data-theme].menu-open::before{opacity:0}
  body.menu-open::after{content:"";position:fixed;inset:0;z-index:2;background:rgba(7,5,8,.5);backdrop-filter:blur(3px);animation:fadeIn var(--motion-base)}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .sidebar{z-index:4;box-shadow:22px 0 55px rgba(0,0,0,.28);transition:transform 360ms var(--ease-app)}
  .panel:hover,.metrics article:hover,.service-card:hover,.employee-card:hover{transform:none}
  .page.active :is(.metrics article,.panel,.service-card,.employee-card,.automation-card,.client-row,.archive-item,.week-day)[data-motion-ready="true"]{animation-delay:calc(var(--motion-order,0) * 22ms)}
  .service-picker-grid{grid-template-columns:1fr}
}

@media(max-width:820px){
  .login-screen{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .login-shell{order:1;flex:0 0 auto}
  .login-footer{position:static;order:2;flex:0 0 auto;display:grid;gap:3px;width:100%;margin:16px auto 2px;padding:0 18px 16px}
  .login-footer span{justify-content:center}
}

@media(max-width:480px){
  .login-shell{min-height:0}
  .login-footer{margin:12px 0 0;padding:17px 18px calc(17px + env(safe-area-inset-bottom));border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent);background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(16px)}
}

@media(min-width:361px) and (max-width:540px){
  #dashboard .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  #dashboard .metrics article{min-width:0}
  #dashboard .metrics h2{font-size:21px;overflow-wrap:anywhere}
  #dashboard .metrics h2 small{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
.weekly-event.appointment-completed{opacity:.72;filter:saturate(.65)}
.weekly-event.appointment-completed::after{content:'✓';position:absolute;top:7px;right:8px;display:grid;width:18px;height:18px;place-items:center;border-radius:50%;background:#55a37d;color:#fff;font-size:10px;font-weight:800}
.completed-badge{display:inline-flex!important;width:max-content;margin:4px 0;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,#55a37d 16%,transparent);color:#55a37d!important;font-size:8px!important;font-weight:800}