:root { --mini-bottom: 76px; --mini-top: env(safe-area-inset-top, 0px); }
body.mini-app { min-height: 100dvh; background: #f5f3f7; padding-bottom: calc(var(--mini-bottom) + env(safe-area-inset-bottom)); }
.mini-app main { max-width: 1100px; margin: 0 auto; padding: 18px 18px 28px; }
.mini-header { min-height: 76px; padding: calc(13px + var(--mini-top)) 20px 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fbfafc; border-bottom: 1px solid #e9e3ed; }
.mini-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mini-brand img { border-radius: 12px; flex-shrink: 0; }
.mini-brand > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mini-brand b { font: 400 19px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-brand small { color: #93829b; font-size: 8px; letter-spacing: .15em; font-weight: 600; }
.mini-person { display: grid; place-items: center; width: 37px; height: 37px; padding: 0; border-radius: 50%; border: 1px solid #e5d9eb; background: #efe7f4; color: var(--plum); font-weight: 600; flex-shrink: 0; cursor: pointer; }
.mini-connection { display: flex; align-items: center; gap: 7px; min-height: 33px; padding: 5px 20px; background: #fbfafc; color: #7b7283; font-size: 11px; }
.mini-dot { height: 6px; width: 6px; background: #4c9e78; border-radius: 50%; flex-shrink: 0; }
.mini-dot[data-state="offline"], .mini-dot[data-state="expired"] { background: #c58b2b; }
#miniRefresh { margin-left: auto; padding: 1px 0 1px 8px; color: var(--plum); background: transparent; border: 0; font-size: 11px; font-weight: 600; cursor: pointer; }
.mini-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(252,250,253,.97); backdrop-filter: blur(15px); border-top: 1px solid #e4dce9; padding: 8px 10px calc(9px + env(safe-area-inset-bottom)); }
.mini-nav a, .mini-nav > button { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 5px; padding: 5px 3px; border: 0; border-radius: 14px; background: none; color: #8a7f92; font-size: 10px; font-weight: 500; cursor: pointer; }
.mini-nav svg.i { width: 22px; height: 22px; stroke-width: 1.6; }
.mini-nav a.on { color: var(--plum); background: #f0e8f4; }
.mini-app .page-head h1 { font-size: 29px; }
.mini-app .page-head { margin-bottom: 20px; }
.mini-app .page-head .sub { font-size: 13px; }
.mini-eyebrow { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .16em; color: #a38caa; margin-bottom: 10px; }
.mini-hero { position: relative; min-height: 238px; overflow: hidden; border-radius: 24px; background: linear-gradient(118deg,#502361,#35143f); color: #fff; isolation: isolate; }
.mini-hero-copy { position: relative; padding: 25px; z-index: 1; }
.mini-hero .mini-eyebrow { color: #d9bbdf; font-size: 9px; letter-spacing: .19em; margin-bottom: 15px; }
.mini-hero h1 { font: 400 31px/1.26 var(--display); letter-spacing: -.025em; margin: 0 0 9px; }
.mini-hero p { color: #d3c2d9; font-size: 11px; }
.mini-date-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 19px; color: #f0e0c3; border: 1px solid #9c7d9d; border-radius: 18px; font-size: 10px; padding: 5px 10px; }
.mini-date-pill .i { width: 12px; height: 12px; }
.mini-hero-art { position: absolute; width: 80%; height: 100%; right: -30%; top: 0; transform: rotate(-24deg); opacity: .8; pointer-events: none; }
.mini-hero-art svg { width: 100%; height: 100%; color: #e9b86f; stroke: currentColor; fill: none; }
.mini-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 17px 0; }
.mini-action { display: flex; flex-direction: column; align-items: flex-start; padding: 15px 12px 14px; border: 1px solid #e8e0ec; border-radius: 18px; background: #fff; cursor: pointer; box-shadow: 0 3px 8px #43204f03; text-align: left; }
.mini-action-icon { display: grid; place-items: center; height: 35px; width: 35px; border-radius: 12px; margin-bottom: 12px; flex-shrink: 0; }
.mini-action-icon .i { width: 19px; height: 19px; }
.mini-action-icon.plum { background: #eee5f3; color: #6d3c82; }
.mini-action-icon.gold { background: #fbf0dc; color: #b47a23; }
.mini-action-icon.green { background: #e6f2eb; color: #4b8664; }
.mini-action b { font-weight: 600; font-size: 13px; }
.mini-action small { font-size: 9px; color: #998da0; line-height: 1.5; margin-top: 3px; }
.mini-work-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); background: #ebe6ef; border-radius: 15px; padding: 14px 0; margin-bottom: 27px; }
.mini-work-summary > div { padding: 0 16px; }
.mini-work-summary > div + div { border-left: 1px solid #dcd2e3; }
.mini-work-summary span { display: block; font-size: 10px; color: #8a7d94; margin-bottom: 5px; }
.mini-work-summary b { font-size: 18px; color: #492955; font-weight: 500; }
.mini-work-summary small { font-size: 10px; font-weight: 400; color: #87748e; }
.mini-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.mini-section-head .mini-eyebrow { margin-bottom: 4px; font-size: 8px; }
.mini-section-head h2 { font: 400 22px/1.3 var(--display); }
.mini-section-head .btn { font-size: 10px; padding: 0; height: 30px; }
.mini-arrow { transform: rotate(180deg); width: 13px !important; }
.mini-appointments { display: grid; gap: 9px; }
.mini-appointment { width: 100%; display: flex; gap: 13px; align-items: center; border: 1px solid #e7dfec; background: #fff; padding: 15px 13px; border-radius: 16px; text-align: left; cursor: pointer; }
.mini-appt-time { min-width: 47px; display: flex; flex-direction: column; align-self: stretch; justify-content: center; border-right: 1px solid #eee7f2; padding-right: 12px; }
.mini-appt-time b { font-weight: 600; font-size: 15px; color: #664276; }
.mini-appt-time small { font-size: 10px; color: #aa9bb1; margin-top: 3px; }
.mini-appt-main { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
.mini-appt-main b { font-size: 13px; font-weight: 500; }
.mini-appt-main > span { font-size: 11px; color: #8b7e93; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mini-appt-main small { font-size: 9px; color: #ad9fb5; }
.mini-appt-chevron { font-size: 25px; color: #b6a7c0; padding-right: 2px; }
.mini-empty { text-align: center; background: #fff; border: 1px dashed #d8cbe1; border-radius: 18px; padding: 26px 23px; }
.mini-empty > span { display: flex; justify-content: center; color: #bea7c9; margin-bottom: 11px; }
.mini-empty > span .i { height: 29px; width: 29px; }
.mini-empty > b { display: block; font-weight: 500; }
.mini-empty p { font-size: 12px; color: #93849c; max-width: 270px; margin: 7px auto 16px; }
.mini-empty .btn { font-size: 12px; }
.mini-storage-note { display: flex; align-items: center; justify-content: center; gap: 6px; color: #a194a8; font-size: 9px; margin: 22px 0 3px; }
.mini-storage-note .i { width: 12px; height: 12px; }
.mini-more-grid { display: grid; gap: 11px; }
.mini-more-card { display: flex; gap: 14px; padding: 17px; align-items: center; border: 1px solid #e6ddeb; border-radius: 18px; background: #fff; }
.mini-more-card .mini-action-icon { margin: 0; }
.mini-more-card > div { flex: 1; }
.mini-more-card b { font-size: 14px; font-weight: 500; }
.mini-more-card p { font-size: 11px; color: #9c8ea5; margin-top: 3px; }
.mini-more-card > span:last-child { font-size: 24px; color: #b9a9c3; }
.mini-info { padding: 18px; border-radius: 17px; background: #ebe6ef; margin-top: 22px; }
.mini-info b { font-size: 12px; font-weight: 500; color: #725b7e; }
.mini-info p { font-size: 11px; color: #95829f; margin-top: 7px; line-height: 1.7; }
.mini-profile { text-align: center; padding: 20px 0 28px; }
.mini-profile .avatar { margin: 0 auto 17px; }
.mini-profile h2 { font: 400 24px var(--display); }
.mini-profile p { color: var(--muted); margin-top: 9px; font-size: 13px; }
.mini-loading, .mini-launch-state { max-width: 450px; min-height: 64dvh; margin: auto; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.mini-loading h1, .mini-launch-state h1 { font: 400 29px/1.3 var(--display); margin: 19px 0 13px; }
.mini-loading p, .mini-launch-state p { font-size: 13px; line-height: 1.7; color: #95849e; }
.mini-launch-state img { border-radius: 22px; margin-bottom: 25px; }
.mini-launch-state .mini-eyebrow { margin-bottom: 0; }
.mini-launch-state .help, .mini-launch-state .btn { margin-top: 24px; }
.mini-spinner { display: block; width: 27px; height: 27px; border: 2px solid #e4d8eb; border-top-color: #734884; border-radius: 50%; animation: mini-spin 1s linear infinite; }
@keyframes mini-spin { to { transform: rotate(360deg); } }
.mini-app .mini-fixed-master { display: flex; align-items: center; gap: 8px; font-size: 13px; border-radius: 11px; background: #f3edf6; color: #6c477c; padding: 11px 13px; }
.mini-fixed-master .i { height: 16px; width: 16px; }
.mini-sale-row { margin-bottom: 12px; padding: 13px; background: #faf8fc; border: 1px solid #e8e0ed; border-radius: 14px; }
.mini-sale-title { display: flex; align-items: center; gap: 9px; }
.mini-sale-title .field { flex: 1; min-width: 0; }
.mini-sale-title .icon-btn { margin-top: 21px; }
.mini-sale-values { display: grid; grid-template-columns: .8fr 1fr 1.1fr; gap: 9px; margin-top: 10px; }
.mini-sale-values .field span { font-size: 10px; }
.mini-sale-values input { min-width: 0; width: 100%; padding-left: 10px; padding-right: 8px; }
.mini-sale-meta { display: block; font-size: 10px; color: #a08dac; margin-top: 9px; }
.mini-sale-meta.warn { color: #ac7828; }
.mini-app #impClients, .mini-app #repExcel, .mini-app #jExcel, .mini-app #cInvite, .mini-app [data-invite] { display: none !important; }
.mini-app .appt-actions [data-act="tgremind"], .mini-app .appt-actions [data-act="tginvite"] { display: none !important; }
.mini-app.mini-worker #cEdit, .mini-app.mini-worker #cNext,
.mini-app.mini-worker .timeline [data-edit], .mini-app.mini-worker .timeline [data-del],
.mini-app.mini-worker .appt-actions [data-act="edit"], .mini-app.mini-worker .appt-actions [data-act="noshow"],
.mini-app.mini-worker .appt-actions [data-act="cancel"], .mini-app.mini-worker .appt-actions [data-act="restore"],
.mini-app.mini-worker .appt-actions [data-act="delete"], .mini-app.mini-worker .appt-actions [data-act="tgremind"],
.mini-app.mini-worker .appt-actions [data-act="tginvite"] { display: none !important; }
.mini-app #offline { padding: 11px 16px; font-size: 11px; bottom: calc(74px + env(safe-area-inset-bottom)); }
.mini-app #toasts { bottom: calc(90px + env(safe-area-inset-bottom)); }
.mini-app .modal-head { padding-top: calc(17px + var(--mini-top)); }
.mini-app .modal-foot { padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) {
  .mini-header { padding-left: max(24px,calc((100vw - 1064px)/2)); padding-right: max(24px,calc((100vw - 1064px)/2)); }
  .mini-connection { padding-left: max(24px,calc((100vw - 1064px)/2)); padding-right: max(24px,calc((100vw - 1064px)/2)); }
  .mini-app main { padding: 30px 24px; }
  .mini-home { max-width: 850px; }
  .mini-hero { min-height: 260px; }
  .mini-hero-copy { padding: 32px; }
  .mini-hero h1 { font-size: 39px; }
  .mini-hero p { font-size: 13px; }
  .mini-action { padding: 20px; }
  .mini-action b { font-size: 17px; }
  .mini-action small { font-size: 12px; }
  .mini-action-icon { width: 42px; height: 42px; }
  .mini-nav { max-width: 660px; left: 50%; right: auto; width: 100%; transform: translateX(-50%); border: 1px solid #e4dce9; border-radius: 20px 20px 0 0; }
  .mini-more-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 719px) {
  .mini-app .page-head .actions { width: auto; }
  .mini-app .cal-toolbar { gap: 10px; }
  .mini-app .cal-nav { width: 100%; justify-content: flex-start; }
  .mini-app .cal-title { font-size: 16px; margin-left: auto; }
  .mini-app .cal-toolbar > .seg { width: 100%; display: flex; }
  .mini-app .cal-toolbar > .seg button { flex: 1; }
  .mini-app .cal-masters { overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .mini-app .cal-masters .chip { flex-shrink: 0; }
  .mini-app .mday { min-height: 68px; }
  .mini-app .cal-page .page-head .actions .btn { font-size: 11px; padding: 0 11px; height: 38px; }
  .mini-app .day-layout { gap: 16px; }
  .mini-app .modal, .mini-app .modal.wide, .mini-app .modal.narrow { min-height: 100dvh; }
  .mini-app .modal-head h2 { font-size: 22px; }
  .mini-app .modal-body { padding-bottom: 25px; }
  .mini-app .modal input, .mini-app .modal select, .mini-app .modal textarea { font-size: 16px; }
  .mini-app .grid3, .mini-app .grid2 { gap: 13px; }
  .mini-app .field > span { font-size: 12px; }
  .mini-app .client-head h1 { font-size: 25px; }
  .mini-app .client-head .actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .mini-app .client-head .actions .btn { font-size: 12px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .mini-spinner { animation: none; } }
