/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-geist-sans);
    --default-mono-font-family: var(--font-geist-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }
  .resize {
    resize: both;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }
  .filter\! {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
:root {
  --background: #f8f5f0;
  --foreground: #29252a;
  --primary: #783d50;
  --primary-dark: #572a39;
  --sage: #8b9b83;
  --border: #e8e0db;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
a {
  text-decoration: none;
}
::selection {
  background: #e6cdd5;
  color: #572a39;
}
body {
  font-family: var(--font-geist-sans), "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button {
  border: 0;
  background: none;
  color: inherit;
}
button:focus-visible, a:focus-visible {
  outline: 3px solid #9cae8f;
  outline-offset: 4px;
}
h1,h2,h3,p {
  margin: 0;
}
.app-shell {
  min-height: 100dvh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 264px;
  padding: 34px 22px;
  background: #fefdf9;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 58px;
}
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 52px;
  background: var(--primary);
  color: #fff8ee;
  font: 30px Georgia,serif;
  border-radius: 17px 4px 17px 4px;
}
.brand-mark span {
  font-size: 16px;
  align-self: flex-end;
  margin-bottom: 9px;
}
.brand strong {
  font-size: 17px;
  letter-spacing: -.6px;
}
.brand small {
  display: block;
  font: italic 13px Georgia,serif;
  color: #8b7770;
  margin-top: 5px;
}
.nav-heading {
  font-size: 10px;
  letter-spacing: 2px;
  color: #9d9289;
  padding: 0 14px;
  margin-bottom: 14px;
}
nav {
  display: grid;
  gap: 7px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 14px 15px;
  border-radius: 9px;
  color: #746b68;
  min-height: 48px;
  transition: background .15s;
}
.nav-item:hover {
  background: #f4eee9;
}
.nav-item.active {
  background: var(--primary);
  color: #fff7ef;
  box-shadow: 0 5px 14px #783d501a;
}
.nav-symbol {
  font-size: 21px;
  width: 24px;
  text-align: center;
}
.sidebar-bottom {
  margin-top: auto;
  padding: 26px 10px 0;
  font-size: 11px;
  color: #7e8174;
}
.sidebar-bottom small {
  display: block;
  margin: 10px 0 0 15px;
  color: #aaa095;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  background: #8b9b83;
  border-radius: 50%;
}
.main-content {
  margin-left: 264px;
}
.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 42px;
  border-bottom: 1px solid var(--border);
  background: #fdfbf7;
}
.breadcrumb {
  color: #897f78;
  font-size: 12px;
}
.breadcrumb span {
  margin: 0 13px;
  color: #c3b8af;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.date-label {
  color: #8b8077;
  font-size: 12px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--primary);
  background: #eadedb;
  font-weight: 600;
}
.content {
  max-width: 1500px;
  margin: auto;
  padding: 40px 42px 24px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.eyebrow {
  color: #9b8272;
  letter-spacing: 2px;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 9px;
}
h1 {
  font: 36px Georgia,serif;
  letter-spacing: -1px;
  color: #423336;
  margin-bottom: 10px;
}
.page-heading p:not(.eyebrow) {
  color: #948780;
  font-size: 13px;
}
.preview-label {
  border: 1px solid #ddd7ca;
  border-radius: 30px;
  padding: 8px 13px;
  color: #8a806e;
  font-size: 11px;
  white-space: nowrap;
}
.welcome-banner {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border-radius: 12px;
  background: #703749;
  color: #f7eade;
  padding: 36px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.welcome-banner h2 {
  font: italic 39px Georgia,serif;
  margin: 8px 0 15px;
}
.welcome-banner p:not(.eyebrow) {
  color: #dfc6c7;
  max-width: 390px;
  line-height: 1.8;
  font-size: 13px;
}
.eyebrow.light {
  color: #d8bab4;
}
.banner-art {
  font-size: 148px;
  line-height: 1;
  color: #c3b191;
  transform: rotate(-15deg);
  margin-right: 36px;
}
.welcome-banner::after {
  content: "";
  position: absolute;
  width: 290px;
  height: 290px;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  right: -55px;
  top: -40px;
  pointer-events: none;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
  margin: 26px 0;
}
.stat-card {
  padding: 22px;
  background: #fefdfa;
  border: 1px solid var(--border);
  border-radius: 11px;
}
.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #847971;
}
.stat-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 9px;
  font-size: 19px;
}
.sage {
  background: #eaf0e5;
  color: #75856b;
}
.rose {
  background: #f4e7e8;
  color: #a56b78;
}
.gold {
  background: #f4eddc;
  color: #a39157;
}
.blue {
  background: #e8edef;
  color: #7b9094;
}
.stat-card strong {
  display: block;
  font-size: 29px;
  font-weight: 500;
  margin: 15px 0 9px;
  letter-spacing: -1px;
}
.stat-card small {
  color: #a79b92;
  font-size: 10px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
}
.panel {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fefdfa;
}
.panel-heading {
  min-height: 68px;
  padding: 21px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #efe9e2;
}
h3 {
  font-size: 14px;
  font-weight: 500;
}
.muted {
  color: #afa296;
  font-size: 10px;
}
.empty-state {
  min-height: 250px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #94a287;
  background: #f0f2e9;
  font-size: 25px;
  margin-bottom: 16px;
}
.empty-state strong {
  font-size: 13px;
  font-weight: 500;
}
.empty-state p,.module-placeholder p {
  font-size: 12px;
  line-height: 1.8;
  color: #9e9187;
  max-width: 340px;
  margin: 9px 0 17px;
}
.empty-state button,.module-placeholder button {
  color: var(--primary);
  font-size: 12px;
  padding: 8px;
}
.quick-links {
  display: grid;
  padding: 10px 22px;
}
.quick-links button {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 2px;
  text-align: left;
  border-bottom: 1px solid #f0ebe5;
  font-size: 12px;
}
.quick-links button:last-child {
  border: 0;
}
.quick-links button:hover {
  color: var(--primary);
}
.quick-links span {
  background: #f4eee7;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #a58f7b;
  font-size: 18px;
}
.quick-links b {
  margin-left: auto;
  color: #c1b5a9;
  font-weight: 400;
}
.module-placeholder {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
}
.module-placeholder h2 {
  font: 28px Georgia,serif;
}
footer {
  padding-top: 30px;
  color: #b2a69b;
  font-size: 10px;
  line-height: 1.8;
}
.menu-toggle,.mobile-overlay {
  display: none;
}
@media (min-width: 1600px) {
  .content {
    padding-top: 52px;
  }
}
@media (max-width: 1180px) {
  .sidebar {
    width: 230px;
    padding-inline: 16px;
  }
  .main-content {
    margin-left: 230px;
  }
  .content {
    padding: 30px 24px;
  }
  .topbar {
    padding-inline: 24px;
  }
  .stat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .banner-art {
    margin-right: 0;
    font-size: 110px;
  }
}
@media (max-width: 850px) {
  .sidebar {
    transform: translateX(-100%);
    width: 264px;
    transition: transform .2s;
  }
  .sidebar-open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
  .menu-toggle {
    display: block;
    font-size: 22px;
    padding: 7px;
  }
  .mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: #29252a66;
    z-index: 20;
  }
  .topbar {
    min-height: 74px;
  }
  .breadcrumb {
    margin-right: auto;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .topbar {
    padding: 12px 14px;
    gap: 9px;
  }
  .date-label {
    display: none;
  }
  .breadcrumb {
    font-size: 10px;
  }
  .breadcrumb span {
    margin: 0 6px;
  }
  .content {
    padding: 28px 18px;
  }
  .page-heading {
    align-items: flex-start;
  }
  .preview-label {
    font-size: 9px;
    padding: 6px 9px;
  }
  h1 {
    font-size: 31px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.4px;
  }
  .welcome-banner {
    padding: 28px 24px;
    min-height: 205px;
  }
  .welcome-banner h2 {
    font-size: 31px;
  }
  .banner-art {
    display: none;
  }
  .stat-grid {
    gap: 10px;
    margin-block: 18px;
  }
  .stat-card {
    padding: 15px;
  }
  .stat-top {
    font-size: 10px;
  }
  .stat-icon {
    width: 27px;
    height: 27px;
  }
  .stat-card strong {
    font-size: 26px;
  }
  .panel-heading {
    padding-inline: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    transition: none !important;
  }
}
:root {
  --font-geist-sans: "Segoe UI";
  --font-geist-mono: Consolas, monospace;
}
.primary-button,.secondary-button {
  min-height: 42px;
  padding: 10px 17px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.primary-button {
  background: var(--primary);
  color: #fff8f0;
}
.primary-button:hover {
  background: var(--primary-dark);
}
.secondary-button {
  background: #fffdfa;
  border: 1px solid #ded4ca;
  color: #7c555e;
}
.secondary-button:hover {
  background: #f1e9e3;
}
button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.month-filter {
  color: #99877d;
  font-size: 10px;
  display: grid;
  gap: 5px;
}
.month-filter input {
  min-height: 39px;
  background: #fffdf8;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: #715e5c;
  font-size: 12px;
}
.toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.section-note {
  font-size: 12px;
  color: #9b8b80;
  line-height: 1.8;
  margin: 14px 0 22px;
}
.panel > .section-note {
  padding: 0 22px;
}
.feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #e8eee2;
  color: #566c49;
  border-radius: 8px;
  margin: 0 0 18px;
  line-height: 1.6;
  font-size: 12px;
}
.feedback.error {
  color: #86394c;
  background: #f5e6e9;
}
.feedback button {
  flex-shrink: 0;
  text-decoration: underline;
}
.loading-panel {
  padding: 50px 28px;
  text-align: center;
}
.loading-panel h2 {
  font: 26px Georgia,serif;
  margin-bottom: 16px;
}
.loading-panel p {
  margin: 12px 0 18px;
  color: #938176;
  line-height: 1.8;
}
.record-list {
  display: grid;
  gap: 22px;
}
.record-card {
  padding: 25px;
  overflow: hidden;
}
.record-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.record-heading h2 {
  font: 25px Georgia,serif;
  margin: 11px 0;
}
.record-heading p {
  font-size: 12px;
  color: #96867c;
  line-height: 1.9;
}
.record-heading > button {
  flex-shrink: 0;
}
.badge {
  display: inline-block;
  padding: 5px 9px;
  background: #edf1e5;
  color: #71805e;
  border-radius: 5px;
  font-size: 10px;
}
.badge-cancelled {
  background: #f2e3e6;
  color: #9a5e71;
}
.record-note {
  color: #918276;
  font-size: 12px;
  margin-top: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.record-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 26px 0 12px;
  padding-top: 18px;
  border-top: 1px solid #eee7de;
}
.text-button {
  color: var(--primary);
  font-size: 11px;
  padding: 8px 0;
}
.text-button:hover {
  text-decoration: underline;
}
.inline-empty {
  font-size: 12px;
  color: #aa9b8f;
  padding: 20px 0;
}
.table-scroll {
  overflow-x: auto;
  width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}
th {
  color: #9a8b80;
  font-weight: 400;
  font-size: 10px;
  padding: 15px;
  background: #faf7f2;
  white-space: nowrap;
}
td {
  padding: 16px 15px;
  border-bottom: 1px solid #eee8df;
  vertical-align: middle;
}
td strong {
  font-weight: 500;
}
td small {
  display: block;
  color: #a3958a;
  margin-top: 6px;
  font-size: 10px;
}
td:nth-child(3),td:nth-child(4) {
  white-space: nowrap;
}
.row-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}
.row-actions button {
  color: var(--primary);
  font-size: 11px;
  min-height: 36px;
  white-space: nowrap;
}
.stack-actions {
  display: grid;
  gap: 10px;
  flex-shrink: 0;
}
.record-heading + .table-scroll {
  margin-top: 22px;
}
.people-panel,.categories-panel {
  margin-top: 26px;
}
.people-list {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  gap: 20px;
  padding: 24px;
}
.people-list strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.people-list small {
  color: #9b8b80;
  font-size: 11px;
  margin-top: 6px;
  display: block;
}
.agenda-list {
  padding: 5px 22px;
}
.agenda-list button {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  text-align: left;
  border-bottom: 1px solid #eee8e0;
}
.agenda-list button:last-child {
  border-bottom: 0;
}
.agenda-date {
  color: #9c7c71;
  min-width: 125px;
  font-size: 11px;
}
.agenda-list strong {
  font-size: 13px;
  font-weight: 500;
  display: block;
}
.agenda-list small {
  font-size: 10px;
  color: #a39286;
  display: block;
  margin-top: 6px;
}
.agenda-list b {
  color: #b9a493;
  margin-left: auto;
  font-weight: 400;
}
.agenda-cancelled {
  opacity: .55;
}
.income-text {
  color: #74845c;
}
.expense-text {
  color: #a66d7a;
}
.voided-row {
  opacity: .6;
}
.voided-row td:nth-child(3) {
  text-decoration: line-through;
}
.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
  gap: 10px;
  padding: 22px;
}
.category-list button {
  padding: 14px;
  border: 1px solid #ece4da;
  border-radius: 8px;
  text-align: left;
}
.category-list span {
  display: block;
  font-size: 12px;
}
.category-list small {
  display: block;
  margin-top: 8px;
  color: #aa998c;
  font-size: 10px;
}
.editor-dialog {
  width: min(560px,calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  border: 1px solid #e8ddd1;
  border-radius: 14px;
  padding: 0;
  color: var(--foreground);
  background: #fffdf9;
  box-shadow: 0 30px 100px #38242c33;
}
.editor-dialog::backdrop {
  background: #30212877;
  backdrop-filter: blur(3px);
}
.editor-header {
  padding: 26px 28px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #eee6dc;
}
.editor-header h2 {
  font: 27px Georgia,serif;
}
.editor-header button {
  font-size: 24px;
  padding: 4px;
  color: #9e867e;
}
.editor-fields {
  border: 0;
  margin: 0;
  padding: 25px 28px;
  display: grid;
  gap: 19px;
  min-width: 0;
}
.form-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.form-field > span {
  color: #877268;
  font-size: 11px;
}
.form-field input,.form-field select,.form-field textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid #ded4c9;
  background: #fffefa;
  border-radius: 7px;
  min-height: 43px;
  padding: 10px 11px;
  font-size: 13px;
  color: #59494a;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus {
  outline: 2px solid #b7c1a5;
  outline-offset: 1px;
}
.form-field textarea {
  resize: vertical;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-hint {
  font-size: 11px;
  color: #a18c7d;
  line-height: 1.8;
}
.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #8c756a;
}
.editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 28px;
  background: #faf6f0;
  border-top: 1px solid #eee6db;
}
.editor-dialog .feedback {
  margin: 0 28px 20px;
}
@media (max-width: 650px) {
  .record-card {
    padding: 18px;
  }
  .record-heading {
    flex-direction: column;
    gap: 14px;
  }
  .record-heading h2 {
    font-size: 23px;
  }
  .stack-actions {
    display: flex;
    flex-wrap: wrap;
  }
  .record-heading > button {
    width: 100%;
  }
  .page-heading {
    gap: 10px;
  }
  .month-filter input {
    width: 130px;
    padding: 7px;
  }
  .agenda-list {
    padding-inline: 18px;
  }
  .agenda-list button {
    gap: 13px;
  }
  .agenda-date {
    min-width: 95px;
    font-size: 10px;
  }
  .editor-header {
    padding: 22px 20px;
  }
  .editor-fields {
    padding: 22px 20px;
  }
  .editor-footer {
    padding: 18px 20px;
  }
  .table-scroll table {
    min-width: 510px;
  }
  .stat-card strong {
    font-size: 24px;
  }
}
@media (max-width: 850px) {
  .sidebar {
    visibility: hidden;
  }
  .sidebar-open {
    visibility: visible;
  }
}
.period-actions {
  display: grid;
  justify-items: end;
  gap: 3px;
  flex-shrink: 0;
}
.catalog-panel {
  margin-top: 26px;
  padding-top: 20px;
}
.catalog-panel > summary {
  cursor: pointer;
  padding: 0 22px;
  font-size: 14px;
  color: #72525c;
}
.catalog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.catalog-grid > section {
  min-width: 0;
}
.catalog-grid > section + section {
  border-left: 1px solid var(--border);
}
.agenda-description {
  min-width: 0;
  overflow-wrap: anywhere;
}
.agenda-description .agenda-location {
  color: #788268;
  line-height: 1.6;
  font-size: 11px;
}
.record-heading > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 650px) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }
  .catalog-grid > section + section {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
.student-directory {
  margin-bottom: 24px;
}
.directory-controls {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
}
.choice-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.choice-tabs button {
  border: 1px solid #e3d8cf;
  border-radius: 7px;
  padding: 10px 13px;
  font-size: 11px;
  color: #967e75;
  min-height: 40px;
}
.choice-tabs button[aria-pressed="true"] {
  background: #783d50;
  color: #fff8ef;
  border-color: #783d50;
}
.directory-list {
  padding: 0 22px 16px;
}
.directory-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #eee6dd;
}
.directory-row > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.directory-row strong {
  font-size: 13px;
  font-weight: 500;
}
.directory-row small {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: #9c897d;
  line-height: 1.7;
}
.directory-row .row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.people-archive {
  padding-top: 20px;
  margin-top: 26px;
}
.people-archive > summary {
  margin: 0 22px;
  cursor: pointer;
  font-size: 13px;
  color: #8c6c70;
}
.person-picker {
  display: grid;
  gap: 14px;
}
@media (max-width: 650px) {
  .directory-row {
    flex-direction: column;
    align-items: stretch;
  }
  .directory-row .row-actions {
    justify-content: flex-start;
  }
  .student-directory .panel-heading {
    flex-wrap: wrap;
  }
}
.inventory-filters {
  padding: 20px 22px;
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}
.inventory-options {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}
.inventory-card {
  padding: 23px;
  min-width: 0;
}
.inventory-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.inventory-card h2 {
  font: 23px Georgia,serif;
  overflow-wrap: anywhere;
}
.inventory-card .badge {
  flex-shrink: 0;
}
.inventory-balance {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 20px 0 10px;
}
.inventory-balance strong {
  font-size: 34px;
  font-weight: 500;
}
.inventory-balance span {
  font-size: 12px;
  color: #a18d7f;
}
.inventory-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.inventory-history {
  margin-top: 26px;
}
.inventory-history td small {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 290px;
}
.payment-history {
  margin-top: 8px;
  color: #9c877b;
  font-size: 10px;
}
.payment-history summary {
  cursor: pointer;
}
.payment-history small {
  line-height: 1.8;
}
@media (max-width: 650px) {
  .inventory-grid {
    grid-template-columns: 1fr;
  }
  .inventory-card {
    padding: 20px;
  }
  .inventory-card h2 {
    font-size: 22px;
  }
  .inventory-history table {
    min-width: 700px;
  }
}
.week-controls {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.week-controls p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.week-controls > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.archived-notes {
  margin-top: 24px;
  font-size: 13px;
}
.archived-notes summary {
  cursor: pointer;
}
.archived-notes > button {
  display: block;
  margin-top: 10px;
  text-align: left;
}
.agenda-location {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.week-controls {
  margin-left: 22px;
  margin-right: 22px;
}
.conflict-panel {
  margin-bottom: 24px;
  padding: 22px;
}
.conflict-panel summary {
  cursor: pointer;
  color: #783d4f;
  font-weight: 600;
}
.conflict-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.conflict-pair {
  border: 1px solid #e4d4d8;
  border-radius: 12px;
  padding: 4px 16px;
}
.conflict-pair > div {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.conflict-pair > div + div {
  border-top: 1px dashed #e4d4d8;
}
.conflict-pair p {
  font-size: 13px;
  margin: 6px 0 0;
}
.conflict-pair strong {
  overflow-wrap: anywhere;
}
.plan-preview {
  display: grid;
  gap: 12px;
}
.plan-preview > div {
  padding: 12px;
  border: 1px solid #e4d4d8;
  border-radius: 10px;
}
.plan-conflict {
  color: #923c43;
  font-size: 13px;
  overflow-wrap: anywhere;
}
@media (max-width:600px) {
  .conflict-pair > div {
    flex-direction: column;
    align-items: stretch;
  }
  .conflict-notice {
    flex-wrap: wrap;
  }
}
.reports-panel {
  display: grid;
  gap: 24px;
}
.reports-panel .stat-grid {
  margin: 0;
}
.report-period {
  padding: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.report-period p {
  max-width: 620px;
  font-size: 12px;
  line-height: 1.8;
  margin-top: 8px;
  color: #8c756a;
}
.reports-panel td small {
  white-space: normal;
  overflow-wrap: anywhere;
}
.reports-panel, .reports-panel > * {
  min-width: 0;
}
.backup-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}
.backup-card {
  padding: 28px;
  min-width: 0;
}
.backup-card h2 {
  font: 28px Georgia,serif;
  margin: 12px 0;
}
.backup-card p,.backup-card li {
  font-size: 13px;
  line-height: 1.9;
  color: #8c756a;
  margin: 12px 0;
}
.backup-card ol {
  padding-left: 20px;
}
.backup-card h3 {
  margin-top: 20px;
}
.backup-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 24px 0;
  font-size: 12px;
}
.backup-counts strong {
  color: #783d50;
  margin-right: 4px;
}
.backup-ready {
  border: 1px solid #d1d9c4;
  background: #f5f7ef;
  border-radius: 12px;
  padding: 18px;
  margin-top: 24px;
}
.backup-ready h3 {
  margin-top: 0;
}
.backup-ready small {
  display: block;
  margin-top: 12px;
  overflow-wrap: anywhere;
  font-size: 11px;
}
.backup-ready a {
  display: inline-block;
  text-decoration: none;
}
@media (max-width:850px) {
  .backup-layout {
    grid-template-columns: 1fr;
  }
}
.access-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 22px;
  background: #f8f5ef;
}
.access-card {
  width: min(480px,100%);
  padding: 32px;
}
.access-card h1,.security-card h2 {
  font: 30px Georgia,serif;
  margin: 16px 0;
}
.access-card > p,.security-card > p {
  font-size: 13px;
  line-height: 1.9;
  margin: 16px 0;
  color: #8c756a;
}
.security-card {
  max-width: 750px;
  padding: 28px;
}
.security-card h3 {
  margin-top: 28px;
}
.password-form fieldset {
  border: 0;
  padding: 0;
  margin: 20px 0;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.password-form .feedback {
  margin-top: 16px;
}
.sidebar nav {
  min-height: 0;
  overflow-y: auto;
}
.sidebar-bottom {
  flex-shrink: 0;
}
.device-status {
  padding: 16px 20px;
  margin-bottom: 24px;
  border-color: #d4ddca;
}
.device-status strong {
  color: #783d50;
  font-size: 13px;
}
.device-status p {
  font-size: 12px;
  line-height: 1.8;
  margin: 8px 0;
  color: #75665f;
}
.device-status summary {
  cursor: pointer;
  font-size: 12px;
  color: #7a8068;
}
.import-card {
  margin-bottom: 24px;
}
.studio-dashboard {
  color: #40291e;
  display: grid;
  gap: 1rem;
}
.studio-dashboard h1, .studio-dashboard h2, .studio-dashboard h3 {
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
  color: inherit;
}
.studio-dashboard h1 {
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: 1.1;
}
.studio-dashboard h1 span {
  color: #a77647;
}
.studio-dashboard h2 {
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}
.studio-welcome, .studio-planner-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.studio-welcome p {
  font: italic 1.2rem Georgia, serif;
  margin: .35rem 0 0;
}
.studio-new {
  position: relative;
  z-index: 2;
}
.studio-new summary {
  cursor: pointer;
  list-style: none;
  background: #704534;
}
.studio-new > div {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  width: 13rem;
  display: grid;
  padding: .35rem;
  border: 1px solid #c3a99b;
  border-radius: .65rem;
  background: #fffaf4;
  box-shadow: 0 10px 26px #40291e22;
}
.studio-new button {
  text-align: left;
  padding: .65rem;
  border-radius: .35rem;
}
.studio-new button:hover {
  background: #f4dfd4;
}
.studio-today, .studio-panel {
  border: 1px solid #bca79c;
  border-radius: .8rem;
  padding: 1rem;
  background: #fffaf5;
}
.studio-today {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(100deg,#f8e5da,#fffaf5 65%);
}
.studio-today > div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  flex: 1 1 16rem;
}
.studio-today .studio-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}
.studio-week-controls {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.studio-week {
  margin-top: .8rem;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  border: 1px solid #bca79c;
  border-radius: .5rem;
  overflow: hidden;
}
.studio-day {
  min-width: 0;
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid #cdbab0;
}
.studio-day:last-child {
  border-inline-end: 0;
}
.studio-day h3 {
  font-size: .96rem;
  text-align: center;
  padding: .65rem .15rem;
  background: #f7d9cb;
  border-bottom: 1px solid #cdbab0;
  text-transform: capitalize;
}
.studio-current-day {
  background: #f3f4e9;
}
.studio-current-day h3 {
  background: #e2e8cf;
}
.studio-day-events {
  display: grid;
  gap: .4rem;
  padding: .45rem;
  align-content: start;
  flex: 1;
}
.studio-event {
  background: #e4e9d4;
  border-inline-start: .3rem solid #889e69;
  text-align: left;
  border-radius: .4rem;
  padding: .45rem .5rem;
  overflow-wrap: anywhere;
  display: grid;
  gap: .1rem;
  line-height: 1.25;
  min-width: 0;
}
.studio-event.workshop {
  background: #f8ddce;
  border-color: #bf7453;
}
.studio-event.note {
  background: #eee4f2;
  border-color: #977ba6;
}
.studio-event small {
  font-size: .74rem;
}
.studio-day-add {
  min-height: 2.25rem;
  color: #6e5143;
  font-size: 1.2rem;
}
.studio-day-add:hover {
  background: #eee0d5;
}
.studio-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  padding-top: .7rem;
  font-size: .85rem;
}
.studio-legend span::before {
  display: inline-block;
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  margin-right: .35rem;
  background: #a9ba88;
}
.studio-legend .workshop::before {
  background: #e6ab90;
}
.studio-legend .note::before {
  background: #c2a7cf;
}
.studio-cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .8rem;
}
.studio-cards .studio-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .7rem;
}
.studio-highlight {
  background: #f9e1d4;
  border-radius: .5rem;
  padding: .35rem .5rem;
  overflow-wrap: anywhere;
}
.studio-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.studio-tasks li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0d2c9;
  gap: .4rem;
}
.studio-tasks label {
  display: flex;
  align-items: center;
  gap: .45rem;
  overflow-wrap: anywhere;
  min-width: 0;
}
.studio-tasks input:checked + span {
  text-decoration: line-through;
}
.studio-task-form {
  display: flex;
  gap: .4rem;
}
.studio-task-form input {
  min-width: 0;
  width: 100%;
  border: 1px solid #cdbab0;
  border-radius: .45rem;
  padding: .5rem;
}
.studio-notes {
  display: grid;
  min-height: 3rem;
  background: repeating-linear-gradient(transparent 0 1.9rem,#dfd3dc 1.9rem 2rem);
}
.studio-notes button {
  min-height: 2rem;
  text-align: left;
}
.delete-button {
  padding: .5rem .8rem;
  border-radius: .55rem;
  border: 1px solid #ac5f62;
  color: #852d36;
  background: #fff6f4;
  font-weight: 600;
}
.delete-button:hover {
  background: #f5dad8;
}
.delete-dialog {
  padding: 1.2rem;
}
.delete-dialog p {
  margin: .75rem 0;
}
@media (max-width: 900px) {
  .studio-week {
    grid-template-columns: repeat(7,minmax(7.75rem,1fr));
    overflow-x: auto;
  }
}
@media (max-width: 650px) {
  .studio-cards {
    grid-template-columns: 1fr;
  }
  .studio-today, .studio-panel {
    padding: .75rem;
  }
}
.studio-shell {
  background: #f8f1e9;
}
.studio-shell .sidebar {
  background: #f9f1e7;
  color: #40291e;
  border-inline-end: 1px solid #d5bfb0;
}
.studio-shell .brand strong {
  font-family: Georgia, serif;
  color: #40291e;
}
.studio-shell .brand small, .studio-shell .nav-heading, .studio-shell .sidebar-bottom, .studio-shell .sidebar-bottom small {
  color: #745346;
}
.studio-shell .nav-item {
  color: #54382b;
}
.studio-shell .nav-item.active, .studio-shell .nav-item:hover {
  background: #f4d2c1;
  color: #40291e;
}
.studio-shell .nav-symbol {
  color: #704534;
}
.app-shell {
  background: #f8f3ed;
}
.app-shell .sidebar {
  background: #faf2e9;
  color: #493027;
  border-inline-end: 1px solid #ddcbbf;
}
.app-shell .brand strong {
  font-family: Georgia, serif;
  color: #493027;
}
.app-shell .brand small, .app-shell .nav-heading, .app-shell .sidebar-bottom, .app-shell .sidebar-bottom small {
  color: #705748;
}
.app-shell .nav-item {
  color: #54382b;
}
.app-shell .nav-item.active, .app-shell .nav-item:hover {
  background: #f2d7ca;
  color: #472a27;
}
.app-shell .nav-symbol {
  color: #754738;
}
.app-shell .brand-mark {
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}
.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.app-shell .panel {
  background: #fffcf8;
  border-color: #e2d5c9;
}
.app-shell .page-heading h1, .app-shell .panel-heading h3, .app-shell .record-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  color: #493027;
}
.compact-details {
  margin-top: .65rem;
  border: 1px solid #e2d5c9;
  border-radius: .65rem;
  padding: .65rem .85rem;
}
.compact-details summary {
  cursor: pointer;
  color: #674334;
  font-weight: 650;
  padding-block: .25rem;
}
.compact-details[open] summary {
  margin-bottom: .65rem;
}
.compact-details .table-scroll {
  margin-top: .4rem;
}
.student-directory > .choice-tabs {
  margin-block: .75rem;
}
.monthly-calendar {
  display: grid;
  gap: 1rem;
}
.calendar-toolbar, .calendar-month-nav, .calendar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}
.calendar-toolbar {
  justify-content: space-between;
  gap: .75rem;
}
.calendar-month-nav h2 {
  color: #493027;
  font: 700 clamp(1.15rem, 2vw, 1.65rem) Georgia, serif;
  text-transform: capitalize;
  margin-inline: .3rem;
}
.calendar-month-nav .secondary-button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: .25rem .65rem;
  font-size: 1.25rem;
}
.calendar-filter {
  border-radius: 2rem;
  border: 1px solid #ddcbbf;
  min-height: 2.5rem;
  padding: .25rem .65rem;
  color: #54382b;
}
.calendar-filter[aria-pressed="true"] {
  background: #f8ddce;
  border-color: #be805f;
}
.calendar-filter.lesson[aria-pressed="true"] {
  background: #e5ecd6;
  border-color: #8ca071;
}
.calendar-filter.note[aria-pressed="true"] {
  background: #f0e5f3;
  border-color: #aa87b2;
}
.calendar-filter[aria-pressed="false"] {
  opacity: .68;
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 1px;
  background: #e4d6ca;
  border: 1px solid #e4d6ca;
  border-radius: .7rem;
  overflow: hidden;
}
.month-weekday {
  background: #f8e7dd;
  color: #684a3e;
  text-align: center;
  padding: .5rem 0;
  font-weight: 650;
  font-size: .8rem;
}
.month-blank {
  background: #f6f0e9;
}
.month-day {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  min-height: 5.2rem;
  padding: .35rem;
  background: #fffdf9;
  text-align: left;
  color: #493027;
}
.month-day:hover {
  background: #fbefe7;
}
.month-day[aria-pressed="true"] {
  background: #f6e4d9;
  box-shadow: inset 0 0 0 2px #aa7564;
}
.month-number {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-weight: 650;
}
.month-day[aria-current="date"] .month-number {
  color: #fff;
  background: #783d50;
}
.month-previews {
  display: grid;
  min-width: 0;
  gap: .15rem;
  width: 100%;
}
.month-preview {
  padding: .12rem .25rem;
  background: #f8ddce;
  border-radius: .25rem;
  font-size: .72rem;
  min-width: 0;
}
.month-preview span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-preview.lesson {
  background: #e5ecd6;
}
.month-preview.note {
  background: #f0e5f3;
}
.calendar-day-detail {
  border-top: 1px solid #e4d6ca;
  padding-top: .8rem;
}
.calendar-day-detail h3 {
  text-transform: capitalize;
}
.calendar-day-items {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(14rem,100%),1fr));
  gap: .45rem;
}
@media (max-width: 650px) {
  .month-day {
    min-height: 3.2rem;
    padding: .15rem;
    align-items: center;
  }
  .month-previews {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .13rem;
  }
  .month-previews small {
    font-size: .58rem;
  }
  .month-preview {
    width: .36rem;
    height: .36rem;
    padding: 0;
    background: #c17b5e;
  }
  .month-preview.lesson {
    background: #7f995e;
  }
  .month-preview.note {
    background: #a07bab;
  }
  .month-preview span {
    display: none;
  }
}
.app-shell {
  background: #f7f3ed;
}
.app-shell .sidebar {
  background: #fffaf3;
  border-color: #e1d7c9;
}
.app-shell .brand {
  padding: .65rem;
  background: #fff;
  border-radius: .8rem;
  justify-content: center;
}
.studio-logo {
  display: block;
  width: 100%;
  height: auto;
}
.app-shell .page-heading h1, .app-shell .panel-heading h3, .app-shell .record-heading h2, .studio-dashboard, .calendar-month-nav h2 {
  color: #142d55;
}
.app-shell .nav-item, .app-shell .nav-symbol {
  color: #213a60;
}
.app-shell .nav-item.active, .app-shell .nav-item:hover {
  background: #fbe5d3;
  color: #142d55;
}
.app-shell .primary-button, .app-shell .studio-new summary {
  background: #183761;
  color: #fff;
}
.app-shell .primary-button:hover {
  background: #244979;
}
.package-disclosure > summary {
  cursor: pointer;
  color: #142d55;
}
.package-disclosure > summary small {
  display: block;
  margin-inline-start: 1.1rem;
  color: #625b55;
}
.package-disclosure[open] > summary {
  border-bottom: 1px solid #e1d7c9;
  padding-bottom: .75rem;
  margin-bottom: .75rem;
}
.app-shell .student-library {
  padding: clamp(1rem, 2.5vw, 1.65rem);
  border-radius: 1.1rem;
  background: linear-gradient(135deg,#fffdf8,#f5f7fb);
}
.student-library-heading {
  display: flex;
  gap: .8rem;
  align-items: center;
}
.student-library-mark {
  display: grid;
  place-items: center;
  flex: 0 0 2.65rem;
  height: 2.65rem;
  border-radius: .8rem;
  background: #fbe7d7;
  color: #8f4925;
}
.student-library-heading h3 {
  margin: 0;
  font: 700 1.45rem Georgia,serif;
  color: #142d55;
}
.student-library-heading p {
  margin: .2rem 0 0;
  color: #5d6575;
  font-size: .9rem;
}
.student-library .choice-tabs {
  gap: .3rem;
}
.student-library .choice-tabs button {
  min-height: 2.5rem;
  padding: .4rem .85rem;
  border-radius: 2rem;
}
.student-library .choice-tabs button[aria-pressed="true"] {
  background: #183761;
  color: white;
}
.student-picker {
  max-width: 38rem;
  background: white;
  border: 1px solid #ccd5e1;
  border-radius: .8rem;
}
.student-picker > summary {
  list-style: none;
  display: flex;
  gap: .65rem;
  align-items: center;
  padding: .7rem .9rem;
  min-height: 3rem;
  color: #183761;
  cursor: pointer;
}
.student-picker > summary::-webkit-details-marker {
  display: none;
}
.student-picker > summary strong {
  flex: 1;
}
.student-picker-body {
  padding: .7rem;
  border-top: 1px solid #e3e8ef;
}
.student-picker-body input {
  width: 100%;
  border: 1px solid #ccd5e1;
  border-radius: .55rem;
  padding: .65rem;
}
.student-picker-body ul {
  list-style: none;
  padding: 0;
  margin: .45rem 0 0;
  max-height: 14rem;
  overflow: auto;
}
.student-picker-body li button {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .4rem;
  text-align: left;
  border-radius: .55rem;
  color: #183761;
}
.student-picker-body li button:hover, .student-picker-body li button[aria-pressed="true"] {
  background: #edf2f8;
}
.student-picker-body li button span {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #fbe7d7;
  color: #8f4925;
}
.app-shell .monthly-calendar {
  background: #f7f8ff;
  border-color: #ccd6f6;
}
.calendar-month-nav h2 {
  color: #253e92;
}
.month-grid {
  background: #d9e1f8;
  border-color: #d9e1f8;
}
.month-weekday {
  background: #344bc4;
  color: #fff;
}
.month-weekday:nth-child(n+6) {
  background: #643ab7;
}
.month-blank {
  background: #eef0fb;
}
.month-day {
  background: #fff;
  color: #24356f;
}
.month-day:hover {
  background: #edf2ff;
}
.month-day[aria-pressed="true"] {
  background: #e6edff;
  box-shadow: inset 0 0 0 2px #5168dd;
}
.month-day[aria-current="date"] .month-number {
  background: #4c42c9;
}
.calendar-filter.workshop[aria-pressed="true"], .month-preview.workshop, .studio-event.workshop {
  background: #e6d9ff;
  border-color: #8754c8;
  color: #47247d;
}
.calendar-filter.lesson[aria-pressed="true"], .month-preview.lesson, .studio-event.lesson {
  background: #cbf5eb;
  border-color: #36a28e;
  color: #075e54;
}
.calendar-filter.note[aria-pressed="true"], .month-preview.note, .studio-event.note {
  background: #dbe9ff;
  border-color: #5988da;
  color: #244d93;
}
.studio-day h3 {
  background: #344bc4;
  color: #fff;
  border-color: #d5dcf7;
}
.studio-current-day h3 {
  background: #643ab7;
}
.studio-current-day {
  background: #f0edff;
}
.studio-legend .workshop::before {
  background: #8754c8;
}
.studio-legend .lesson::before {
  background: #36a28e;
}
.studio-legend .note::before {
  background: #5988da;
}
@media (max-width: 650px) {
  .month-preview.workshop {
    background: #8754c8;
  }
  .month-preview.lesson {
    background: #36a28e;
  }
  .month-preview.note {
    background: #5988da;
  }
}
.app-shell {
  --studio-ink: #202d32;
  --studio-line: #dce4e1;
  --studio-paper: #f1f5f3;
  --studio-accent: #a33f22;
  background: var(--studio-paper);
  color: var(--studio-ink);
}
.app-shell .sidebar {
  background: #e8efec;
  border-color: var(--studio-line);
}
.app-shell .topbar, .app-shell .panel {
  background: #fff;
  border-color: var(--studio-line);
}
.app-shell .brand {
  justify-content: flex-start;
  background: transparent;
  padding-block: .6rem 1rem;
}
.studio-brush-mark {
  width: 5.5rem;
  height: 3.8rem;
  display: block;
}
.app-shell .nav-item, .app-shell .nav-symbol {
  color: #2c4140;
}
.app-shell .nav-item:hover {
  background: #dce9e4;
  color: #20352e;
}
.app-shell .nav-item.active {
  background: #f8e6de;
  color: #80361f;
}
.app-shell .page-heading h1, .app-shell .panel-heading h3, .app-shell .record-heading h2, .studio-dashboard, .calendar-month-nav h2 {
  color: var(--studio-ink);
}
.app-shell .primary-button, .app-shell .studio-new summary {
  background: #25453d;
}
.app-shell .primary-button:hover {
  background: #335b50;
}
.app-shell .secondary-button {
  background: #fff;
  border-color: #cfdad6;
  color: #2d4840;
}
.studio-panel, .studio-today, .app-shell .monthly-calendar {
  background: #fff;
  border-color: var(--studio-line);
}
.studio-today {
  border-inline-start: 3px solid #c9603f;
}
.studio-week, .month-grid {
  border-color: var(--studio-line);
  background: var(--studio-line);
}
.studio-day {
  border-color: var(--studio-line);
  background: #fff;
}
.studio-day h3, .studio-current-day h3, .month-weekday, .month-weekday:nth-child(n+6) {
  background: #edf2f0;
  color: #354b44;
  border-color: var(--studio-line);
}
.studio-current-day {
  background: #f6faf8;
}
.studio-current-day h3 {
  background: #dcece4;
  color: #245345;
}
.month-blank {
  background: #f3f6f4;
}
.month-day {
  background: #fff;
  color: #253832;
}
.month-day:hover {
  background: #f3f8f5;
}
.month-day[aria-pressed="true"] {
  background: #eef6f1;
  box-shadow: inset 0 0 0 2px #5e8a79;
}
.month-day[aria-current="date"] .month-number {
  background: #315a4d;
}
.calendar-day-detail {
  border-color: var(--studio-line);
}
.calendar-filter[aria-pressed="false"] {
  border-color: var(--studio-line);
  color: #566660;
}
.calendar-filter.workshop[aria-pressed="true"], .month-preview.workshop, .studio-event.workshop {
  background: #f6e9f1;
  color: #673850;
  border-color: #a47391;
}
.calendar-filter.lesson[aria-pressed="true"], .month-preview.lesson, .studio-event.lesson {
  background: #e2f1e8;
  color: #255645;
  border-color: #639783;
}
.calendar-filter.note[aria-pressed="true"], .month-preview.note, .studio-event.note {
  background: #f9ede2;
  color: #813d23;
  border-color: #bd7453;
}
.studio-legend .workshop::before {
  background: #a47391;
}
.studio-legend .lesson::before {
  background: #639783;
}
.studio-legend .note::before {
  background: #bd7453;
}
.student-tools {
  justify-content: flex-start;
  align-items: center;
}
.student-tools .student-picker {
  position: relative;
  flex: 0 1 auto;
  max-width: 100%;
  border-color: #cfdad6;
}
.student-tools .student-picker > summary {
  min-height: 2.75rem;
  color: #2d4840;
  padding: .45rem .75rem;
}
.student-tools .student-picker-body {
  z-index: 5;
  position: absolute;
  top: calc(100% + .35rem);
  inset-inline-start: 0;
  width: min(20rem, calc(100vw - 3rem));
  border: 1px solid #d5e0db;
  border-radius: .8rem;
  box-shadow: 0 12px 32px #233d3022;
  background: #fff;
}
.student-tools .choice-tabs {
  margin-bottom: .55rem;
}
.student-tools .choice-tabs button[aria-pressed="true"] {
  background: #25453d;
  color: #fff;
}
.student-selected {
  margin-bottom: .8rem;
}
@media (max-width: 650px) {
  .month-preview.workshop {
    background: #a47391;
  }
  .month-preview.lesson {
    background: #639783;
  }
  .month-preview.note {
    background: #bd7453;
  }
  .student-tools .student-picker-body {
    position: static;
    width: min(20rem, calc(100vw - 3rem));
    box-shadow: none;
  }
}
.student-overview {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .65rem;
  margin: .75rem 0;
}
.student-overview > div {
  background: #fff;
  border: 1px solid #dce4e1;
  border-radius: .75rem;
  padding: .7rem .85rem;
}
.student-overview dt {
  color: #52635d;
  font-size: .8rem;
}
.student-overview dd {
  margin: .25rem 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.student-overview dd small {
  display: block;
  color: #52635d;
  font-weight: 400;
}
.quick-agenda .editor-fields {
  gap: .7rem;
}
.quick-agenda li {
  margin: .35rem 0;
}
@media (max-width: 520px) {
  .student-overview {
    grid-template-columns: 1fr;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}