:root {
  --green: #1f5a43;
  --green-deep: #163e31;
  --green-soft: #e8f0e8;
  --sage: #afc8b6;
  --cream: #faf8f2;
  --paper: #fffdf8;
  --warm: #f8f5ed;
  --beige: #f3eee4;
  --ink: #20332b;
  --muted: #6b756e;
  --gold: #d6b77a;
  --line: #e8e4d7;
  --danger: #a95845;
  --shadow: 0 9px 28px rgba(30, 55, 43, .07);
  --ui: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #efebe2; }
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #efebe2;
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button { transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease; }
button:active, .m-action:active { transform: scale(.978); }
.m-svg { display: block; width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.m-app {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(126px + env(safe-area-inset-bottom));
  overflow: hidden;
  background: radial-gradient(circle at 88% 2%, rgba(214,183,122,.08), transparent 24%), var(--cream);
  animation: m-fade .22s ease;
}
@keyframes m-fade { from { opacity: .72; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.m-header { display: flex; min-height: 47px; align-items: center; }
.m-logo { padding-right: 12px; border-right: 1px solid #ded9ce; color: var(--green); font: 400 26px/.84 var(--display); letter-spacing: .075em; }
.m-logo small { display: block; margin-top: 8px; font: 700 6.7px/1 var(--ui); letter-spacing: .19em; }
.m-crm { flex: 1; margin: 0; padding-left: 11px; color: var(--green-deep); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.m-bell { position: relative; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: transparent; color: var(--green); font-size: 21px; }
.m-bell::after { content: "3"; position: absolute; top: 2px; right: 2px; display: grid; width: 15px; height: 15px; place-items: center; border: 2px solid var(--cream); border-radius: 50%; background: var(--green); color: #fff; font: 700 8px/1 var(--ui); }

.m-greeting { margin: 19px 3px 14px; }
.m-greeting h1 { margin: 0; color: #172b23; font: 500 23px/1.2 var(--display); letter-spacing: -.025em; }
.m-greeting p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }

.m-scan { display: flex; width: 100%; min-height: 72px; align-items: center; gap: 14px; padding: 13px 17px; border-radius: 29px; background: linear-gradient(125deg, #174f3d 0%, #1f654b 72%, #1f5a43 100%); box-shadow: 0 12px 25px rgba(22, 70, 52, .2), inset 0 1px rgba(255,255,255,.12); color: #fffdf8; text-align: left; }
.m-scan .scanbox { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.12); font-size: 24px; }
.m-scan b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.m-scan small { display: block; margin-top: 3px; color: rgba(255,253,248,.76); font-size: 11.5px; line-height: 1.35; }
.m-scan i { margin-left: auto; font-style: normal; font-size: 25px; opacity: .88; }
.m-upload-document { display: flex; width: 100%; min-height: 60px; align-items: center; gap: 12px; margin-top: 9px; padding: 9px 16px; border: 1px solid rgba(19,77,57,.14); border-radius: 25px; background: linear-gradient(145deg,rgba(255,254,249,.98),rgba(241,245,238,.96)); box-shadow: 0 8px 22px rgba(25,55,43,.065); color: var(--green-deep); text-align: left; }
.m-upload-document .scanbox { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 14px; background: #e6efe8; color: var(--green); }
.m-upload-document b,.m-upload-document small { display: block; }
.m-upload-document b { font-size: 13.5px; font-weight: 700; }
.m-upload-document small { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.m-upload-document i { margin-left: auto; color: #718078; font-size: 23px; font-style: normal; }
.m-upload-document:active { transform: translateY(1px); background: #edf3ec; }
.m-auto-open { display: block; margin: 8px 0 14px; color: var(--muted); font-size: 11px; }

.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.m-kpi { position: relative; display: flex; min-height: 114px; flex-direction: column; align-items: flex-start; padding: 12px 14px 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, #fffefa, #fbf8f1); box-shadow: var(--shadow); color: var(--ink); text-align: left; }
.m-kpi .m-icon { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #e6ede5; border-radius: 13px; background: #f1f5ef; color: var(--green); font-size: 17px; }
.m-kpi.gold .m-icon { border-color: #eee3cc; background: #fcf6e9; color: #b87a25; }
.m-kpi label { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 650; line-height: 1.15; }
.m-kpi b { display: block; margin-top: 3px; color: var(--green); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.m-kpi small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.m-kpi-arrow { position: absolute; right: 15px; top: 50%; color: #738079; font-style: normal; font-size: 21px; transform: translateY(-18%); }

.m-brand { position: relative; min-height: 122px; margin-top: 12px; padding: 18px; overflow: hidden; border: 1px solid #e7dfd2; border-radius: 26px; background: radial-gradient(circle at 86% 28%, rgba(172,194,164,.26), transparent 30%), linear-gradient(135deg, #f2ecdf, #faf7f0); box-shadow: 0 7px 22px rgba(46, 52, 44, .05); }
.m-brand::before { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.58)); opacity: .75; }
.m-brand::after { content: ""; position: absolute; width: 155px; height: 70px; right: 20px; bottom: -52px; border: 1px solid rgba(180,141,74,.34); border-radius: 50%; transform: rotate(-8deg); }
.m-brand b { position: relative; z-index: 2; display: block; max-width: 75%; color: var(--green-deep); font: 500 17px/1.16 var(--display); }
.m-brand small { position: relative; z-index: 2; display: block; max-width: 72%; margin-top: 8px; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.m-botanical { position: absolute; z-index: 1; right: -12px; bottom: -23px; width: 154px; height: 152px; background: url('/assets/mesonia-botanical-leaves.png?v=20260912-24') right bottom / contain no-repeat; filter: drop-shadow(-9px -5px 13px rgba(42,70,46,.11)); opacity: .92; pointer-events: none; }
.m-botanical::before, .m-botanical i { display: none; }

.m-nav { position: fixed; z-index: 30; bottom: calc(11px + env(safe-area-inset-bottom)); left: 50%; display: grid; width: min(calc(100% - 28px), 402px); height: 63px; grid-template-columns: repeat(5, 1fr); align-items: stretch; padding: 5px 7px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.12); border-radius: 31px; background: linear-gradient(120deg, #154b38, #196047 58%, #154c3a); box-shadow: 0 14px 30px rgba(19, 54, 41, .26), inset 0 1px rgba(255,255,255,.1); }
.m-nav button { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 22px; background: transparent; color: rgba(250,246,235,.72); font-size: 8.5px; line-height: 1; }
.m-nav button .m-svg { font-size: 18px; }
.m-nav button.active { background: rgba(255,255,255,.07); color: #d7c27e; font-weight: 700; }
.m-nav .add { color: #ded188; font-weight: 700; }
.m-nav .add::before { content: ""; position: absolute; width: 37px; height: 37px; top: 4px; border-radius: 15px; background: rgba(214,183,122,.13); }
.m-nav .add .m-svg { position: relative; font-size: 20px; }
.m-nav .add small { position: relative; margin-top: 1px; font-size: 8.5px; }

.m-page-head { display: grid; min-height: 46px; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 17px; }
.m-page-head h1 { margin: 0; font-size: 17px; font-weight: 700; text-align: center; }
.m-back, .m-filter, .m-head-action { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: transparent; color: var(--green); font-size: 21px; }
.m-head-action { font-size: 20px; }
.m-head-space { width: 44px; height: 44px; }

.m-search { display: flex; width: 100%; height: 48px; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: 0 6px 18px rgba(40,60,49,.04); color: #829087; }
.m-search .m-svg { font-size: 18px; }
.m-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.m-search input::placeholder { color: #929a95; }
.m-list { margin-top: 11px; }
.m-row { display: flex; width: 100%; min-height: 67px; align-items: center; gap: 11px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); box-shadow: 0 7px 20px rgba(38,56,45,.055); color: var(--ink); text-align: left; }
.m-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid #e1e8dd; border-radius: 50%; background: #edf2e9; color: var(--green); font: 500 16px/1 var(--display); }
.m-row div { min-width: 0; flex: 1; }
.m-row b { display: block; overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.m-row small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.m-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #13825e; box-shadow: 0 0 0 4px #eaf3ed; }

.m-profile { text-align: center; }
.m-profile .m-profile-avatar { display: grid; width: 68px; height: 68px; margin: 1px auto 11px; place-items: center; border: 1px solid #deddd2; border-radius: 50%; background: #fbfaf5; color: var(--green-deep); font: 500 22px/1 var(--display); }
.m-client-name { margin: 0; color: #172c23; font: 500 23px/1.15 var(--display); overflow-wrap: anywhere; }
.m-client-meta { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; }
.m-chip { display: inline-flex; align-items: center; margin-top: 9px; padding: 5px 9px; border-radius: 13px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 700; }
.m-profile-details { display: grid; gap: 6px; margin: 18px 0; }
.m-profile-line { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; min-height: 42px; text-align: left; }
.m-profile-line > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 13px; background: #eef3ec; color: var(--green); font-size: 16px; }
.m-profile-line b { display: block; font-size: 12px; font-weight: 700; }
.m-profile-line small { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.m-actions { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; margin: 13px 0 16px; }
.m-action { display: flex; min-width: 0; height: 59px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 6px 17px rgba(38,56,45,.05); color: var(--green); text-decoration: none; }
.m-action > span { display: grid; place-items: center; font-size: 17px; }
.m-action small { color: var(--muted); font-size: 7.5px; white-space: nowrap; }
.m-action.disabled { pointer-events: none; opacity: .32; }
.m-client-sections, .m-menu-list { display: grid; gap: 8px; margin: 0; }
.m-client-sections button, .m-menu-list button { display: flex; width: 100%; min-height: 60px; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 21px; background: var(--paper); box-shadow: 0 6px 18px rgba(39,57,46,.045); color: var(--ink); text-align: left; }
.m-client-sections button > span, .m-menu-list button > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 14px; background: #f0f4ed; color: var(--green); font-size: 17px; }
.m-client-sections button:nth-child(3) > span, .m-client-sections button:nth-child(4) > span { background: #fbf5e8; color: #b77b2e; }
.m-client-sections button div { min-width: 0; flex: 1; }
.m-client-sections b, .m-menu-list b { display: block; font-size: 12.5px; font-weight: 700; }
.m-client-sections small { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.m-client-sections i, .m-menu-list i { margin-left: auto; color: #78837c; font-style: normal; font-size: 21px; }

.m-section { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: 0 7px 20px rgba(38,56,45,.045); }
.m-section h2 { margin: 0 0 10px; color: var(--green-deep); font: 500 18px/1.2 var(--display); }
.m-section p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.m-care-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.m-care-row div { min-width: 0; flex: 1; }
.m-care-row b { display: block; font-size: 12px; }
.m-care-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.m-empty-state { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; padding: 28px 20px; text-align: center; }
.m-empty-state > span { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 24px; background: #eef3eb; color: var(--green); font-size: 28px; }
.m-empty-state h2 { margin: 16px 0 5px; color: var(--green-deep); font: 500 21px/1.2 var(--display); }
.m-empty-state p { max-width: 300px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.m-empty-state .m-primary { width: 100%; margin-top: 20px; }

.m-stat { padding: 19px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.m-stat b { display: block; color: var(--green); font-size: 25px; }
.m-stat small { color: var(--muted); font-size: 10px; }
.m-sale { display: flex; align-items: center; gap: 9px; padding: 15px 3px; border-bottom: 1px solid var(--line); }
.m-sale div { flex: 1; }
.m-sale b { font-size: 13px; }
.m-sale small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.m-tabs { display: flex; margin: 3px 0 13px; padding: 3px; border-radius: 13px; background: #f0ede5; }
.m-tabs button { min-height: 36px; flex: 1; border-radius: 11px; background: transparent; font-size: 10px; }
.m-tabs .on { background: var(--paper); color: var(--green); box-shadow: 0 3px 8px rgba(50,55,45,.08); }

.m-edit-card { padding: 2px 0 14px; }
.m-edit-intro { margin: 0 0 15px; padding: 13px 15px; border: 1px solid #e5e8dc; border-radius: 18px; background: #f1f5ec; color: var(--muted); font-size: 11px; line-height: 1.45; }
.m-edit-card label { display: block; margin-top: 13px; color: #55615a; font-size: 10px; font-weight: 700; }
.m-edit-card input, .m-edit-card select, .m-edit-card textarea { display: block; width: 100%; min-height: 50px; margin-top: 6px; padding: 0 14px; border: 1px solid #e1dbd0; outline: 0; border-radius: 17px; background: var(--paper); color: var(--ink); font-size: 13px; box-shadow: 0 5px 15px rgba(40,57,47,.035); }
.m-edit-card textarea { min-height: 92px; padding-top: 13px; resize: vertical; }
.m-edit-card input:focus, .m-edit-card select:focus, .m-edit-card textarea:focus { border-color: #9fbaa8; box-shadow: 0 0 0 3px rgba(91,134,106,.1); }
.m-edit-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.m-form-error { min-height: 18px; margin: 10px 2px 0; color: var(--danger); font-size: 11px; line-height: 1.4; }
.m-save-client { width: 100%; margin-top: 6px; }
.m-delete-link { width: 100%; min-height: 50px; margin-top: 9px; border-radius: 18px; background: #fbf1ee; color: var(--danger); font-size: 12px; font-weight: 700; }
.m-modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: end center; padding: 18px; background: rgba(13,27,21,.4); backdrop-filter: blur(8px); }
.m-confirm { width: min(100%, 394px); padding: 23px 20px calc(20px + env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.55); border-radius: 29px; background: var(--paper); box-shadow: 0 24px 70px rgba(12,30,22,.24); text-align: center; animation: m-confirm-in .2s ease; }
@keyframes m-confirm-in { from { opacity: .4; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.m-confirm-icon { display: grid; width: 48px; height: 48px; margin: 0 auto; place-items: center; border-radius: 17px; background: #f7e6e0; color: var(--danger); font: 700 22px/1 var(--ui); }
.m-confirm h2 { margin: 14px 0 6px; color: #2e302d; font: 500 21px/1.2 var(--display); }
.m-confirm > p:not(.m-form-error) { margin: 0 auto; max-width: 315px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.m-confirm > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 17px; }
.m-confirm .m-secondary { margin: 0; }
.m-danger { min-height: 54px; border-radius: 20px; background: #a94f3d; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px rgba(169,79,61,.2); }

.m-camera-open { overflow: hidden; background: #0b0e0c; }
.m-camera, .m-scan-flow { width: 100%; max-width: 430px; min-height: 100dvh; margin: 0 auto; }
.m-camera { box-sizing: border-box; display: grid; height: 100dvh; min-height: 100svh; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; overflow: hidden; padding: calc(8px + env(safe-area-inset-top)) 8px calc(18px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 35%, #262b28, #080a09 68%); color: #fff; }
.m-camera-head, .m-flow-head { display: flex; min-height: 44px; align-items: center; justify-content: space-between; }
.m-camera-head b, .m-flow-head b { font-size: 13px; font-weight: 700; }
.m-camera-head button, .m-flow-head button { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: inherit; font-size: 21px; }
.m-viewfinder { position: relative; display: grid; width: 100%; height: auto; max-height: 100%; min-height: 0; aspect-ratio: 3 / 4; align-self: center; justify-self: center; margin: 0; overflow: hidden; place-items: center; border-radius: 24px; background: #141816; }
.m-viewfinder video { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .92; }
.m-viewfinder-frame { position: absolute; width: min(96%, 402px); height: auto; max-height: 96%; aspect-ratio: 210 / 297; border: 2px solid #fffdf8; border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.12); }
.m-camera-hint { position: absolute; bottom: 13px; padding: 8px 13px; border-radius: 18px; background: rgba(8,17,12,.72); color: #f8f4ea; font-size: 10px; }
.m-camera-actions { display: flex; min-height: 76px; align-items: center; justify-content: space-between; padding: 0 20px 2px; }
.m-camera-actions button { display: flex; min-width: 54px; flex-direction: column; align-items: center; gap: 4px; background: transparent; color: #f8f5ed; font-size: 8.5px; }
.m-camera-actions button span { font-size: 20px; }
.m-camera-actions .m-shutter { display: grid; width: 62px; height: 62px; min-width: 62px; padding: 5px; border: 2px solid #fff; border-radius: 50%; transform: translateY(-12px); }
.m-camera-actions .m-shutter i { width: 100%; height: 100%; border-radius: 50%; background: #fff; }

.m-scan-flow { padding: calc(18px + env(safe-area-inset-top)) 20px calc(27px + env(safe-area-inset-bottom)); background: var(--cream); color: var(--ink); }
.m-flow-head { margin-bottom: 17px; }
.m-flow-head button { background: #f0ede5; color: var(--green); }
.m-document-preview { display: flex; height: 57dvh; min-height: 380px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e4ded3; border-radius: 30px; background: linear-gradient(145deg,#e9e3d7,#fbf9f5); box-shadow: inset 0 1px #fff; }
.m-document-preview > span { display: grid; width: 76px; height: 76px; place-items: center; border-radius: 25px; background: var(--green); color: #fff; font-size: 32px; box-shadow: 0 13px 25px rgba(31,90,67,.28); }
.m-document-preview > small { margin-top: 16px; color: var(--muted); font-size: 11px; }
.m-preview-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; margin-top: 15px; }
.m-primary, .m-secondary { min-height: 54px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.m-primary { background: var(--green); box-shadow: 0 10px 21px rgba(31,90,67,.18); color: #fff; }
.m-secondary { margin-top: 9px; background: #f0ece3; color: var(--green); }
.m-preview-actions .m-secondary { margin: 0; }
.m-processing, .m-result { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 16vh; text-align: center; }
.m-loader, .m-success-check, .m-review-mark { display: grid; width: 82px; height: 82px; place-items: center; border-radius: 29px; }
.m-loader { background: #e7efe5; }
.m-loader i { width: 32px; height: 32px; border: 3px solid #b7cbb9; border-top-color: var(--green); border-radius: 50%; animation: m-spin .8s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-success-check { background: #dfeccb; color: var(--green); font-size: 39px; }
.m-review-mark { background: #f5e7d0; color: #a96928; font-size: 28px; }
.m-processing h1, .m-result h1, .m-review h1 { margin: 22px 0 7px; color: var(--green-deep); font: 500 25px/1.16 var(--display); }
.m-processing p, .m-result p, .m-review > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.m-overline { margin-top: 18px !important; color: var(--green) !important; font-size: 9px !important; font-weight: 800; letter-spacing: .16em; }
.m-result .m-primary, .m-result .m-secondary, .m-review .m-primary { width: 100%; margin-top: 24px; }
.m-result .m-secondary { margin-top: 9px; }
.m-review { padding-top: 15px; }
.m-review h2 { margin: 22px 0 4px; color: var(--green-deep); font: 500 18px/1.2 var(--display); }
.m-review label { display: block; margin-top: 13px; color: #55615a; font-size: 10px; font-weight: 700; }
.m-review input, .m-review select { width: 100%; height: 49px; margin-top: 6px; padding: 0 13px; border: 1px solid #e1dbd0; border-radius: 16px; background: var(--paper); color: var(--ink); font-size: 13px; }
.m-check { display: flex !important; align-items: center; gap: 9px; }
.m-check input { width: 22px !important; height: 22px !important; margin: 0 !important; }
.m-doc-count { margin: 0 0 11px; color: var(--muted); font-size: 12px; }
.m-document-pack { display: grid; height: auto; min-height: 280px; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 10px; padding: 13px; }
.m-doc-thumb { position: relative; display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e5ddd1; border-radius: 21px; background: var(--paper); color: var(--green); }
.m-doc-thumb span { font-size: 27px; }
.m-doc-thumb small { margin-top: 6px; font-size: 10px; }
.m-doc-thumb button { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; border-radius: 50%; background: #f3e9de; color: #985a36; font-size: 18px; }
.m-build { display: none; }

/* Dashboard-only visual treatment. Functional markup and event handlers remain unchanged. */
.m-app:has(.m-header) {
  padding-top: calc(21px + env(safe-area-inset-top));
  background:
    radial-gradient(ellipse at 18% 16%, rgba(100,130,92,.09), transparent 27%),
    radial-gradient(ellipse at 95% 58%, rgba(102,130,88,.08), transparent 25%),
    linear-gradient(152deg, #fbf9f3 0%, #f8f5ed 52%, #fbfaf5 100%);
}
.m-app:has(.m-header)::before,
.m-app:has(.m-header)::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: url('/assets/mesonia-botanical-leaves.png?v=20260912-24') center / contain no-repeat;
  pointer-events: none;
}
.m-app:has(.m-header)::before {
  width: 124px;
  height: 150px;
  top: -62px;
  left: -79px;
  transform: rotate(159deg) scaleX(-1);
  filter: saturate(.82) drop-shadow(15px 18px 17px rgba(50,72,46,.12));
  opacity: .64;
}
.m-app:has(.m-header)::after {
  width: 138px;
  height: 255px;
  top: 350px;
  right: -91px;
  transform: rotate(-13deg);
  filter: blur(.4px) saturate(.7);
  opacity: .13;
}
.m-app:has(.m-header) > * { position: relative; z-index: 1; }
.m-app:has(.m-header) .m-header { position: relative; min-height: 48px; justify-content: center; }
.m-app:has(.m-header) .m-logo { padding-right: 14px; font-size: 27px; letter-spacing: .085em; }
.m-app:has(.m-header) .m-logo small { margin-top: 9px; font-size: 6.8px; }
.m-app:has(.m-header) .m-crm { flex: 0 0 auto; padding-left: 13px; font: 600 15px/1 var(--display); }
.m-app:has(.m-header) .m-bell { position: absolute; top: 50%; right: -3px; font-size: 24px; transform: translateY(-50%); }
.m-app:has(.m-header) .m-greeting { margin: 17px 3px 12px; text-align: center; }
.m-app:has(.m-header) .m-greeting h1 { font-size: 25px; font-weight: 500; line-height: 1.14; }
.m-app:has(.m-header) .m-greeting p { margin-top: 5px; font-size: 13.5px; }
.m-app:has(.m-header) .m-scan {
  position: relative;
  min-height: 72px;
  gap: 15px;
  padding: 12px 18px;
  overflow: hidden;
  border: 1px solid rgba(228,210,158,.34);
  border-radius: 32px;
  background: linear-gradient(119deg, #073c30 0%, #0e5741 57%, #073f31 100%);
  box-shadow: 0 16px 32px rgba(7,52,40,.25), inset 0 1px rgba(255,255,255,.2), inset 0 -1px rgba(0,21,16,.2);
}
.m-app:has(.m-header) .m-scan::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 178px;
  height: 130px;
  right: -20px;
  top: -25px;
  background: url('/assets/mesonia-botanical-leaves.png?v=20260912-24') right center / contain no-repeat;
  filter: grayscale(.25) saturate(.65) brightness(1.35);
  opacity: .095;
  pointer-events: none;
}
.m-app:has(.m-header) .m-scan::after {
  content: "";
  position: absolute;
  width: 126px;
  height: 180px;
  right: 19px;
  top: -53px;
  transform: rotate(29deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.075), transparent);
  pointer-events: none;
}
.m-app:has(.m-header) .m-scan > * { position: relative; z-index: 1; }
.m-app:has(.m-header) .m-scan .scanbox { width: 47px; height: 47px; flex-basis: 47px; border-radius: 17px; font-size: 24px; }
.m-app:has(.m-header) .m-scan b { font-size: 16px; }
.m-app:has(.m-header) .m-scan small { margin-top: 3px; font-size: 11.7px; }
.m-app:has(.m-header) .m-grid { gap: 10px; margin-top: 11px; }
.m-app:has(.m-header) .m-kpi {
  min-height: 108px;
  padding: 10px 14px 9px;
  border-color: rgba(218,213,201,.92);
  border-radius: 27px;
  background: linear-gradient(148deg, rgba(255,255,252,.98), rgba(251,248,241,.96));
  box-shadow: 0 10px 26px rgba(40,55,45,.065), inset 0 1px rgba(255,255,255,.9);
}
.m-app:has(.m-header) .m-kpi .m-icon { width: 34px; height: 34px; border-radius: 13px; font-size: 16.5px; }
.m-app:has(.m-header) .m-kpi label { margin-top: 6px; font-size: 11.4px; }
.m-app:has(.m-header) .m-kpi b { margin-top: 2px; font-size: 22px; }
.m-app:has(.m-header) .m-kpi small { margin-top: 3px; font-size: 9.8px; }
.m-app:has(.m-header) .m-brand {
  min-height: 116px;
  margin-top: 10px;
  padding: 17px 18px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 84% 24%, rgba(162,190,151,.22), transparent 34%),
    linear-gradient(135deg, rgba(243,236,221,.98), rgba(253,250,244,.98));
}
.m-app:has(.m-header) .m-brand b { max-width: 76%; font-size: 17px; }
.m-app:has(.m-header) .m-brand small { max-width: 66%; margin-top: 7px; font-size: 9.4px; }
.m-app:has(.m-header) .m-botanical { right: -5px; bottom: -20px; width: 158px; height: 154px; opacity: .94; }
body:has(.m-header) .m-nav {
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(calc(100% - 30px), 400px);
  height: 64px;
  padding: 5px 8px;
  border-color: rgba(230,211,154,.2);
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(116deg, #063b2e, #0b513d 54%, #063d30);
  box-shadow: 0 16px 36px rgba(5,43,33,.32), inset 0 1px rgba(255,255,255,.14), inset 0 -1px rgba(0,20,15,.26);
}
body:has(.m-header) .m-nav button { gap: 4px; border-radius: 25px; font-size: 9px; }
body:has(.m-header) .m-nav button .m-svg { font-size: 19px; }
body:has(.m-header) .m-nav button.active { background: linear-gradient(145deg, rgba(238,215,151,.13), rgba(255,255,255,.045)); color: #e1c980; box-shadow: inset 0 0 0 1px rgba(232,211,151,.08); }
body:has(.m-header) .m-nav .add { gap: 2px; color: #ead58d; }
body:has(.m-header) .m-nav .add::before { top: 5px; width: 34px; height: 34px; border-radius: 13px; background: rgba(229,205,133,.13); box-shadow: inset 0 0 0 1px rgba(236,218,162,.08); }
body:has(.m-header) .m-nav .add .m-svg { font-size: 18px; }
body:has(.m-header) .m-nav .add small { margin-top: 0; }

.m-care-home { display: flex; width: 100%; min-height: 62px; margin-top: 10px; align-items: center; gap: 12px; padding: 11px 15px; border: 1px solid rgba(211,205,190,.85); border-radius: 23px; background: rgba(255,253,248,.92); box-shadow: 0 8px 22px rgba(34,55,43,.055); color: var(--green-deep); text-align: left; }
.m-care-home > span { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 15px; background: #e9f0e8; font-size: 20px; }
.m-care-home div { min-width: 0; flex: 1; }
.m-care-home b, .m-care-home small { display: block; }
.m-care-home b { font-size: 13px; }
.m-care-home small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.m-care-home i { color: #7b857f; font-size: 23px; font-style: normal; }
.m-care-filters { display: flex; margin: 10px -20px 14px; padding: 0 20px 4px; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.m-care-filters::-webkit-scrollbar { display: none; }
.m-care-filters button { min-height: 36px; flex: 0 0 auto; padding: 0 13px; border: 1px solid #ded9cf; border-radius: 18px; background: var(--paper); color: var(--green-deep); font-size: 10px; }
.m-care-list { display: grid; gap: 10px; padding-bottom: 14px; }
.m-care-card { border: 1px solid #e0dbd1; border-radius: 22px; background: var(--paper); box-shadow: 0 8px 20px rgba(37,52,43,.055); overflow: hidden; }
.m-care-card.overdue { border-color: #d9a48b; background: #fffaf6; }
.m-care-open { display: block; width: 100%; padding: 15px; color: var(--ink); text-align: left; }
.m-care-open > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-care-open b { color: var(--green-deep); font-size: 14px; }
.m-care-open small, .m-care-open p, .m-care-open em, .m-care-open strong { display: block; margin-top: 5px; font-size: 10px; line-height: 1.35; }
.m-care-open small { color: var(--muted); }
.m-care-open p { color: #45544b; }
.m-care-open em { color: #a25332; font-style: normal; font-weight: 700; }
.m-care-open strong { color: #aa7026; }
.m-care-status { display: inline-flex; width: max-content; align-items: center; padding: 5px 9px; border-radius: 12px; background: #edf2ea; color: var(--green); font-size: 8.5px; font-weight: 800; white-space: nowrap; }
.m-care-status.processed { background: #eeeeea; color: #68716c; }
.m-care-status.became_client { background: #e7efd4; color: #456222; }
.m-care-profile { display: flex; flex-direction: column; align-items: center; padding: 18px 15px; border: 1px solid #e2ddd3; border-radius: 25px; background: var(--paper); text-align: center; }
.m-care-profile h1 { margin: 10px 0 3px; color: var(--green-deep); font: 500 23px/1.15 var(--display); }
.m-care-profile p, .m-care-profile small { margin: 3px 0; color: var(--muted); font-size: 11px; }
.m-care-profile .m-care-status { margin-top: 10px; }
.m-care-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 12px 0; }
.m-care-links .m-action { min-width: 0; }
.m-care-editor { padding: 16px; border: 1px solid #e2ddd3; border-radius: 24px; background: var(--paper); }
.m-care-editor label { display: block; margin-bottom: 12px; color: #526057; font-size: 10px; font-weight: 700; }
.m-care-editor textarea, .m-care-editor input { width: 100%; margin-top: 6px; border: 1px solid #ddd7cb; border-radius: 16px; background: #fdfbf7; color: var(--ink); font: 400 13px/1.45 var(--sans); }
.m-care-editor textarea { padding: 12px; resize: vertical; }
.m-care-editor input { height: 48px; padding: 0 12px; }
.m-care-quick { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin-bottom: 13px; }
.m-care-quick button { min-height: 38px; border-radius: 15px; background: #edf1e9; color: var(--green); font-size: 9.5px; }
.m-care-editor .m-primary, .m-care-editor .m-secondary { width: 100%; }
.m-care-editor .m-convert { border: 1px solid #c9d6c7; background: transparent; }
.m-care-history { margin-top: 13px; padding: 16px; border-radius: 24px; background: #f2eee5; }
.m-care-history h2 { margin: 0 0 10px; color: var(--green-deep); font: 500 18px/1.2 var(--display); }
.m-care-history article { padding: 10px 0; border-top: 1px solid #ded7ca; }
.m-care-history article:first-of-type { border-top: 0; }
.m-care-history article b { font-size: 10px; color: var(--green); }
.m-care-history article p, .m-muted { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.m-staff-page .m-section { margin-top: 12px; }
.m-staff-page form label { display: block; margin: 12px 0; color: var(--green-deep); font-size: 11px; font-weight: 700; }
.m-staff-page input { box-sizing: border-box; display: block; width: 100%; min-height: 46px; margin-top: 5px; padding: 0 12px; border: 1px solid #ddd7cb; border-radius: 14px; background: #fdfbf7; color: var(--ink); font: 400 14px var(--sans); }
.m-staff-page form small { display: block; margin: -3px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.m-staff-page form .m-primary { width: 100%; }
.m-staff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid #e3ddd3; }
.m-staff-row:first-child { border-top: 0; }
.m-staff-row div { min-width: 0; }
.m-staff-row b, .m-staff-row small { display: block; }
.m-staff-row b { overflow: hidden; color: var(--green-deep); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.m-staff-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.m-staff-row .m-secondary { flex: 0 0 auto; min-height: 36px; padding: 0 10px; font-size: 10px; }
.m-event-row { cursor: pointer; }
.m-event-list { display: grid; gap: 12px; }
.m-event-list .m-client-row { display: flex; min-height: 88px; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(21,73,54,.12); border-radius: 24px; background: rgba(255,253,248,.94); box-shadow: 0 10px 28px rgba(25,55,43,.055); }
.m-event-list .m-client-row > div { min-width: 0; flex: 1; }
.m-event-list .m-client-row b { display: block; color: var(--green-deep); font-size: 14px; font-weight: 700; line-height: 1.25; }
.m-event-list .m-client-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.m-event-list .m-client-row > i { color: #7c8b82; font-size: 22px; font-style: normal; }
.m-event-list .m-avatar { width: 48px; height: 48px; flex-basis: 48px; border: 0; background: linear-gradient(145deg,#edf3ec,#e3ece5); box-shadow: inset 0 0 0 1px rgba(20,77,56,.06); }
.m-birthday-check { flex: 0 0 auto; min-width: 62px; min-height: 54px; border: 0; border-radius: 18px; background: #f3eee3; color: #8a7757; font-size: 23px; display: grid; place-items: center; align-content: center; gap: 1px; }
.m-birthday-check small { font-size: 10px; line-height: 1.1; color: inherit; }
.m-birthday-check.done { background: #e5efe8; color: var(--green); }

@media (min-width: 431px) { .m-app, .m-camera, .m-scan-flow { box-shadow: 0 0 40px rgba(30,45,37,.08); } }
@media (max-width: 370px) { .m-app { padding-right: 14px; padding-left: 14px; } .m-grid { gap: 8px; } .m-kpi { min-height: 116px; padding: 12px; } .m-kpi label { font-size: 10.5px; } .m-actions { gap: 5px; } .m-action small { font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }