:root{
  --bg:#F7F7F8; --panel:#FFFFFF; --white:#FFFFFF; --text:#17181D; --muted:#70737C; --text-3:#9A9DA6; --line:#E8E9EE; --line-strong:#DBDDE5;
  --purple:#5548DF; --purple-hover:#463AC7; --purple-soft:#ECEAFD; --red:#E86A6A; --red-soft:#FDEEEE; --green:#35B87A; --green-soft:#E9F9F1; --yellow:#F2C14E; --yellow-soft:#FDF6E3;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --shadow-xs:0 1px 2px rgba(23,24,29,.04); --shadow-sm:0 2px 8px rgba(23,24,29,.05); --shadow-md:0 8px 24px rgba(23,24,29,.08); --shadow-lg:0 20px 48px rgba(23,24,29,.14); --ease:cubic-bezier(.4,0,.2,1);
  --sidebar-w:264px; --sidebar-w-collapsed:76px; --panel-w:480px;
}
:root[data-theme="dark"]{ --bg:#111217; --panel:#181A21; --white:#181A21; --text:#F4F4F6; --muted:#B6BAC6; --text-3:#838895; --line:#292C36; --line-strong:#3A3E4A; --purple-soft:#272348; --red-soft:#3A2024; --green-soft:#173528; --yellow-soft:#3A321D; --shadow-xs:none; --shadow-sm:none; --shadow-md:0 10px 28px rgba(0,0,0,.28); --shadow-lg:0 26px 70px rgba(0,0,0,.42); }
*{box-sizing:border-box} html,body{height:100%;overflow-x:hidden} body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} h1,h2,h3,h4{letter-spacing:-.015em} svg{display:block} ::selection{background:var(--purple-soft);color:var(--purple)} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px} ::-webkit-scrollbar-track{background:transparent}
.ico-16{width:16px;height:16px}.ico-14{width:14px;height:14px}.muted{color:var(--text-3)}.hidden{display:none!important}
.load-more{display:flex;justify-content:center;margin-top:14px}
.sort-arrow{color:var(--purple);margin-left:4px;font-size:11px}
.table th.sortable:hover{color:var(--text)}
.toast-action{border:none;background:var(--purple-soft);color:var(--purple);border-radius:7px;padding:4px 10px;font-weight:700;font-size:12px;margin-left:6px}
.toast-action:hover{background:var(--purple);color:#fff}
.palette-group{padding:10px 12px 4px;font-size:10.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.palette-list button small{margin-left:auto;font-size:11px;white-space:nowrap}
.profile-role{margin:2px 0 0;font-size:12px}
.role-item{width:100%;border:none;background:transparent;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;text-align:left;color:var(--text)}
.role-item:hover{background:var(--bg)}
.role-item.active{color:var(--purple);font-weight:600;background:var(--purple-soft)}
.role-item svg{width:16px;height:16px;flex:none}
.tab-pane{margin-top:4px}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.cal-head h3{margin:0;font-size:15px;text-transform:capitalize}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dow{font-size:11px;font-weight:700;color:var(--text-3);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.04em}
.cal-day{min-height:96px;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--white);font-size:11px;overflow:hidden}
.cal-day.out{background:transparent;border-style:dashed;opacity:.35}
.cal-day .d{display:block;font-weight:700;font-size:12px;margin-bottom:4px;color:var(--muted)}
.cal-day.today{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple)}
.cal-day.today .d{color:var(--purple)}
.cal-ev{display:block;border-radius:6px;padding:2px 6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:10.5px}
.cal-ev.success{background:var(--green-soft);color:var(--green)}
.cal-ev.warning{background:var(--yellow-soft);color:#A87500}
.cal-ev.danger{background:var(--red-soft);color:var(--red)}
.cal-ev.neutral{background:var(--bg);color:var(--muted)}
.cal-ev.purple{background:var(--purple-soft);color:var(--purple)}
.dot.yellow{background:var(--yellow)}.dot.purple{background:var(--purple)}.dot.gray{background:var(--text-3)}
.bars b.green{background:var(--green)}.bars b.red{background:var(--red)}
.receipt-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}
.receipt-head h2{margin:0 0 4px;font-size:18px}
.receipt-head p{margin:0;color:var(--muted);font-size:12px}
.receipt-no{text-align:right}
.receipt-no strong{display:block;font-size:16px}
.receipt-no span{color:var(--muted);font-size:12px}
.receipt .table th{width:40%;color:var(--muted)}
.receipt-total{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--text);margin-top:14px;padding-top:12px;font-size:16px;font-weight:700}
.receipt-foot{font-size:11px;margin-top:14px}
@media print{ body *{visibility:hidden!important} #printArea,#printArea *{visibility:visible!important} #printArea{position:fixed;inset:0;padding:36px;overflow:visible;background:#fff} }
@keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes scaleIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}