:root {
  --olive: #2B2E21;
  --olive-2: #3c402f;
  --olive-3: #565b45;
  --sand: #BFAE8E;
  --sand-2: #d6cab2;
  --sand-3: #ebe4d6;
  --sand-4: #f6f3ec;
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #2B2E21;
  --muted: #858270;
  --line: #ece7dc;
  --green: #1f8f4a;
  --danger: #b0473a;
  --radius: 20px;
  --radius-s: 14px;
  --shadow: 0 1px 2px rgba(43, 46, 33, .04), 0 8px 24px rgba(43, 46, 33, .06);
  --shadow-l: 0 20px 60px rgba(43, 46, 33, .18);
  --nav-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;

  /* status hues — validated categorical set (CVD-safe), text stays in ink tokens */
  --t-done: #1baf7a;    --t-done-bg: #e4f6ef;
  --t-photos: #eda100;  --t-photos-bg: #fcf2db;
  --t-reply: #2a78d6;   --t-reply-bg: #e4eefb;
  --t-booking: #eb6834; --t-booking-bg: #fdeae1;
  --t-booked: #6250d6;  --t-booked-bg: #ece9fa;
  --t-noreply: #e87ba4; --t-noreply-bg: #fdebf2;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; overscroll-behavior-y: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
.ic { width: 20px; height: 20px; flex: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.grow { flex: 1; }
.min0 { min-width: 0; }
.row { display: flex; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.center { justify-content: center; }
.gap { gap: 12px; } .gap-s { gap: 8px; }
.mt { margin-top: 14px; }
.center { text-align: center; }
.ellipsis { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Shell & nav ---------- */
.shell { min-height: 100dvh; }
.view { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 24px); }
.page { max-width: 720px; margin: 0 auto; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 14px; animation: rise .28s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.nav {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b)); padding: 6px 8px var(--safe-b);
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-top: 1px solid var(--line);
}
.nav-brand { display: none; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); padding: 6px 0; transition: color .2s; }
.nav-item .ic { width: 22px; height: 22px; }
.nav-item.active { color: var(--olive); font-weight: 600; }
.nav-item.active .ic { stroke-width: 2.2; }
.nav-fab {
  width: 56px; height: 56px; border-radius: 50%; margin-top: -26px; flex: none;
  display: grid; place-items: center; color: var(--sand);
  background: radial-gradient(circle at 30% 25%, var(--olive-3), var(--olive) 70%);
  box-shadow: 0 10px 24px rgba(43, 46, 33, .35), 0 0 0 5px #fff;
  transition: transform .15s;
}
.nav-fab:active { transform: scale(.94); }
.nav-fab .ic { width: 24px; height: 24px; stroke-width: 2.2; }

@media (min-width: 960px) {
  .nav {
    inset: 0 0 0 auto; width: 240px; height: 100dvh; flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 4px; padding: 26px 16px; border-top: 0; border-inline-start: 1px solid var(--line);
  }
  .nav-brand { display: block; width: 130px; margin: 0 auto 28px; }
  .nav-item { flex: none; flex-direction: row; gap: 12px; font-size: 15px; padding: 12px 14px; border-radius: 14px; }
  .nav-item.active { background: var(--sand-4); }
  .nav-fab { order: -1; width: auto; height: 46px; border-radius: 14px; margin: 0 0 14px; box-shadow: none; gap: 8px; display: flex; justify-content: center; }
  .nav-fab::after { content: 'بحث سريع'; font-size: 14px; font-weight: 600; }
  .view { padding-bottom: 40px; margin-inline-start: 240px; }
  .page { padding-top: 28px; max-width: 980px; }
}

/* ---------- Top bars & headings ---------- */
.topbar { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.topbar h1 { flex: 1; font-size: 20px; font-weight: 700; }
.icon-btn { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--sand-4); color: var(--olive); flex: none; }
.icon-btn.danger { color: var(--danger); background: #fbefed; }
.hello { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.hello h1 { font-size: 24px; font-weight: 700; letter-spacing: -.2px; }
.section-label { font-size: 13px; color: var(--muted); font-weight: 600; margin: 8px 0 6px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-head .card-title { margin-bottom: 12px; }
.link { color: var(--sand); font-weight: 600; font-size: 13px; filter: brightness(.8); }

/* ---------- Buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 14px; font-weight: 600; transition: transform .12s, opacity .2s, background .2s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn.primary { background: var(--olive); color: #fff; }
.btn.primary .ic { color: var(--sand); }
.btn.soft { background: var(--sand-4); color: var(--olive); border: 1px solid var(--line); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger-ghost { background: #fbefed; color: var(--danger); }
.btn.block { display: flex; width: 100%; }
.btn.lg { height: 52px; font-size: 16px; border-radius: 16px; }
.btn.sm { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 12px; }
.btn.sm .ic { width: 16px; height: 16px; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form .card { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--olive-3); }
.field em { color: var(--danger); font-style: normal; }
.field input:not([type=radio]):not([type=checkbox]):not([type=range]), .input, textarea {
  width: 100%; height: 50px; padding: 0 14px; border-radius: var(--radius-s);
  border: 1.5px solid var(--line); background: var(--sand-4); outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
}
textarea { height: auto; padding: 12px 14px; resize: none; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 18px 22px, 23px 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-left: 36px; }
.field input:focus, .input:focus, textarea:focus { border-color: var(--sand); background: #fff; box-shadow: 0 0 0 4px rgba(191, 174, 142, .2); }
.field.invalid input, .field.invalid .prefix-input { border-color: var(--danger) !important; background: #fdf6f5 !important; }
.field-error { color: var(--danger); font-size: 12.5px; min-height: 0; }
.field-error:empty { display: none; }
.field-help { color: var(--muted); font-size: 12px; }
.form-error { color: var(--danger); font-size: 14px; text-align: center; }
.form-error:empty { display: none; }
.form-error a { text-decoration: underline; font-weight: 600; }
.group-hint { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); background: var(--sand-4); padding: 10px 12px; border-radius: 12px; }
.group-hint .ic { width: 16px; height: 16px; color: var(--sand); }
.prefix-input { display: flex; align-items: center; height: 50px; border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--sand-4); overflow: hidden; }
.prefix-input b { padding: 0 6px 0 14px; color: var(--sand); font-size: 18px; filter: brightness(.85); }
.prefix-input input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-inline-start: 2px !important; height: 100% !important; }
.prefix-input:focus-within { border-color: var(--sand); background: #fff; box-shadow: 0 0 0 4px rgba(191, 174, 142, .2); }
.readonly { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 14px; border-radius: var(--radius-s); background: var(--sand-4); color: var(--olive-3); font-weight: 600; }
.readonly small { color: var(--muted); font-weight: 400; }
.readonly .ic { color: var(--sand); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-weight: 500; transition: all .15s; cursor: pointer; }
.choice-list .choice span { justify-content: flex-start; }
.choice input:checked + span { border-color: var(--olive); background: var(--olive); color: #fff; }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(191, 174, 142, .5); }
.field.invalid .choice span { border-color: #e7c6c1; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; background: var(--sand-4); padding: 4px; border-radius: 14px; gap: 4px; }
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 11px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .2s; }
.segmented input:checked + span { background: #fff; color: var(--olive); box-shadow: 0 2px 8px rgba(43, 46, 33, .1); }
.segmented input:disabled + span { cursor: not-allowed; opacity: .6; }

.drop { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px; border: 1.5px dashed var(--sand); border-radius: 14px; background: var(--sand-4); color: var(--olive-3); font-weight: 500; cursor: pointer; text-align: center; margin-top: 4px; }
.drop .ic { color: var(--sand); filter: brightness(.85); }

.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; font-weight: 600; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; }
.switch-row i { width: 48px; height: 28px; border-radius: 99px; background: var(--sand-3); position: relative; transition: background .2s; }
.switch-row i::after { content: ''; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .2s; }
.switch-row input:checked + i { background: var(--green); }
.switch-row input:checked + i::after { transform: translateX(-20px); }

/* Interest slider */
.interest { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.interest output { display: flex; align-items: center; gap: 8px; min-width: 124px; justify-content: flex-end; }
.interest output b { font-size: 20px; font-variant-numeric: tabular-nums; }
.interest output span { font-size: 12px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 99px; transition: background .2s; }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 10px; border-radius: 99px; outline: none; direction: rtl;
  background: linear-gradient(to left, var(--col, var(--sand)) 0 var(--fill, 50%), var(--sand-3) var(--fill, 50%) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--col, var(--sand)); box-shadow: 0 4px 12px rgba(43,46,33,.2); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--col, var(--sand)); box-shadow: 0 4px 12px rgba(43,46,33,.2); cursor: grab; }

.sticky-actions { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + 8px); z-index: 5; padding-top: 6px; }
@media (min-width: 960px) { .sticky-actions { bottom: 16px; } }

/* ---------- Pills, chips, avatars ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.pill.soft { background: var(--sand-4); color: var(--olive-3); }
.pill.lock { background: var(--sand-4); color: var(--muted); }
.pill .ic { width: 13px; height: 13px; }
[class*="tone-"] { --tc: var(--t-reply); --tb: var(--t-reply-bg); }
.tone-done { --tc: var(--t-done); --tb: var(--t-done-bg); }
.tone-photos { --tc: var(--t-photos); --tb: var(--t-photos-bg); }
.tone-reply { --tc: var(--t-reply); --tb: var(--t-reply-bg); }
.tone-booking { --tc: var(--t-booking); --tb: var(--t-booking-bg); }
.tone-noreply { --tc: var(--t-noreply); --tb: var(--t-noreply-bg); }
.tone-booked { --tc: var(--t-booked); --tb: var(--t-booked-bg); }
.pill[class*="tone-"] { color: var(--olive); background: var(--tb); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--sand)); display: inline-block; flex: none; }
.choice input:checked + span .dot { background: var(--sand); }

.chips { display: flex; gap: 8px; }
.chips.scroll { overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; transition: all .15s; }
.chip b { font-size: 12px; color: var(--muted); font-weight: 600; }
.chip.on { background: var(--olive); color: #fff; border-color: var(--olive); }
.chip.on b { color: var(--sand); }
.chip.on .dot { background: var(--sand); }

.avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sand-3); color: var(--olive); font-weight: 700; font-size: 17px; }
.avatar.lg { width: 50px; height: 50px; font-size: 19px; }
.avatar.xl { width: 76px; height: 76px; font-size: 30px; background: linear-gradient(140deg, var(--sand-3), var(--sand)); }
.avatar.dark { background: var(--olive); color: var(--sand); }
.presence { position: absolute; bottom: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #c9c4b7; border: 2.5px solid #fff; }
.presence.on { background: #22b357; box-shadow: 0 0 0 0 rgba(34,179,87,.5); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,179,87,.45); } 80%, 100% { box-shadow: 0 0 0 7px rgba(34,179,87,0); } }
.online-txt { color: var(--green); font-weight: 600; }
.role { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--sand-4); color: var(--olive-3); }
.role-admin { background: var(--olive); color: var(--sand); }
.role-supervisor { background: var(--sand-3); color: var(--olive); }

/* ---------- AI search ---------- */
.ai-search, .ai-input {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 58px; padding: 0 8px 0 14px; border-radius: 20px;
  background: #fff; text-align: start; isolation: isolate;
  box-shadow: 0 10px 30px rgba(43, 46, 33, .08);
}
.ai-search::before, .ai-input::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--a, 0deg), var(--sand), #e9dfc9, var(--olive-3), var(--sand), #fff4dc, var(--sand));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --a: 360deg; } }
.ai-orb { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--sand); background: radial-gradient(circle at 30% 25%, var(--olive-3), var(--olive)); }
.ai-orb .ic { width: 18px; height: 18px; }
.ai-placeholder { flex: 1; color: var(--muted); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-kbd { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--sand-4); color: var(--olive); }
.ai-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 17px; }
.ai-input input::-webkit-search-cancel-button { display: none; }
.search-head { display: flex; align-items: center; gap: 10px; }
.search-results { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; overflow-y: auto; }
.hint { color: var(--muted); font-size: 13.5px; padding: 14px 4px; }
.notice { background: var(--sand-4); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice.warn { background: #fbf2e4; border-color: #f0dfc0; color: #8a5f1d; }
.notice.lock { background: var(--olive); color: #fff; border: 0; }
.notice.lock .ic { color: var(--sand); }
.found-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: var(--sand-4); border: 1.5px solid var(--sand-2); animation: rise .25s ease; }
.found-label { font-size: 12.5px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 6px; }
.found-label .ic { width: 16px; height: 16px; }
.found-card small { display: block; color: var(--muted); }
.found-foot { font-size: 13px; font-weight: 600; color: var(--olive-3); display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.found-foot .ic { width: 15px; height: 15px; }
.big { font-size: 17px; }
.create-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--olive); color: #fff; animation: rise .25s ease; box-shadow: 0 14px 30px rgba(43,46,33,.25); }
.create-card small { display: block; color: var(--sand-2); font-size: 12.5px; }
.create-orb { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--sand); color: var(--olive); flex: none; }
.create-orb .ic { width: 24px; height: 24px; stroke-width: 2.4; }
.chev { color: var(--sand); }
.results { display: flex; flex-direction: column; gap: 4px; }
.result { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; }
.result:hover, .result:active { background: var(--sand-4); }
.result small { display: block; color: var(--muted); font-size: 12.5px; }

/* ---------- Lists ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.ccard { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .12s, box-shadow .2s; }
.ccard:active { transform: scale(.99); }
.ccard:hover { box-shadow: 0 2px 4px rgba(43,46,33,.05), 0 14px 30px rgba(43,46,33,.09); }
.ccard-top { display: flex; align-items: center; gap: 12px; }
.ccard-top b { font-size: 15.5px; }
.ccard-top small { color: var(--muted); font-size: 12.5px; }
.ccard-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.ccard-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ccard-meta .ic { width: 14px; height: 14px; }
.ibar { height: 6px; border-radius: 99px; background: var(--sand-4); overflow: hidden; }
.ibar.lg { height: 10px; margin: 6px 0; }
.ibar span { display: block; height: 100%; border-radius: 99px; transition: width .4s; }
.ibar-label { font-size: 11.5px; font-weight: 600; margin-top: -6px; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--olive); color: #fff; border-radius: var(--radius); padding: 16px 6px; }
.mini-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mini-stats div + div { border-inline-start: 1px solid rgba(191,174,142,.25); }
.mini-stats b { font-size: 24px; color: var(--sand); line-height: 1.1; }
.mini-stats span { font-size: 12px; opacity: .8; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 20px; }
.empty-ic { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--sand-4); color: var(--sand); margin-bottom: 6px; }
.empty-ic .ic { width: 30px; height: 30px; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters #ftext { grid-column: 1 / -1; }
.filters .input { height: 44px; }
@media (min-width: 700px) { .filters { grid-template-columns: 2fr 1fr 1fr; } .filters #ftext { grid-column: auto; } }

.urow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); text-align: start; box-shadow: var(--shadow); }
.urow small { display: block; color: var(--muted); font-size: 12.5px; }
.urow b small { display: inline; }
.urow.off { opacity: .5; }
.col-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ---------- Dashboard ---------- */
.live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: #e9f6ee; color: var(--green); font-weight: 700; font-size: 12.5px; }
.live-badge i, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22b357; animation: ping 1.6s infinite; display: inline-block; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); background: var(--sand-4); border: 1px solid var(--line); }
.kpi span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kpi b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 12px; color: var(--muted); }
.kpi.dark { background: var(--olive); border-color: var(--olive); }
.kpi.dark span { color: var(--sand-2); }
.kpi.dark b { color: var(--sand); }
.stack-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--sand-4); }
.stack-bar span { background: var(--tc); min-width: 0; }
.legend { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 12px; }
@media (min-width: 600px) { .legend { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.legend a { display: flex; align-items: center; gap: 8px; padding: 8px 4px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.legend b { margin-inline-start: auto; }
.legend small { color: var(--muted); width: 36px; text-align: left; }
.dash-grid { display: grid; gap: 14px; }
@media (min-width: 960px) { .dash-grid { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.plist { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.prow { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow small { display: block; color: var(--muted); font-size: 12px; }
.prow .avatar { width: 40px; height: 40px; font-size: 15px; }
.prow .count { font-size: 12px; font-weight: 700; color: var(--olive-3); background: var(--sand-4); padding: 2px 9px; border-radius: 99px; }
.feed { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; }
.act { display: flex; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.act:last-child { border-bottom: 0; }
.act.fresh { animation: flash 1.8s ease; }
@keyframes flash { 0% { background: rgba(191,174,142,.35); transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; transform: none; } 100% { background: transparent; } }
.act-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sand-4); color: var(--olive-3); flex: none; }
.act-ic .ic { width: 16px; height: 16px; }
.type-client_create .act-ic { background: #e6f4ea; color: var(--green); }
.type-note .act-ic { background: var(--olive); color: var(--sand); }
.type-client_transfer .act-ic { background: #e7edf4; color: #46607e; }
.type-client_delete .act-ic, .type-user_delete .act-ic { background: #fbefed; color: var(--danger); }
.act-client { font-weight: 700; color: var(--olive); text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 3px; }
.act-text { color: var(--muted); font-size: 12.5px; word-break: break-word; }
.act-note { margin-top: 4px; padding: 8px 12px; background: var(--sand-4); border-radius: 4px 12px 12px 12px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.act-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: none; }
.branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.branches a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--sand-4); font-size: 13.5px; }
.branches b { margin-inline-start: auto; }

/* ---------- Client profile ---------- */
.hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 22px 16px; border-radius: 24px; background: linear-gradient(180deg, var(--sand-4), #fff); border: 1px solid var(--line); }
.hero h2 { font-size: 22px; font-weight: 700; }
.hero-contact { color: var(--muted); font-size: 14px; }
.hero-actions { display: flex; gap: 10px; margin-top: 8px; width: 100%; max-width: 360px; }
.hero-actions .btn { flex: 1; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.info-grid > div { display: flex; flex-direction: column; gap: 3px; }
.info-grid > div:first-child { grid-column: 1 / -1; }
.info-grid span { font-size: 12px; color: var(--muted); font-weight: 500; }
.info-grid b { font-size: 14.5px; }
.file-link { display: inline-flex; align-items: center; gap: 6px; color: var(--olive); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sand); word-break: break-all; }
.file-link .ic { color: var(--sand); width: 18px; height: 18px; }
.composer { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 14px; }
.composer textarea { flex: 1; }
.composer .btn { height: 48px; width: 48px; padding: 0; flex: none; }
.timeline { display: flex; flex-direction: column; position: relative; padding-inline-start: 18px; }
.timeline::before { content: ''; position: absolute; top: 8px; bottom: 8px; right: 5px; width: 2px; background: var(--line); }
.tl { display: flex; gap: 10px; padding: 8px 0; position: relative; }
.tl-dot { position: absolute; right: -18px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid var(--sand); }
.tl.note .tl-dot { background: var(--olive); border-color: var(--olive); }
.tl-head { font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.tl-head time { color: var(--muted); font-size: 11.5px; }
.tl-text { color: var(--muted); font-size: 13px; word-break: break-word; }
.tl-note { margin-top: 4px; padding: 10px 12px; background: var(--sand-4); border-radius: 4px 14px 14px 14px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }

/* ---------- Sheets & toasts ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(28, 30, 21, .45); opacity: 0; transition: opacity .25s; backdrop-filter: blur(2px); }
.sheet { position: absolute; inset: auto 0 0 0; max-height: 92dvh; overflow-y: auto; background: #fff; border-radius: 26px 26px 0 0; padding: 10px 18px calc(20px + var(--safe-b)); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .9, .3, 1); box-shadow: var(--shadow-l); }
.sheet.full { height: 92dvh; display: flex; flex-direction: column; }
.sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet-wrap.open .sheet { transform: none; }
.sheet-grip { width: 42px; height: 5px; border-radius: 99px; background: var(--sand-3); margin: 0 auto 14px; }
.sheet-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
@media (min-width: 700px) {
  .sheet { inset: 50% auto auto 50%; width: 560px; max-height: 86dvh; border-radius: 26px; transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .25s, opacity .25s; }
  .sheet.full { height: min(720px, 86dvh); }
  .sheet-wrap.open .sheet { transform: translate(-50%, -50%); opacity: 1; }
  .sheet-grip { display: none; }
}
#toasts { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); inset-inline: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--olive); color: #fff; padding: 11px 18px; border-radius: 14px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-l); animation: drop .3s ease; transition: opacity .3s, transform .3s; max-width: 90vw; }
.toast.ok::before { content: '✓ '; color: var(--sand); font-weight: 700; }
.toast.err { background: var(--danger); }
.toast.out { opacity: 0; transform: translateY(-10px); }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } }

.loader { display: flex; justify-content: center; gap: 6px; padding: 80px 0; }
.loader span { width: 9px; height: 9px; border-radius: 50%; background: var(--sand); animation: bounce 1s infinite ease-in-out; }
.loader span:nth-child(2) { animation-delay: .15s; } .loader span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: flex; flex-direction: column; background: var(--olive); }
.login-top { flex: 1; min-height: 34dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 30px; }
.login-card { background: #fff; border-radius: 30px 30px 0 0; padding: 30px 22px calc(30px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 480px; margin: 0 auto; animation: rise .7s cubic-bezier(.2,.8,.2,1) 1.5s both; }
.login-card h1 { font-size: 24px; }
.login-foot { display: none; }
@media (min-width: 700px) {
  .login { justify-content: center; align-items: center; background: radial-gradient(ellipse at top, var(--olive-2), var(--olive) 60%); }
  .login-top { flex: none; min-height: 0; padding-bottom: 24px; }
  .login-card { border-radius: 28px; box-shadow: var(--shadow-l); }
  .login-foot { display: block; color: var(--sand); opacity: .4; margin-top: 24px; font-size: 12px; letter-spacing: 3px; }
}
.me-logo { width: 140px; margin: 10px auto 0; opacity: .6; }
.page.still { animation: none; }

/* ---------- Brand logo (real artwork as masked layers) ---------- */
.brand-logo { position: relative; width: 100%; aspect-ratio: 1000 / 580.7; --logo: var(--olive); --hi: #fff6e2; }
.brand-logo.mark-only { aspect-ratio: 1000 / 323.7; }
.bl { position: absolute; inset-inline: 0; display: block;
  background: linear-gradient(105deg, var(--logo) 0 42%, var(--hi) 50%, var(--logo) 58% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.bl-mark { --m: url(/brand/mark.png); top: 0; height: 55.74%; }
.bl-line { --m: url(/brand/line.png); top: 64.668%; height: 15.689%; }
.bl-tag  { --m: url(/brand/tag.png);  top: 83.546%; height: 16.454%; }
.mark-only .bl-mark { height: 100%; }

/* Login intro: mark unveils, title rises, tagline writes itself, then a light sweep and a slow glow */
.brand-logo.intro { filter: drop-shadow(0 0 0 rgba(191,174,142,0)); animation: logoGlow 5s ease-in-out 3.2s infinite; }
.intro .bl-mark { animation: markIn 1.25s cubic-bezier(.16,.84,.24,1) .2s both, sweep 1.6s ease-in-out 2.3s both, sweep 1.6s ease-in-out 9s infinite; }
.intro .bl-line { animation: lineIn .9s cubic-bezier(.2,.8,.2,1) 1s both; }
.intro .bl-tag  { animation: write 1.4s cubic-bezier(.45,.05,.35,1) 1.55s both; }
@keyframes markIn {
  0%   { opacity: 0; transform: scale(1.05) translateY(4%); clip-path: inset(-10% 100% -10% 0); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: none; clip-path: inset(-10% 0 -10% 0); }
}
@keyframes lineIn { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes write  { from { clip-path: inset(0 100% 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes sweep  { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(191,174,142,0)); } 50% { filter: drop-shadow(0 0 22px rgba(191,174,142,.28)); } }

/* In-app logo: just an occasional soft sweep */
.brand-logo.shine .bl-mark { animation: sweep 1.8s ease-in-out 1s both, sweep 1.8s ease-in-out 12s infinite; }

.login-top { position: relative; }
.login-top .brand-logo { width: min(150px, 37vw); }
.login-glow { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; max-width: 120vw; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(191,174,142,.16), rgba(191,174,142,0) 62%); animation: glowIn 2.4s ease .3s both; }
@keyframes glowIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.nav-brand .brand-logo { width: 120px; margin: 0 auto; }
.me-logo .brand-logo { width: 150px; }

@media (prefers-reduced-motion: reduce) {
  .brand-logo, .bl, .login-glow, .login-card { animation: none !important; }
}
.welcome { position: relative; color: var(--sand); font-size: 13px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 18px; opacity: .85;
  animation: welcomeIn 1s cubic-bezier(.2,.8,.2,1) .05s both; }
@keyframes welcomeIn { from { opacity: 0; letter-spacing: 10px; } to { opacity: .85; letter-spacing: 4px; } }
@media (prefers-reduced-motion: reduce) { .welcome { animation: none; } }

/* ---------- Avatars with photos ---------- */
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar.has-img { background: var(--sand-3); }
.avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.photo-pick { position: relative; display: inline-block; cursor: pointer; }
.photo-pick .avatar.xl { width: 92px; height: 92px; font-size: 34px; box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(43,46,33,.15); }
.photo-cam { position: absolute; bottom: 2px; left: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--olive); color: var(--sand); border: 3px solid #fff; }
.photo-cam .ic { width: 15px; height: 15px; }
.link-btn { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 4px; }
.sheet-user { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ---------- Employee home hero ---------- */
.home-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  min-height: min(68dvh, 560px); justify-content: center; padding: 56px 16px 22px; margin: -16px -16px 0;
  background: radial-gradient(120% 70% at 50% 0%, var(--sand-4), #fff 70%); }
.hero-bar { position: absolute; top: 14px; inset-inline: 16px; display: flex; align-items: center; justify-content: space-between; }
.home-hero h1 { font-size: 26px; font-weight: 700; }
.search-orb { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; }
.search-orb span { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: var(--sand);
  background: radial-gradient(circle at 30% 25%, var(--olive-3), var(--olive) 72%); box-shadow: 0 18px 40px rgba(43,46,33,.35), inset 0 1px 0 rgba(255,255,255,.12);
  animation: orbFloat 4s ease-in-out infinite; }
.search-orb span .ic { width: 42px; height: 42px; stroke-width: 2; }
.search-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--sand); opacity: 0; animation: orbRing 3.2s ease-out infinite; }
.search-orb i:nth-child(2) { animation-delay: 1.6s; }
.search-orb:active span { transform: scale(.95); }
@keyframes orbRing { 0% { transform: scale(.72); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes orbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero-search { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px; min-height: 62px; padding: 10px 12px 10px 16px;
  border-radius: 22px; background: #fff; text-align: start; color: var(--muted); font-size: 15px; line-height: 1.45; box-shadow: 0 14px 34px rgba(43,46,33,.1); }
.hero-search::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--a, 0deg), var(--sand), #e9dfc9, var(--olive-3), var(--sand), #fff4dc, var(--sand));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }

/* ---------- Motivation card ---------- */
.motive { position: relative; overflow: hidden; border-radius: var(--radius); padding: 16px 18px 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, var(--olive-3), var(--olive) 60%); box-shadow: 0 14px 34px rgba(43,46,33,.22); }
.motive::after { content: '”'; position: absolute; left: 16px; bottom: -92px; font-size: 150px; line-height: 1; color: var(--sand); opacity: .12; font-family: Georgia, serif; }
.motive-head { display: flex; align-items: center; gap: 12px; }
.motive-head b { display: block; color: var(--sand); font-size: 14px; }
.motive-head small { color: rgba(255,255,255,.6); font-size: 12px; }
.motive-av { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; padding: 7px; background: rgba(191,174,142,.14); border: 1px solid rgba(191,174,142,.3); flex: none; }
.motive .icon-btn { background: rgba(255,255,255,.08); color: var(--sand); width: 36px; height: 36px; }
.motive-text { margin-top: 12px; font-size: 16.5px; line-height: 1.75; font-weight: 500; position: relative; z-index: 1; }
.motive-text.swap { animation: msgSwap .45s ease; }
@keyframes msgSwap { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Charts ---------- */
.kpis.five { grid-template-columns: 1fr 1fr; }
.kpis.five .kpi:first-child { grid-column: 1 / -1; }
@media (min-width: 700px) { .kpis.five { grid-template-columns: repeat(5, 1fr); } .kpis.five .kpi:first-child { grid-column: auto; } }
.chart-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .chart-grid { grid-template-columns: 1fr 1fr; } }
.colchart { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 150px auto auto; column-gap: 8px; }
.colchart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.cols { display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); }
.col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.col span { display: block; width: 62%; max-width: 12px; min-height: 0; border-radius: 4px 4px 0 0; transition: height .5s cubic-bezier(.2,.8,.2,1), opacity .15s; }
.col:hover span { opacity: .75; }
.cols-axis { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.chart-foot { grid-column: 2; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.chart-foot b { color: var(--text); }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { position: relative; width: 150px; height: 150px; flex: none; margin: 0 auto; }
.donut svg { width: 100%; height: 100%; }
.donut circle[data-tip] { cursor: pointer; transition: stroke-width .15s; }
.donut circle[data-tip]:hover { stroke-width: 16; }
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-c b { font-size: 28px; line-height: 1; }
.donut-c small { color: var(--muted); font-size: 12px; }
.legend.compact { flex: 1; min-width: 180px; grid-template-columns: 1fr; margin-top: 0; }
.legend.compact div { display: flex; align-items: center; gap: 8px; padding: 7px 2px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.legend.compact div:last-child { border-bottom: 0; }
.legend.compact b { margin-inline-start: auto; }
.legend.compact small { color: var(--muted); width: 36px; text-align: left; }
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.hbar-l { color: var(--olive-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-t { height: 12px; border-radius: 99px; background: var(--sand-4); overflow: hidden; }
.hbar-t i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 0; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.hbar b { text-align: left; font-variant-numeric: tabular-nums; }
.chart-tip { position: fixed; z-index: 300; pointer-events: none; background: var(--olive); color: #fff; padding: 7px 11px; border-radius: 10px; font-size: 12.5px;
  box-shadow: var(--shadow-l); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; display: flex; flex-direction: column; align-items: center; }
.chart-tip.show { opacity: 1; transform: none; }
.chart-tip small { color: var(--sand-2); font-size: 11.5px; }
.chart-tip b { font-size: 14px; }

/* Team leaderboard */
.ttable { display: flex; flex-direction: column; }
.trow { display: grid; grid-template-columns: minmax(130px, 1.6fr) 1.4fr .8fr .7fr .9fr .7fr; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.trow:last-child { border-bottom: 0; }
.trow.thead { font-size: 12px; color: var(--muted); font-weight: 600; padding-top: 0; }
a.trow:hover { background: var(--sand-4); border-radius: 12px; }
.tuser { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tuser .presence { width: 11px; height: 11px; }
.tbar { display: flex; align-items: center; gap: 8px; }
.tbar i { display: block; height: 8px; border-radius: 0 4px 4px 0; background: var(--olive); }
.warn-txt b { color: #b5651d; }
@media (max-width: 700px) {
  .trow.thead { display: none; }
  .trow { grid-template-columns: 1fr 1fr 1fr; row-gap: 6px; padding: 12px 4px; }
  .tuser { grid-column: 1 / -1; }
  .trow > span[data-label] { display: flex; flex-direction: column; font-size: 12px; }
  .trow > span[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 11px; }
  .tbar { flex-direction: column; align-items: flex-start !important; }
  .tbar i { display: none; }
}

/* Suggestions */
.suggs { display: flex; flex-direction: column; gap: 8px; }
.sugg { border: 1px solid var(--line); border-radius: 16px; background: var(--sand-4); overflow: hidden; }
.sugg summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.sugg summary::-webkit-details-marker { display: none; }
.sugg summary small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sugg-ic { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border-radius: 12px; flex: none; }
.sugg-n { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: var(--olive); color: var(--sand); font-weight: 700; font-size: 13px; }
.sugg .results { background: #fff; padding: 4px 6px 6px; border-top: 1px solid var(--line); }

/* Data export / import */
.data-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.data-actions .btn { flex: 1 1 160px; }
.dl-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; background: #fff; transition: background .15s; }
.dl-card:hover { background: var(--sand-4); }
.dl-card small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.55; margin-top: 2px; }
.dl-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--olive); color: var(--sand); font-weight: 700; font-size: 13px; flex: none; letter-spacing: .5px; }
.dl-ic.xls { background: #1d6f42; color: #fff; }
.bullets { margin: 10px 0 0; padding-inline-start: 20px; color: var(--olive-3); font-size: 13.5px; line-height: 1.9; }
.imp-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.imp-sum div { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: 14px; background: var(--sand-4); }
.imp-sum b { font-size: 22px; }
.imp-sum span { font-size: 11.5px; color: var(--muted); }

/* Activity avatars */
.act-av { position: relative; flex: none; }
.act-av .act-ic { position: absolute; bottom: -4px; left: -4px; width: 20px; height: 20px; border-radius: 7px; border: 2px solid #fff; display: grid; place-items: center; }
.act-av .act-ic .ic { width: 11px; height: 11px; }
@media (prefers-reduced-motion: reduce) { .search-orb span, .search-orb i, .hero-search::before { animation: none; } }
.fu-badge { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--sand-4); color: var(--olive-3); }
.fu-badge.fu-today { background: #fcf2db; color: #8a5f00; }
.fu-badge.fu-late { background: #fbe9e6; color: var(--danger); }
#fuInput, #fuNote { margin-top: 4px; }

/* ---------- Follow-ups ---------- */
.fu-picker .chip.on { background: var(--olive); color: #fff; border-color: var(--olive); }
.fu-card .fu-when { font-size: 18px; font-weight: 700; }
.fu-card .fu-what { color: var(--olive-3); margin-top: 2px; }
.fu-card .fu-late { color: var(--danger); font-weight: 600; font-size: 13px; margin-top: 4px; }
.fu-card.fu-late { border-color: #f0c9c3; background: #fffafa; }
.fu-card.fu-today { border-color: #f1dfb5; background: #fffdf7; }
.fu-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.fu-row:last-of-type { border-bottom: 0; }
.fu-row .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fu-row small { color: var(--muted); font-size: 12.5px; max-width: 100%; }
.fu-tick { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--olive); color: var(--sand); flex: none; }
.notif-ask { width: 100%; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--sand-4); border: 1px dashed var(--sand); color: var(--olive-3); font-weight: 600; font-size: 13.5px; }
.nav-item { position: relative; }
.nav-badge { position: absolute; top: 2px; left: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
@media (min-width: 960px) { .nav-badge { position: static; margin-inline-start: auto; } }
#fuAlerts { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline: 12px; z-index: 250; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fu-alert { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; padding: 12px 14px; border-radius: 18px; background: var(--olive); color: #fff; box-shadow: var(--shadow-l); animation: drop .35s ease; }
.fu-alert b { display: block; color: var(--sand); }
.fu-alert small { display: block; opacity: .8; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-alert-ic { font-size: 24px; animation: ring 1.2s ease 3; }
.fu-alert button { color: var(--sand); opacity: .8; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(16deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); } }
.fu-actions .btn { padding: 0 14px; }

/* ================= Sales automation ================= */
.st { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.st .ic { width: 12px; height: 12px; }
.st-late { background: #fbe9e6; color: var(--danger); }
.st-today { background: #fcf2db; color: #8a5f00; }
.st-later { background: var(--sand-4); color: var(--olive-3); }
.st-done { background: #e4f6ef; color: #12734f; }
.st-muted { background: #f1f0ec; color: var(--muted); }
.tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 8px; background: var(--sand-4); color: var(--olive-3); white-space: nowrap; }
.warn-txt { color: #b5651d !important; }
.ok-txt { color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.link-btn.neutral { color: var(--olive-3); text-decoration: underline; }
.block-link { display: block; text-align: center; padding: 10px; }

/* Bell */
#bell { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 40; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border: 1px solid var(--line); color: var(--olive); box-shadow: var(--shadow); }
#bell i { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.topbar { padding-left: 50px; }
.hello { padding-left: 50px; }
@media (min-width: 960px) { #bell { left: 24px; top: 20px; } }

/* More menu */
.more-list { display: flex; flex-direction: column; gap: 8px; }
.more-tile { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.more-tile small { display: block; color: var(--muted); font-size: 12.5px; }
.more-tile > .ic { color: var(--sand); }
.more-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--olive); color: var(--sand); flex: none; }

/* Plan card on home */
.plan-card { display: block; padding: 16px; border-radius: var(--radius); background: #fff; border: 1.5px solid var(--sand-2); box-shadow: var(--shadow); }
.plan-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.plan-head b { display: flex; align-items: center; gap: 8px; }
.plan-head span { font-size: 13px; color: var(--muted); font-weight: 600; }
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.plan-grid div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 2px; border-radius: 12px; background: var(--sand-4); }
.plan-grid b { font-size: 18px; }
.plan-grid span { font-size: 11px; color: var(--muted); line-height: 1.35; }

/* Today */
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-content: center; flex: none;
  background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(var(--olive) calc(var(--p) * 1%), var(--sand-3) 0); }
.ring b { font-size: 18px; line-height: 1; }
.ring small { font-size: 10px; color: var(--muted); }
.plan-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 16px; background: var(--sand-4); border: 1.5px solid transparent; }
.pt b { font-size: 22px; line-height: 1.1; }
.pt span { font-size: 12px; color: var(--muted); }
.pt i { font-style: normal; font-size: 10.5px; color: var(--danger); font-weight: 700; }
.pt.on { background: #fff; border-color: var(--olive); box-shadow: var(--shadow); }
.fu-item, .rec, .alert-item, .rv-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.fu-item small, .rec small, .alert-item small, .rv-item small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.fu-item.st-row-late { border-color: #f0c9c3; background: #fffafa; }
.fu-item.st-row-today { border-color: #f1dfb5; }
.fu-reason { color: var(--olive-3) !important; display: flex !important; align-items: center; gap: 4px; }
.fu-reason .ic { width: 13px; height: 13px; color: var(--sand); }
.fu-acts { display: flex; gap: 6px; flex: none; }
.qc { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sand-4); color: var(--olive); }
.qc .ic { width: 17px; height: 17px; }
.qc.wa { color: #1d8a4f; }
.qc.primary { background: var(--olive); color: var(--sand); }
.rec-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rec-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 0; }
.rec-head small { color: var(--muted); }
.rec .grow { display: flex; flex-direction: column; gap: 5px; }
.rec-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.rec-why { font-size: 12.5px; color: var(--olive-3); display: flex; gap: 5px; align-items: flex-start; line-height: 1.5; }
.rec-why .ic { width: 14px; height: 14px; color: var(--sand); flex: none; margin-top: 2px; }
.rec.done { opacity: .62; }
.target-mini { display: block; }
.booking-line { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; }
.booking-line .ic { color: var(--sand); }

/* Contacts */
.outcome-chips .choice span { min-height: 40px; font-size: 13.5px; }
.oc-booked input:checked + span { background: var(--t-booked); border-color: var(--t-booked); }
.oc-dnc input:checked + span, .oc-not_interested input:checked + span { background: var(--danger); border-color: var(--danger); }
.contact-hist { margin-top: 10px; }
.ch-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ch-row:last-child { border-bottom: 0; }
.ch-row small { display: block; color: var(--muted); }
.ch-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--sand-4); color: var(--olive-3); flex: none; }
.ch-ic .ic { width: 14px; height: 14px; }
.ch-ic.oc-booked, .ch-ic.oc-interested { background: #e4f6ef; color: #12734f; }
.ch-ic.oc-dnc, .ch-ic.oc-not_interested { background: #fbe9e6; color: var(--danger); }
.block-btn { width: 100%; text-align: start; }
.danger-ic { background: var(--danger) !important; color: #fff !important; }

/* Tabs */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { height: 38px; padding: 0 14px; border-radius: 12px; background: var(--sand-4); color: var(--olive-3); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.tab.on { background: var(--olive); color: #fff; }
.month-in { max-width: 200px; height: 44px; }
.kpis.six { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .kpis.six { grid-template-columns: repeat(6, 1fr); } }

/* Wallet */
.wallet-hero { border-radius: 24px; padding: 20px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, var(--olive-3), var(--olive) 62%); box-shadow: 0 16px 36px rgba(43,46,33,.25); display: flex; flex-direction: column; gap: 2px; }
.wallet-hero > span { color: var(--sand-2); font-size: 13px; }
.wallet-hero > b { font-size: 38px; color: var(--sand); line-height: 1.2; font-variant-numeric: tabular-nums; }
.wallet-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.wallet-row div { background: rgba(255,255,255,.07); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.wallet-row small { color: rgba(255,255,255,.65); font-size: 11.5px; }
.wallet-row b { font-size: 15px; }
.wallet-foot { color: rgba(255,255,255,.6); margin-top: 10px; font-size: 12px; }
.branch-prog { padding: 12px 0; border-top: 1px solid var(--line); margin-top: 10px; }
.ladder { display: flex; gap: 4px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; }
.rung { flex: 1 0 58px; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 10px; background: var(--sand-4); font-weight: 700; font-size: 13px; color: var(--muted); }
.rung small { font-size: 10.5px; font-weight: 500; }
.rung.got { background: var(--olive); color: var(--sand); }
.rung.next { background: #fff; border: 1.5px dashed var(--olive); color: var(--olive); }
.milestone { font-size: 13px; color: var(--olive-3); margin-top: 8px; background: var(--sand-4); border-radius: 10px; padding: 8px 10px; }
.com-list { display: flex; flex-direction: column; }
.com-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.com-row:last-child { border-bottom: 0; }
.com-row small { display: block; color: var(--muted); font-size: 12px; }
.com-row.rev b { text-decoration: line-through; text-decoration-color: var(--muted); }
.com-row.selectable { cursor: pointer; }
.com-row .col-end { gap: 3px; }

/* Plans */
.plan-branches { display: grid; gap: 6px; margin-top: 10px; }
.plan-branches > div { padding: 8px 10px; border-radius: 10px; background: var(--sand-4); display: flex; flex-direction: column; }
.plan-branches > div > small { color: var(--muted); font-size: 12px; }
.plan-br { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.plan-br .plan-br-f { display: none; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.plan-br.on .plan-br-f { display: flex; }
.plan-br.on { border-color: var(--sand); background: #fffdf8; }
.plan-br .field { min-width: 90px; }
.plan-br .field.grow { min-width: 180px; }
.br-preview { display: block; margin-top: 6px; font-size: 12px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--olive); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.checks .check { font-weight: 500; font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .grid2 { grid-template-columns: 1fr; } }
.set-sec summary, .prefs summary, .rv-group summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.set-sec summary::-webkit-details-marker, .prefs summary::-webkit-details-marker, .rv-group summary::-webkit-details-marker { display: none; }
.set-sec summary b, .prefs summary b { display: flex; align-items: center; gap: 8px; }
.set-sec[open] summary, .prefs[open] summary, .rv-group[open] summary { margin-bottom: 12px; }
.rec-buckets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rb { border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.rb .rbLabel { height: 36px; max-width: 220px; }
.rb-f { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.rb-f label { display: flex; flex-direction: column; gap: 2px; }
.rb-f small { font-size: 11px; color: var(--muted); }
.rb-f .input { height: 38px; padding: 0 8px; }

/* Notifications */
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.notif small { display: block; color: var(--olive-3); font-size: 13px; }
.notif-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex: none; background: transparent; }
.notif.unread { background: #fffdf7; border-color: var(--sand-2); }
.notif.unread .notif-dot { background: var(--danger); }

/* Reports */
.perf { display: flex; flex-direction: column; gap: 6px; }
.perf-row { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.perf-row summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.perf-row summary::-webkit-details-marker { display: none; }
.perf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.perf-grid div { padding: 8px; border-radius: 10px; background: var(--sand-4); display: flex; flex-direction: column; }
.perf-grid small { font-size: 11px; color: var(--muted); }
.perf-grid b { font-size: 16px; }
.score-parts { display: grid; gap: 6px; margin-top: 10px; }
.score-parts div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.score-parts small { font-size: 12px; color: var(--muted); }
.score { min-width: 44px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.score.shi { background: #e4f6ef; color: #12734f; }
.score.smid { background: #fcf2db; color: #8a5f00; }
.score.slo { background: #fbe9e6; color: var(--danger); }
.money-t .trow { grid-template-columns: minmax(120px, 1.5fr) .7fr .8fr 1fr 1fr 1fr; }

/* Per-surgery price boxes in the plan editor */
.plan-br.on .plan-br-f { flex-direction: column; }
.tier-gen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; align-items: end; padding: 10px; border-radius: 12px; background: var(--sand-4); }
.tier-gen > b { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.tier-gen > b .ic { width: 15px; height: 15px; color: var(--sand); }
.tier-gen label { display: flex; flex-direction: column; gap: 3px; }
.tier-gen small { font-size: 11.5px; color: var(--muted); }
.tier-gen .input { height: 40px; padding: 0 10px; }
.tier-gen select.input { padding-left: 30px; font-size: 13px; }
.tier-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.tier { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.tier > span:first-child { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.tier-in { display: flex; align-items: center; gap: 4px; direction: ltr; }
.tier-in b { color: var(--sand); filter: brightness(.8); }
.tier-in input { width: 100%; border: 0; outline: none; background: transparent; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tier:focus-within { border-color: var(--sand); box-shadow: 0 0 0 3px rgba(191,174,142,.2); }
.plan-br.on .plan-br-f { flex-wrap: nowrap; align-items: stretch; }
.plan-br-f > .row { flex-wrap: wrap; }
.plan-br-f .field, .plan-br-f .field.grow { min-width: 0; flex: 1 1 130px; }
.tier-table { align-content: start; grid-auto-rows: min-content; }
.tier-gen { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.tier-gen .row { flex-wrap: nowrap; }
.tier-gen .gStep { min-width: 0; flex: 1; }
.tier-gen .gType { flex: 1.4; min-width: 0; }
.tier-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; margin-top: 6px; }
.tier-chips span { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 8px; background: #fff; font-weight: 700; font-size: 12.5px; }
.tier-chips small { font-size: 10px; color: var(--muted); font-weight: 500; }
.plan-branches b small { font-weight: 500; }

/* ---------- iPhone home-screen app: olive status-bar area instead of a white strip ---------- */
:root { --safe-t: env(safe-area-inset-top, 0px); }
html { background: var(--olive); }
body::before { content: ''; position: fixed; top: 0; inset-inline: 0; height: var(--safe-t); background: var(--olive); z-index: 500; pointer-events: none; }
.page { padding-top: calc(16px + var(--safe-t)); }
.home-hero { padding-top: calc(56px + var(--safe-t)); }
.hero-bar { top: calc(14px + var(--safe-t)); }
.view { background: var(--bg); min-height: 100dvh; }
.sheet.full { padding-top: calc(10px + var(--safe-t)); }

/* ---------- Login: smaller card floating above the olive background ---------- */
.login-top { padding-top: calc(40px + var(--safe-t)); }
.login-card {
  width: auto; max-width: 400px; margin: 0 16px calc(20px + var(--safe-b));
  border-radius: 26px; padding: 22px 18px; gap: 10px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.18);
}
.login-card h1 { font-size: 20px; }
.login-card .field input:not([type=checkbox]) { height: 46px; }
.login-card .btn.lg { height: 48px; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--olive-3); cursor: pointer; }
.remember input { width: 18px; height: 18px; accent-color: var(--olive); }
@media (min-width: 440px) { .login-card { margin-inline: auto; width: calc(100% - 32px); } }
@media (min-width: 700px) { .login-card { margin: 0 auto; width: 100%; } }

/* ---------- Smooth page changes (no shake) ---------- */
.page { animation: none; }
.page.enter { animation: pageIn .16s ease-out; } /* opacity only — no sliding, so nothing moves */
@keyframes pageIn { from { opacity: .4; } to { opacity: 1; } }
#planCard:empty { min-height: 158px; border-radius: var(--radius); background: var(--sand-4); } /* reserve space so the list doesn't jump */
.nav, #bell { transform: translateZ(0); } /* keep fixed bars on their own layer on iPhone */
html, body { overscroll-behavior-y: none; }
@media (hover: none) {
  /* phones: drop continuous effects that repaint every frame */
  .ai-search::before, .hero-search::before, .ai-input::before { animation: none; background: linear-gradient(120deg, var(--sand), #e9dfc9, var(--olive-3), var(--sand)); }
  .presence.on { animation: none; box-shadow: 0 0 0 2px rgba(34,179,87,.18); }
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.98); }
}
@media (prefers-reduced-motion: reduce) { .page.enter { animation: none; } }
.hero-bar { padding-inline-end: 50px; } /* leave room for the bell (top-left in RTL) */
.app-ver { text-align: center; font-size: 11.5px; color: var(--muted); margin: 6px 0 0; direction: ltr; }
@media (hover: none) {
  #bell { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .sheet-backdrop { backdrop-filter: none; }
  .ccard, .card, .urow, .more-tile { box-shadow: 0 1px 2px rgba(43,46,33,.05), 0 4px 12px rgba(43,46,33,.05); } /* lighter shadows scroll smoother */
}

/* iPhone home-screen app: a fixed bottom bar sits higher on pages shorter than the screen and lower on long ones,
   so it jumps when switching pages. Make every page at least one pixel taller than the screen so it always sits the same. */
html, body { min-height: 100%; }
.view { min-height: calc(100vh + 1px); min-height: calc(100dvh + 1px); }

/* ---------- Edges (status bar + home indicator) always olive, on every page and on any iPhone mode ---------- */
html, body { background: var(--olive) !important; }
.shell { background: var(--bg); min-height: 100vh; min-height: 100dvh; }
.login { min-height: 100vh; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
.login-card { margin-bottom: 20px; }
/* no fade between pages: content swaps instantly (a fade reads as a flicker on iPhone) */
.page.enter, .page { animation: none !important; }
.login-ver { text-align: center; color: var(--sand); opacity: .55; font-size: 11px; letter-spacing: 1px; direction: ltr; margin: -8px 0 14px; }
/* Inside the Safari browser the bottom belongs to Safari's own bar: keep the page white there (no dark strip when the bar moves).
   The olive edges are only for the home-screen app. */
@media not all and (display-mode: standalone) {
  html, body { background: var(--bg) !important; }
}