:root{--navy: #1e264a;--navy-deep: #161c38;--gold: #b1a278;--gold-ink: #75683f;--ink: #15192b;--ink-2: #3a4157;--muted: #646b7e;--faint: #9aa1b1;--paper: #ffffff;--paper-2: #f6f6f8;--rule: #dfe2e9;--rule-strong: #b9bfcc;--late: #a8321c;--late-soft: #fbeeea;--paid: #2b6e49;--credit: #1f6b66;--hold: #8a6400;--display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;--text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--tap: 46px;--r: 4px;--gutter: 18px}*{box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--text);color:var(--ink);background:var(--paper);line-height:1.5;min-height:100dvh}h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}h1{font-size:1.9rem;font-weight:700}h2{font-size:1.25rem}h3{font-size:1rem;font-family:var(--text);font-weight:600;letter-spacing:0}p{margin:0}a{color:var(--navy)}button{font:inherit}input,select,textarea{font:inherit;color:inherit}.num{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.small{font-size:.875rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:2px solid var(--navy);outline-offset:2px}.app{display:grid;min-height:100dvh;grid-template-rows:auto 1fr auto}.topbar{background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:0 var(--gutter);min-height:50px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}.brand img{height:24px;width:30px;object-fit:contain}.topbar .brand img{box-sizing:content-box;padding:4px 5px;background:#fff;border-radius:3px}.brand strong{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.005em;color:var(--gold)}.brand span{display:none;font-size:.8rem;color:#b8bdcd}.topbar .spacer{flex:1}.topbar .env{font-size:.7rem;letter-spacing:.06em;color:var(--gold);border:1px solid var(--gold);padding:1px 7px;border-radius:2px}.topbar .who{font-size:.875rem;color:#d7dae4}.topbar .btn.quiet{color:#d7dae4}.topbar .btn.quiet:hover{background:var(--navy-deep);color:#fff}.main{padding:20px var(--gutter) 28px;width:100%;max-width:1000px;margin:0 auto}.bottomnav{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(5,1fr);z-index:20;padding-bottom:env(safe-area-inset-bottom)}.bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;text-decoration:none;color:var(--muted);font-size:.72rem;font-weight:500;position:relative}.bottomnav a svg{width:22px;height:22px;stroke-width:1.75}.bottomnav a.active{color:var(--navy)}.bottomnav a.active:before{content:"";position:absolute;top:0;left:18%;right:18%;height:3px;background:var(--gold)}.sidenav{display:none}@media(min-width:900px){.app{grid-template-columns:200px 1fr;grid-template-rows:auto 1fr}.topbar{grid-column:1 / -1}.brand span{display:inline}.bottomnav{display:none}.sidenav{display:flex;flex-direction:column;padding:28px 0 0 var(--gutter);border-right:1px solid var(--rule)}.sidenav a{display:block;padding:9px 14px;text-decoration:none;color:var(--ink-2);font-weight:500;position:relative}.sidenav a svg{display:none}.sidenav a:hover{color:var(--ink)}.sidenav a.active{color:var(--ink);font-weight:600}.sidenav a.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:var(--gold)}.sidenav .group{margin:22px 14px 4px;font-size:.72rem;letter-spacing:.05em;color:var(--faint);border-top:1px solid var(--rule);padding-top:14px}.main{padding:32px 40px 48px}:root{--gutter: 24px}}.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--ink)}.pagehead h1{flex:1;min-width:160px}.pagehead .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.pagehead .sub{color:var(--muted);margin-top:2px}.backlink{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:none;min-height:28px;font-size:.875rem}.backlink:hover{color:var(--navy);text-decoration:underline}.backlink svg{width:16px;height:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border-radius:var(--r);border:1px solid var(--navy);background:var(--navy);color:#fff;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .16s ease,border-color .16s ease,color .16s ease}.btn:hover{background:var(--navy-deep)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.secondary{background:transparent;color:var(--navy);border-color:var(--rule-strong)}.btn.secondary:hover{border-color:var(--navy);background:var(--paper-2)}.btn.quiet{background:transparent;color:var(--navy);border-color:transparent;padding:0 8px;font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}.btn.quiet:hover{text-decoration-color:currentColor;background:transparent}.btn.danger{background:transparent;color:var(--late);border-color:var(--late)}.btn.danger:hover{background:var(--late-soft)}.btn.gold{background:var(--navy);border-color:var(--navy);color:#fff}.btn.block{width:100%}.btn.sm{min-height:40px;padding:0 14px;font-size:.9rem}.btn svg{width:18px;height:18px}.card{padding:18px 0 6px;border-top:1px solid var(--rule)}.card:first-of-type{border-top:0;padding-top:4px}.card+.card{margin-top:14px}.card h2{margin-bottom:10px}.stack>*+*{margin-top:14px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.row.between{justify-content:space-between}.grid2{display:grid;gap:16px 32px;grid-template-columns:1fr}@media(min-width:700px){.grid2{grid-template-columns:1fr 1fr}}.list{list-style:none;margin:0;padding:0}.list li{border-top:1px solid var(--rule)}.list li:first-child{border-top:0}.list a.item,.list .item{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:12px 0;min-height:54px;text-decoration:none;color:inherit;align-items:center}.list a.item:hover .title{text-decoration:underline;text-underline-offset:3px}.item .title{font-weight:600}.item .sub{color:var(--muted);font-size:.875rem}.item .right{text-align:right;font-size:.875rem;color:var(--muted)}.pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;white-space:nowrap;color:var(--ink-2)}.pill:before{content:"";width:7px;height:7px;background:currentColor;flex:none}.pill.overdue{color:var(--late)}.pill.today{color:var(--navy)}.pill.today:before{background:var(--gold)}.pill.soon{color:var(--muted)}.pill.done,.pill.active{color:var(--paid)}.pill.stopped,.pill.closed{color:var(--muted)}.pill.credit{color:var(--credit)}.pill.warn{color:var(--hold)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-weight:600;font-size:.9rem}.field .hint{color:var(--muted);font-size:.8rem}.field input,.field select,.field textarea{min-height:var(--tap);padding:0 12px;border:1px solid var(--rule-strong);border-radius:var(--r);background:#fff;width:100%}.field textarea{padding:10px 12px;min-height:80px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:2px solid var(--navy);outline-offset:0}.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--late)}.field .error{color:var(--late);font-size:.875rem;display:flex;gap:6px;align-items:flex-start}.field .error svg{width:16px;height:16px;flex:none;margin-top:3px}.field .adorn{position:relative}.field .adorn input{padding-left:52px}.field .adorn:before{content:"AED";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.8rem;font-weight:600}.form-grid{display:grid;gap:14px;grid-template-columns:1fr}@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .span2{grid-column:1 / -1}}.form-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}.form-error{color:var(--late);border-left:3px solid var(--late);padding:6px 12px;font-weight:500;margin-bottom:12px}.form-note{border-left:3px solid var(--gold);padding:6px 12px;margin-bottom:12px;color:var(--ink-2);font-size:.9rem}.ledger{display:grid;grid-template-columns:1fr;gap:0 32px}@media(min-width:640px){.ledger{grid-template-columns:1fr 1fr}}.ledger .cell{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule)}.ledger .cell .k{font-size:.85rem;color:var(--muted)}.ledger .cell .v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}.ledger .cell.alert .v{color:var(--late)}.ledger .cell.good .v{color:var(--paid)}.table{width:100%;border-collapse:collapse;font-size:.9rem}.table th,.table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top}.table th{color:var(--muted);font-weight:600;font-size:.8rem}.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}.table tr.faded td{color:var(--muted);text-decoration:line-through}.table-wrap{overflow-x:auto}.sheet-backdrop{position:fixed;inset:0;background:#15192b80;z-index:40;display:flex;align-items:flex-end;justify-content:center}.sheet{background:var(--paper);width:100%;max-width:560px;max-height:92dvh;overflow:auto;border-radius:10px 10px 0 0;padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom));border-top:3px solid var(--gold)}.sheet h2{margin-bottom:12px}@media(min-width:700px){.sheet-backdrop{align-items:center}.sheet{border-radius:6px;padding:26px 28px}}@media(prefers-reduced-motion:no-preference){.sheet{animation:rise .16s ease-out}@keyframes rise{0%{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}}.toast{position:fixed;left:50%;bottom:76px;transform:translate(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);font-weight:500;z-index:50;max-width:calc(100vw - 32px);border-left:3px solid var(--gold)}.toast.error{border-left-color:var(--late)}@media(min-width:900px){.toast{bottom:24px}}.empty{padding:36px 0;color:var(--muted)}.empty strong{display:block;color:var(--ink);font-family:var(--display);font-size:1.15rem;margin-bottom:4px}.skeleton{height:54px;border-bottom:1px solid var(--rule);background:linear-gradient(90deg,var(--paper-2),#fbfbfc,var(--paper-2));background-size:200% 100%}@media(prefers-reduced-motion:no-preference){.skeleton{animation:shimmer 1.2s infinite}@keyframes shimmer{to{background-position:-200% 0}}}.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:16px;background:var(--navy)}.login{background:var(--paper);border-radius:6px;padding:32px 28px 28px;width:100%;max-width:380px;border-top:4px solid var(--gold)}.login .brand{color:var(--navy);margin-bottom:26px}.login .brand strong{color:var(--navy)}.login .brand span{display:inline;color:var(--muted)}.search{position:relative}.search input{padding-left:38px}.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}.segmented{display:inline-flex;gap:2px}.segmented button{min-height:40px;padding:0 12px;border:0;background:transparent;color:var(--muted);font-weight:600;cursor:pointer;border-bottom:2px solid transparent}.segmented button.on{color:var(--ink);border-bottom-color:var(--gold)}.timeline{list-style:none;margin:0;padding:0}.timeline li{display:grid;grid-template-columns:96px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--rule);font-size:.9rem}.timeline li:first-child{border-top:0}.timeline .when{color:var(--muted);font-variant-numeric:tabular-nums}.counters{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:0 26px;margin:0 0 6px}@media(min-width:560px){.counters{grid-template-columns:repeat(4,auto)}}.counter{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:0 2px;border:0;background:transparent;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}.counter .v{font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em}.counter .k{font-size:.85rem;font-weight:500}.counter.overdue .v{color:var(--late)}.counter.on{color:var(--ink);border-bottom-color:var(--gold)}.counter:hover{color:var(--ink)}.area-group{padding-top:22px}.area-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--ink);margin-bottom:2px}.area-title span{font-family:var(--text);font-weight:500;letter-spacing:0}.bucket-head{display:flex;align-items:baseline;gap:10px;padding:14px 0 2px;font-size:.8rem}.visits li{border-top:1px solid var(--rule)}.visits li:first-child{border-top:0}.visit{display:grid;grid-template-columns:58px 1fr;grid-template-areas:"date main" "date actions";gap:6px 12px;padding:12px 0 14px}.visit-date{grid-area:date;display:flex;flex-direction:column;align-items:flex-start;line-height:1;padding-top:2px}.visit-date .day{font-family:var(--display);font-size:1.75rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}.visit-date .mon{font-size:.72rem;color:var(--muted);margin-top:4px;letter-spacing:.02em;line-height:1.25}.visit-date .late{font-size:.72rem;color:var(--late);font-weight:600;margin-top:4px}.visit-date.is-today .day{color:var(--navy)}.visit-date.is-today:after{content:"";display:block;width:22px;height:3px;background:var(--gold);margin-top:6px}.visit-date.is-late .day{color:var(--late)}.visit-main{grid-area:main;min-width:0}.visit-main .title{font-weight:600;text-decoration:none;color:var(--ink);font-size:1.02rem}.visit-main .title:hover{text-decoration:underline;text-underline-offset:3px}.visit-main .sub{color:var(--muted);font-size:.875rem}.visit-main .money{display:flex;gap:14px;flex-wrap:wrap;font-size:.9rem;margin-top:3px}.visit-main .money .owes{color:var(--late);font-weight:600}.visit-main .money .credit{color:var(--credit);font-weight:600}.visit-actions{grid-area:actions;display:flex;gap:10px;align-items:center}.visit-actions .btn.sm{min-height:42px}@media(min-width:700px){.visit{grid-template-columns:64px 1fr auto;grid-template-areas:"date main actions";align-items:center}.visit-actions{justify-content:flex-end}}.tour-backdrop{position:fixed;inset:0;z-index:60}.tour-hole{position:absolute;border-radius:6px;box-shadow:0 0 0 9999px #15192b9e;outline:2px solid var(--gold);transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease;pointer-events:none}.tour-card{position:absolute;background:var(--paper);border-top:3px solid var(--gold);border-radius:6px;padding:18px 20px 16px;width:min(360px,calc(100vw - 32px));box-shadow:0 12px 40px #15192b59}.tour-card h2{font-size:1.15rem;margin-bottom:6px}.tour-card p{color:var(--ink-2);font-size:.95rem}.tour-card .tour-foot{display:flex;align-items:center;gap:8px;margin-top:14px}.tour-card .tour-step{color:var(--muted);font-size:.8rem;flex:1;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:reduce){.tour-hole{transition:none}}:root{--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in: cubic-bezier(.55, 0, 1, .45)}@media(prefers-reduced-motion:no-preference){@keyframes page-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes row-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes rule-in{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes sheet-out{to{opacity:0;transform:translateY(10px)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@keyframes toast-out{to{opacity:0;transform:translate(-50%,6px)}}@keyframes tick{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1)}}@keyframes settle{to{opacity:0;transform:translate(10px);max-height:0;padding-top:0;padding-bottom:0}}@keyframes breathe{0%,to{opacity:1}50%{opacity:.55}}.main.enter>*{animation:page-in .36s var(--ease-out) both}.main.enter>*:nth-child(2){animation-delay:40ms}.main.enter>*:nth-child(3){animation-delay:80ms}.main.enter>*:nth-child(n+4){animation-delay:.12s}.pagehead{position:relative}.main.enter .pagehead{border-bottom-color:transparent}.main.enter .pagehead:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform-origin:left;animation:rule-in .52s var(--ease-out) .12s both}.visits li,.list li,.ledger tr{animation:row-in .32s var(--ease-out) both}.visits li:nth-child(1),.list li:nth-child(1),.ledger tr:nth-child(1){animation-delay:40ms}.visits li:nth-child(2),.list li:nth-child(2),.ledger tr:nth-child(2){animation-delay:70ms}.visits li:nth-child(3),.list li:nth-child(3),.ledger tr:nth-child(3){animation-delay:.1s}.visits li:nth-child(4),.list li:nth-child(4),.ledger tr:nth-child(4){animation-delay:.13s}.visits li:nth-child(5),.list li:nth-child(5),.ledger tr:nth-child(5){animation-delay:.16s}.visits li:nth-child(6),.list li:nth-child(6),.ledger tr:nth-child(6){animation-delay:.19s}.visits li:nth-child(7),.list li:nth-child(7),.ledger tr:nth-child(7){animation-delay:.22s}.visits li:nth-child(8),.list li:nth-child(8),.ledger tr:nth-child(8){animation-delay:.25s}.visits li:nth-child(n+9),.list li:nth-child(n+9),.ledger tr:nth-child(n+9){animation-delay:.28s}.visits li.no-enter,.list li.no-enter,.no-enter .pill,.no-enter .status,.no-enter .visit-date.is-today:after{animation:none}.visits li.settling{animation:settle .36s var(--ease-in) forwards;overflow:hidden;max-height:200px}.visit-date.is-today:after{transform-origin:left;animation:rule-in .48s var(--ease-out) .3s both}.counter{transition:color .16s ease;position:relative;border-bottom-color:transparent}.counter:after{content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease-out)}.counter.on:after{transform:scaleX(1)}.counter.overdue.has-some .v{animation:breathe 2.4s ease-in-out 1.2s 2}.sidenav a:before{transform:scaleY(0);transform-origin:center;transition:transform .22s var(--ease-out)}.sidenav a.active:before{transform:scaleY(1)}.sidenav a{transition:color .16s ease,padding-left .22s var(--ease-out)}.sidenav a:hover{padding-left:18px}.bottomnav a:before{transform:scaleX(0);transition:transform .24s var(--ease-out)}.bottomnav a.active:before{transform:scaleX(1)}.bottomnav a svg{transition:transform .2s var(--ease-out)}.bottomnav a.active svg{transform:translateY(-1px)}.btn{transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease,box-shadow .16s ease}.btn:hover{box-shadow:0 2px 10px #1e264a2e}.btn:active{transform:translateY(1px) scale(.985);box-shadow:none}input,select,textarea{transition:border-color .14s ease,box-shadow .14s ease}.sheet-backdrop{animation:fade-in .18s ease-out both}.sheet{animation:rise .26s var(--ease-out) both}.sheet-backdrop.closing{animation:fade-out .16s ease-in forwards}.sheet-backdrop.closing .sheet{animation:sheet-out .16s var(--ease-in) forwards}.toast{animation:toast-in .24s var(--ease-out) both}.toast.leaving{animation:toast-out .22s var(--ease-in) forwards}.pill,.status{animation:tick .32s var(--ease-out) both}.login-wrap{animation:fade-in .3s ease-out both}.login{animation:page-in .42s var(--ease-out) 80ms both}.login .brand img{animation:tick .46s var(--ease-out) .16s both}.topbar .brand img{transition:transform .24s var(--ease-out)}.topbar .brand:hover img{transform:rotate(-6deg) scale(1.06)}}
