:root{
  --fuchsia:#EC1E79; --fuchsia-bright:#FF2E8B; --fuchsia-deep:#A50E60; --fuchsia-hover:#C40F61;
  --lime:#D8FF4A; --lime-bg:#EAF6C9; --ink:#16151A; --canvas:#F3F0EA;
  --surface:rgba(255,255,255,.72);
  --surface-solid:#fff;
  --line:rgba(22,21,26,.08);
  --muted:rgba(22,21,26,.56);
  --shadow-card:0 18px 42px -30px rgba(60,15,55,.52);
  --shadow-float:0 24px 54px -24px rgba(40,12,36,.48);
  --ease-out:cubic-bezier(.22,.8,.3,1);
  --ease-spring:cubic-bezier(.2,.9,.3,1.08);
  --fast:140ms;
  --normal:220ms;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(140% 90% at 20% 0%,#efe7f0,#e6e2da);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  overflow-x:hidden;
}
a{color:var(--fuchsia);text-decoration:none}
a:hover{color:var(--fuchsia-hover)}
.disp{font-family:'Bricolage Grotesque','Manrope',sans-serif;overflow-wrap:break-word}
.mono{font-family:'Space Mono',ui-monospace,monospace;line-height:1.35}
::-webkit-scrollbar{width:0;height:0;display:none}
.scr-area{scrollbar-width:none;-webkit-overflow-scrolling:touch}
button{font-family:inherit}
input,textarea,select{font-family:inherit;color:var(--ink)}
input::placeholder,textarea::placeholder{color:rgba(22,21,26,.36)}
.visually-hidden{
  position:absolute !important;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@keyframes floaty{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10px,-16px) scale(1.06)}}
@keyframes floaty2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,12px) scale(1.1)}}
@keyframes rise{from{opacity:0;transform:translateY(13px) scale(.985);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes backdropin{from{opacity:0}to{opacity:1}}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes sheetin{0%{opacity:0;transform:translateY(105%) scale(.94);filter:blur(8px)}72%{opacity:1;transform:translateY(-7px) scale(1.006);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes pop{0%{transform:scale(.9);opacity:0}70%{transform:scale(1.015)}100%{transform:scale(1);opacity:1}}
@keyframes ringdraw{from{stroke-dashoffset:289}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes navpop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

/* interactive press feedback — every tappable element responds instantly */
[data-act]{
  transition:transform var(--fast) var(--ease-out),background-color var(--normal) ease,
    border-color var(--normal) ease,box-shadow var(--normal) ease,opacity var(--normal) ease;
  touch-action:manipulation;
}
[data-act]:active{transform:scale(.975)}
[data-press]{transition:transform .15s ease}
[data-press]:active{transform:scale(.92)}
[data-press-sm]:active{transform:scale(.85)}
[data-press-plus]:active{transform:scale(.9) translateY(2px)}
/* don't shrink big containers/backdrops on tap */
[data-act="closeSheet"]:active,[data-stop]:active{transform:none}

/* smooth scrolling inside the app */
.scr-area{scroll-behavior:smooth}

/* shared visual primitives */
.screen-scroll{overscroll-behavior-y:contain}
.screen-view{width:100%;min-width:0}
.phone-screen [style*="flex:1"]{min-width:0}
.phone-screen .mono{font-size:10.5px !important}
.phone-screen [data-act]{user-select:none;-webkit-user-select:none}
.income-total{font-size:clamp(34px,12vw,48px) !important;overflow-wrap:anywhere}
.dialog-backdrop{animation:backdropin var(--normal) ease both}
.sheet-panel{
  overscroll-behavior:contain;
  scrollbar-width:none;
  box-shadow:var(--shadow-float);
  transform-origin:50% 100%;
}
.sheet-panel::before{
  content:"";
  position:sticky;
  top:0;
  display:block;
  height:1px;
}
.dialog-card{transform-origin:50% 55%}
.app-toast{max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.form-control{
  appearance:none;
  min-height:48px;
  transition:border-color var(--fast) ease,box-shadow var(--fast) ease,background-color var(--fast) ease !important;
}
.form-control:focus{
  border-color:var(--fuchsia) !important;
  box-shadow:0 0 0 4px rgba(236,30,121,.1);
}
.primary-action{min-height:52px;display:flex;align-items:center;justify-content:center}
.nav-bar{transition:transform var(--normal) var(--ease-out),box-shadow var(--normal) ease}
.nav-item{min-width:46px;min-height:42px;justify-content:center;border-radius:16px}
.nav-fab{transition:transform var(--fast) var(--ease-spring),box-shadow var(--normal) ease !important}

@media (hover:hover) and (pointer:fine){
  [data-act]:hover{filter:brightness(.985)}
  .primary-action:hover{transform:translateY(-1px);box-shadow:0 20px 38px -15px rgba(236,30,121,.72) !important}
  .nav-fab:hover{transform:translateY(-2px) scale(1.035)}
}

[data-act]:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid rgba(236,30,121,.28);
  outline-offset:3px;
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .scr-area{scroll-behavior:auto}
  .blob-a,.blob-b{display:none}
}

/* Desktop: phone frame */
#root{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative}
.stage{position:relative;flex:none}
.tag-lime,.tag-ink{position:absolute;z-index:5}
/* hide the decorative stickers when there isn't room for them to sit beside the phone */
@media (max-width:900px){.tag-lime,.tag-ink{display:none}}
.tag-lime{top:2px;left:-104px;transform:rotate(-9deg);background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;padding:9px 15px;border-radius:16px 16px 16px 3px;box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.tag-ink{bottom:34px;right:-96px;transform:rotate(6deg);background:var(--ink);color:var(--lime);font-size:10px;font-weight:700;padding:8px 12px;border-radius:12px;letter-spacing:.05em}

.phone{
  position:relative;width:344px;height:730px;flex:none;
  background:linear-gradient(160deg,#1c1a20,#0e0d11);border-radius:58px;padding:12px;
  box-shadow:0 60px 120px -45px rgba(60,15,55,.7),inset 0 1px 2px rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.1);
}
.phone-screen{
  width:100%;height:100%;border-radius:46px;overflow:hidden;position:relative;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 82% -8%,rgba(236,30,121,.18),transparent 52%),radial-gradient(90% 55% at -12% 104%,rgba(216,255,74,.26),transparent 52%),var(--canvas);
  isolation:isolate;
}
.notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#0e0d11;border-radius:16px;z-index:60}

.blob-a{position:absolute;top:-40px;right:-30px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(236,30,121,.35),transparent 70%);filter:blur(20px);animation:floaty 9s ease-in-out infinite;pointer-events:none;z-index:0}
.blob-b{position:absolute;bottom:80px;left:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(216,255,74,.4),transparent 70%);filter:blur(22px);animation:floaty2 11s ease-in-out infinite;pointer-events:none;z-index:0}
.grain{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.05;mix-blend-mode:multiply;pointer-events:none;z-index:1}

.statusbar{display:flex;justify-content:space-between;align-items:center;padding:16px 30px 4px;font:700 13px 'Manrope';flex:none;color:var(--ink);z-index:20;position:relative}
.scr-area{flex:1;overflow-y:auto;position:relative;z-index:10}

/* Mobile / installed: fill screen */
@media (max-width:900px), (display-mode:standalone){
  #root{padding:0;align-items:stretch;justify-content:stretch}
  .tag-lime,.tag-ink{display:none}
  .stage{width:100vw;width:100dvw;height:100dvh;flex:1}
  .phone{width:100vw;width:100dvw;height:100dvh;border-radius:0;padding:0;box-shadow:none}
  .phone-screen{border-radius:0}
  .notch{display:none}
  /* The faux desktop phone status bar must not leak into a real mobile viewport. */
  .statusbar{display:none}
  .navwrap{padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important}
  .sheet-panel{border-radius:30px 30px 0 0 !important;padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important}
  .phone-screen .mono{font-size:11px !important}
}

@media (max-width:360px){
  .statusbar{padding-left:22px;padding-right:22px}
  .navwrap{padding-left:10px !important;padding-right:10px !important}
  .nav-bar{padding-left:16px !important;padding-right:16px !important}
  .sheet-panel{padding-left:18px !important;padding-right:18px !important}
}

/* 2026 visual system — warm editorial surfaces, crisp controls and calmer depth */
:root{
  --fuchsia:#ED176F;
  --fuchsia-bright:#FF4B98;
  --fuchsia-deep:#81104F;
  --fuchsia-hover:#CA0F5B;
  --lime:#DFFF55;
  --lime-bg:#EFFFC0;
  --ink:#1C171C;
  --canvas:#F6F2EC;
  --surface:rgba(255,255,255,.78);
  --line:rgba(43,25,36,.09);
  --muted:rgba(43,25,36,.56);
  --shadow-card:0 14px 38px -28px rgba(61,25,48,.48);
  --shadow-float:0 30px 80px -32px rgba(39,13,30,.6);
}

body{
  background:
    radial-gradient(800px 620px at 12% 0%,rgba(237,23,111,.12),transparent 62%),
    radial-gradient(700px 520px at 95% 100%,rgba(223,255,85,.19),transparent 58%),
    #e9e5df;
}

#root::before,
#root::after{
  content:"";
  position:fixed;
  pointer-events:none;
  border-radius:999px;
  filter:blur(1px);
}
#root::before{
  width:280px;height:280px;left:max(24px,calc(50% - 540px));top:15%;
  border:1px solid rgba(237,23,111,.16);
  box-shadow:inset 0 0 80px rgba(237,23,111,.05);
}
#root::after{
  width:180px;height:180px;right:max(30px,calc(50% - 500px));bottom:12%;
  background:rgba(223,255,85,.28);
  transform:rotate(18deg);
  border-radius:54px;
}

.phone{
  width:390px;
  height:min(840px,calc(100dvh - 44px));
  min-height:720px;
  padding:10px;
  border-radius:50px;
  background:linear-gradient(145deg,#282229,#0d0b0e 76%);
  box-shadow:
    0 55px 120px -48px rgba(66,14,48,.68),
    0 12px 32px -20px rgba(22,8,16,.75),
    inset 0 1px 1px rgba(255,255,255,.2);
}
.phone-screen{
  border-radius:40px;
  background:
    radial-gradient(100% 56% at 108% -8%,rgba(237,23,111,.15),transparent 60%),
    radial-gradient(96% 54% at -16% 105%,rgba(223,255,85,.22),transparent 60%),
    var(--canvas);
}
.notch{
  top:16px;
  width:98px;
  height:27px;
  background:#0d0b0e;
}
.statusbar{padding:17px 29px 5px;font-size:12px}
.grain{opacity:.032}
.blob-a{opacity:.58}
.blob-b{opacity:.5}

.tag-lime{
  top:42px;
  left:-124px;
  padding:10px 15px;
  border-radius:18px 18px 5px 18px;
  background:var(--lime);
  letter-spacing:-.02em;
}
.tag-ink{
  right:-120px;
  bottom:76px;
  padding:10px 14px;
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

/* The app content keeps its density, while gaining room and a stronger hierarchy. */
.screen-view[data-screen] > div[style*="padding:8px 22px 30px"]{
  padding-left:24px !important;
  padding-right:24px !important;
}
.screen-view .disp{font-variation-settings:"wdth" 92}
.screen-view [style*="border-radius:20px"][style*="background:rgba(255,255,255"]{
  border-color:rgba(255,255,255,.9) !important;
  box-shadow:var(--shadow-card);
}
.screen-view [style*="border-radius:30px"][style*="background:rgba(255,255,255"]{
  box-shadow:0 24px 58px -36px rgba(62,22,49,.58) !important;
}
.screen-view [data-act][style*="background:#EC1E79"],
.screen-view [data-act][style*="background:#ED176F"]{
  background:linear-gradient(145deg,var(--fuchsia-bright),var(--fuchsia-deep)) !important;
}

.navwrap{padding:0 18px 18px !important}
.nav-bar{
  padding:10px 20px !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(255,255,255,.96) !important;
  box-shadow:0 20px 54px -28px rgba(44,15,35,.62) !important;
}
.nav-item{position:relative;gap:4px !important;min-width:48px;min-height:46px}
.nav-item::after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  left:50%;bottom:-8px;
  border-radius:50%;
  background:currentColor;
  transform:translateX(-50%) scale(0);
  opacity:0;
  transition:.2s var(--ease-out);
}
.nav-item[style*="color:#EC1E79"]::after{transform:translateX(-50%) scale(1);opacity:1}
.nav-fab{
  position:relative;
  width:54px !important;height:54px !important;
  border:4px solid rgba(255,255,255,.88);
  background:linear-gradient(145deg,var(--fuchsia-bright),var(--fuchsia-deep)) !important;
  box-shadow:0 16px 30px -10px rgba(167,12,85,.72) !important;
}

.form-control{
  min-height:51px;
  border:1px solid rgba(43,25,36,.1) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 8px 24px -22px rgba(48,18,38,.55);
}
.form-control:focus{
  background:#fff !important;
  border-color:rgba(237,23,111,.65) !important;
  box-shadow:0 0 0 4px rgba(237,23,111,.1),0 14px 28px -24px rgba(81,18,57,.6);
}
.primary-action{
  border-radius:17px !important;
  background:linear-gradient(135deg,var(--fuchsia-bright),var(--fuchsia-deep)) !important;
  box-shadow:0 18px 38px -18px rgba(191,9,91,.7) !important;
}
.sheet-backdrop{background:rgba(28,10,22,.5) !important;backdrop-filter:blur(8px) !important}
.sheet-panel{
  position:relative;
  padding:10px 24px 34px !important;
  border:1px solid rgba(255,255,255,.68);
  background:
    radial-gradient(90% 40% at 92% 0%,rgba(237,23,111,.1),transparent 66%),
    #f8f5f0 !important;
  box-shadow:0 -18px 80px -28px rgba(36,12,28,.62);
}
.sheet-close{
  position:sticky;
  z-index:4;
  top:8px;
  margin:-9px 0 -31px auto;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(43,25,36,.08);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  color:rgba(28,23,28,.64);
  box-shadow:0 10px 26px -20px rgba(48,18,38,.7);
  backdrop-filter:blur(12px);
  font:400 23px/1 Manrope;
  cursor:pointer;
}
.sheet-panel > .disp:first-of-type{padding-right:48px}
.sheet-panel [style*="overflow-x:auto"]{
  scroll-snap-type:x proximity;
  padding-bottom:9px !important;
}
.sheet-panel [style*="overflow-x:auto"] > [data-act]{scroll-snap-align:start}
.sheet-panel .mono[style*="text-transform:uppercase"],
.sheet-panel .mono[style*="letter-spacing:.06em"]{
  font-size:10.5px !important;
  color:rgba(28,23,28,.54) !important;
}
.dialog-card{
  border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(20px);
}
.app-toast{border:1px solid rgba(255,255,255,.12)}
.update-banner{
  position:absolute;
  z-index:92;
  left:16px;
  right:16px;
  bottom:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 14px 17px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(28,23,28,.96);
  color:#fff;
  box-shadow:0 24px 54px -24px rgba(20,8,16,.8);
  backdrop-filter:blur(18px);
  animation:rise .22s var(--ease-out) both;
}
.update-banner b{display:block;font:750 12px/1.25 Manrope}
.update-banner span{display:block;margin-top:3px;color:rgba(255,255,255,.55);font:550 9px/1.25 Manrope}
.update-banner-actions{display:flex;align-items:center;gap:6px;flex:none}
.update-banner-actions [data-act]{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 11px;
  border-radius:13px;
  color:rgba(255,255,255,.58);
  font:700 10px/1 Manrope;
  cursor:pointer;
}
.update-banner-actions [data-act="applyUpdate"]{background:var(--lime);color:var(--ink)}

/* Comfortable touch targets for compact calendar and stepper controls. */
[data-act][style*="width:30px;height:30px"],
[data-act][style*="width:34px;height:34px"],
[data-act][style*="width:26px;height:26px"]{
  min-width:42px !important;
  min-height:42px !important;
}
[data-act^="incMode:"],
[data-act="openSheet:auto"],
[data-act="openSheet:addClient"],
.home-next-card [data-act]{
  min-height:44px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}
.home-shell [data-act="go:calendar"],
.home-shell [data-act="go:clients"]{
  min-width:42px;
  min-height:42px;
  display:flex;
  align-items:center;
}
[data-act][aria-disabled="true"]{cursor:default !important}
[data-act][aria-disabled="true"]:active{transform:none}
.scr-area{overflow-x:hidden}
.screen-view{overflow-x:clip}
.profile-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px !important;
}
.profile-stat{
  min-width:0;
  padding-right:7px;
  border-right:1px solid rgba(255,255,255,.16);
}
.profile-stat:last-child{padding-right:0;border-right:0}
.profile-stat .mono{font-size:8.5px !important;line-height:1.25;overflow-wrap:normal}

/* Onboarding */
.onb-header{padding:24px 24px 0}
.onb-topline{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.onb-back{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:13px;
  border:1px solid rgba(43,25,36,.07);
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 24px -20px rgba(48,18,38,.6);
  font:400 22px/1 Manrope;
  cursor:pointer;
}
.onb-counter{
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  color:rgba(43,25,36,.46);
  text-transform:uppercase;
}
.onb-dots{display:flex;gap:6px;margin:0 0 25px}
.onb-dot{
  width:18px;height:4px;
  border-radius:3px;
  background:rgba(43,25,36,.11);
  transition:all .22s var(--ease-out);
}
.onb-dot.is-active{width:40px;background:var(--fuchsia)}
.onb-title{
  max-width:290px;
  font-size:34px;
  font-weight:750;
  letter-spacing:-.045em;
  color:var(--ink);
  line-height:.98;
}
.onb-subtitle{
  max-width:310px;
  margin-top:11px;
  color:var(--muted);
  font:500 14px/1.55 Manrope;
}

.onb-welcome{
  min-height:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:30px 26px 24px;
  color:#fff;
  background:
    linear-gradient(145deg,rgba(255,255,255,.04),transparent 44%),
    #21111c;
  isolation:isolate;
}
.onb-welcome::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M72 0H0v72' fill='none' stroke='%23fff' stroke-opacity='.28'/%3E%3C/svg%3E");
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}
.onb-welcome::after{
  content:"";
  position:absolute;
  width:130px;height:130px;
  right:-44px;top:154px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 56px rgba(255,255,255,.018);
}
.onb-aurora{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(48px);
  pointer-events:none;
}
.onb-aurora-a{
  width:270px;height:270px;
  top:-100px;right:-100px;
  background:rgba(244,26,124,.58);
}
.onb-aurora-b{
  width:210px;height:210px;
  left:-110px;bottom:70px;
  background:rgba(223,255,85,.17);
}
.onb-welcome-top{display:flex;align-items:center;justify-content:space-between;position:relative}
.onb-brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:750;letter-spacing:-.04em}
.onb-logo{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.onb-logo span{display:block;width:13px;height:13px;border-radius:4px;background:var(--lime);transform:rotate(8deg)}
.onb-year{font-size:7.5px;letter-spacing:.13em;color:rgba(255,255,255,.46)}
.onb-welcome-main{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:50px 0 32px;
}
.onb-kicker{
  display:flex;align-items:center;gap:8px;
  margin-bottom:20px;
  color:rgba(255,255,255,.68);
  font:700 9px/1 'Space Mono',monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.onb-kicker span{width:20px;height:2px;border-radius:2px;background:var(--lime)}
.onb-welcome-title{
  position:relative;
  font-size:43px;
  font-weight:720;
  letter-spacing:-.058em;
  line-height:.91;
}
.onb-welcome-title em{color:var(--lime);font-style:normal}
.onb-welcome-copy{
  max-width:305px;
  margin-top:22px;
  color:rgba(255,255,255,.7);
  font:500 14px/1.55 Manrope;
}
.onb-benefits{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.onb-benefits span{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.78);
  font:650 9px/1 Manrope;
}
.onb-welcome-footer{position:relative}
.onb-proof{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
  color:rgba(255,255,255,.48);
  font:600 9px/1.3 Manrope;
}
.onb-proof-mark{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  color:var(--lime);
  font:700 8px/1 'Space Mono',monospace;
}
.onb-start{
  min-height:58px;
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 8px 7px 20px;
  border-radius:18px;
  background:var(--lime);
  color:var(--ink);
  box-shadow:0 22px 46px -23px rgba(223,255,85,.7);
  font:800 14px/1 Manrope;
  cursor:pointer;
}
.onb-start b{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:13px;
  background:var(--ink);
  color:#fff;
  font:500 18px/1 Manrope;
}

@media (max-width:900px), (display-mode:standalone){
  #root::before,#root::after{display:none}
  .phone{width:100dvw;height:100dvh;min-height:0;border-radius:0;padding:0}
  .phone-screen{border-radius:0}
  .onb-welcome{padding-top:calc(27px + env(safe-area-inset-top));padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .navwrap{padding-bottom:calc(15px + env(safe-area-inset-bottom)) !important}
}

@media (max-height:720px){
  .onb-welcome-main{padding-top:32px;padding-bottom:22px}
  .onb-welcome-title{font-size:39px}
  .onb-benefits{margin-top:16px}
  .onb-welcome-copy{margin-top:17px}
}

/* Behance-grade art direction pass */
@keyframes sheen{
  0%{transform:translateX(-130%) skewX(-20deg)}
  55%,100%{transform:translateX(330%) skewX(-20deg)}
}
@keyframes orbit{
  to{transform:rotate(360deg)}
}
@keyframes card-breathe{
  0%,100%{transform:rotate(-1.5deg) translateY(0)}
  50%{transform:rotate(-.4deg) translateY(-4px)}
}

.phone-screen::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
}

.onb-welcome{
  background:
    radial-gradient(90% 62% at 94% 4%,rgba(238,15,113,.3),transparent 58%),
    radial-gradient(80% 44% at 0% 88%,rgba(223,255,85,.1),transparent 70%),
    linear-gradient(155deg,#27131f 0%,#180d15 66%,#21151b 100%);
}
.onb-welcome-top::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-22px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.18),transparent);
}
.onb-welcome-main{
  justify-content:flex-start;
  padding:62px 0 20px;
}
.onb-welcome-title{
  max-width:440px;
  font-size:clamp(40px,9.3vw,47px);
  line-height:.9;
  text-wrap:balance;
}
.onb-welcome-title em{
  position:relative;
  display:inline-block;
  text-shadow:0 0 28px rgba(223,255,85,.14);
}
.onb-welcome-title em::after{
  content:"";
  position:absolute;
  left:3px;right:0;bottom:-8px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--lime),transparent 88%);
}
.onb-benefits span:first-child{
  color:var(--ink);
  border-color:var(--lime);
  background:var(--lime);
}
.onb-showcase{
  position:relative;
  margin-top:26px;
  padding:14px 14px 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),
    rgba(255,255,255,.025);
  box-shadow:0 30px 50px -30px rgba(0,0,0,.7);
  backdrop-filter:blur(20px) saturate(1.2);
  transform-origin:50% 50%;
  animation:card-breathe 7s ease-in-out infinite;
}
.onb-showcase::before{
  content:"";
  position:absolute;
  top:-50px;right:-26px;
  width:105px;height:105px;
  border:20px solid rgba(237,23,111,.18);
  border-radius:50%;
}
.onb-showcase::after{
  content:"";
  position:absolute;
  top:-20%;bottom:-20%;
  width:34px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  animation:sheen 5.5s 1.2s ease-in-out infinite;
}
.onb-showcase-head{
  position:relative;
  z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.onb-showcase-head span{
  color:var(--lime);
  font-size:7.5px;
  font-weight:700;
  letter-spacing:.13em;
}
.onb-showcase-head b{color:rgba(255,255,255,.35);font:700 9px/1 Manrope;letter-spacing:2px}
.onb-showcase-row{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:43px 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 0 10px;
}
.onb-showcase-time{font:750 14px/1 'Bricolage Grotesque',sans-serif;color:#fff}
.onb-showcase-client{display:flex;align-items:center;gap:8px;min-width:0}
.onb-showcase-client i{
  width:30px;height:30px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:linear-gradient(145deg,#ff4797,#8c124f);
  color:#fff;
  font:800 8px/1 Manrope;
  font-style:normal;
}
.onb-showcase-client span{display:flex;flex-direction:column;min-width:0}
.onb-showcase-client b{font:750 10px/1.2 Manrope;color:#fff}
.onb-showcase-client small{
  overflow:hidden;
  margin-top:3px;
  color:rgba(255,255,255,.48);
  font:600 7.5px/1.2 Manrope;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.onb-showcase-row strong{color:var(--lime);font:750 11px/1 Manrope;white-space:nowrap}
.onb-showcase-foot{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  color:rgba(255,255,255,.5);
  font:650 8px/1 Manrope;
}
.onb-showcase-foot span{display:flex;align-items:center;gap:5px}
.onb-showcase-foot i{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.onb-start{position:relative;overflow:hidden}
.onb-start::before{
  content:"";
  position:absolute;
  top:-20%;bottom:-20%;
  width:42px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:sheen 4.8s 2.4s ease-in-out infinite;
}
.onb-start > *{position:relative;z-index:1}

/* Dashboard: high-contrast editorial rhythm */
.home-shell{position:relative}
.home-shell::before{
  content:"01";
  position:absolute;
  z-index:-1;
  right:15px;
  top:44px;
  color:rgba(237,23,111,.055);
  font:800 112px/.8 'Bricolage Grotesque',sans-serif;
  letter-spacing:-.08em;
}
.home-topbar .mono{
  display:flex;
  align-items:center;
  gap:8px;
}
.home-topbar .mono::before{
  content:"";
  width:18px;height:2px;
  background:var(--fuchsia);
  border-radius:2px;
}
.home-greeting{
  max-width:330px;
  font-size:46px !important;
  letter-spacing:-.058em !important;
}
.home-greeting span{
  display:inline-block;
  background:linear-gradient(110deg,var(--fuchsia-bright),var(--fuchsia-deep));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  font-style:normal !important;
}
.home-overview{
  overflow:hidden;
  isolation:isolate;
  border-radius:26px !important;
  background:
    radial-gradient(95% 130% at 110% 0%,rgba(237,23,111,.14),transparent 60%),
    rgba(255,255,255,.72) !important;
  box-shadow:0 28px 60px -40px rgba(76,16,54,.72) !important;
}
.home-overview::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:110px;height:110px;
  top:-62px;right:-48px;
  border:18px solid rgba(237,23,111,.1);
  border-radius:50%;
}
.home-overview::after{
  content:"LIVE";
  position:absolute;
  right:16px;bottom:10px;
  color:rgba(237,23,111,.28);
  font:700 7px/1 'Space Mono',monospace;
  letter-spacing:.16em;
}
.start-guide{
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(90% 140% at 100% 0%,rgba(223,255,85,.13),transparent 55%),
    linear-gradient(145deg,#251921,#100c0f) !important;
}
.home-next-card{
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(100% 130% at 100% 0%,rgba(223,255,85,.26),transparent 52%),
    linear-gradient(145deg,#f51a78,#81104f) !important;
  box-shadow:0 28px 56px -34px rgba(145,4,73,.85);
}
.quick-actions{gap:9px}
.quick-action{flex:1;min-width:0}
.quick-action-icon{
  width:100% !important;
  max-width:69px;
  height:60px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.76) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 18px 36px -28px rgba(50,15,38,.6) !important;
}
.quick-action.is-primary .quick-action-icon{
  background:linear-gradient(145deg,#2a2027,#110d10) !important;
  border-color:rgba(255,255,255,.05) !important;
}
.quick-action:nth-child(2) .quick-action-icon{transform:rotate(1.8deg)}
.quick-action:nth-child(3) .quick-action-icon{transform:rotate(-1.4deg)}
.quick-action:nth-child(4) .quick-action-icon{transform:rotate(1deg)}

/* Every list/detail screen gets a refined, poster-like canvas. */
.screen-view[data-screen]:not([data-screen="profile"]){
  position:relative;
  isolation:isolate;
}
.screen-view[data-screen]:not([data-screen="profile"])::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:82px;right:-42px;
  width:140px;height:140px;
  border:1px solid rgba(237,23,111,.075);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(237,23,111,.025),0 0 0 56px rgba(237,23,111,.016);
}
.screen-view[data-screen="calendar"] > div > div:first-child,
.screen-view[data-screen="clients"] > div > div:first-child,
.screen-view[data-screen="services"] > div > div:first-child{
  position:relative;
  padding-top:10px !important;
}
.screen-view[data-screen="clients"] [data-act^="openClient"],
.screen-view[data-screen="services"] [data-act^="editService"]{
  border:1px solid rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.73) !important;
  box-shadow:0 18px 42px -34px rgba(60,15,45,.62) !important;
}
.screen-view[data-screen="income"] > div > div[style*="background:linear-gradient"],
.screen-view[data-screen="profile"] > div > div:first-child{
  background:
    radial-gradient(110% 150% at 110% -20%,rgba(223,255,85,.28),transparent 52%),
    linear-gradient(150deg,#f11c78,#81104f) !important;
}

.nav-bar{
  position:relative;
  overflow:visible;
  background:rgba(255,255,255,.84) !important;
  box-shadow:
    0 24px 52px -30px rgba(51,15,40,.7),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.nav-bar::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:5px;
  border-radius:21px;
  background:linear-gradient(110deg,rgba(237,23,111,.025),rgba(223,255,85,.055));
}
.nav-fab::after{
  content:"";
  position:absolute;
  inset:-8px;
  border:1px solid rgba(237,23,111,.18);
  border-radius:50%;
}

@media (hover:hover) and (pointer:fine){
  .quick-action:hover .quick-action-icon{transform:translateY(-3px) rotate(0)}
  .onb-start:hover{transform:translateY(-2px);box-shadow:0 26px 52px -20px rgba(223,255,85,.58)}
}

@media (max-width:900px), (display-mode:standalone){
  .onb-welcome-main{padding-top:52px}
  .phone-screen::after{display:none}
}

@media (max-height:820px){
  .onb-welcome-main{padding-top:38px}
  .onb-showcase{margin-top:18px;padding-top:11px;padding-bottom:10px}
  .onb-showcase-row{padding:9px 0 8px}
  .onb-welcome-copy{margin-top:17px}
  .onb-benefits{margin-top:15px}
  .onb-welcome-footer .onb-proof{margin-bottom:10px}
}

@media (max-height:700px){
  .onb-showcase{display:none}
  .onb-welcome-main{padding-top:30px}
}

/* Mobile motion system ----------------------------------------------------- */
@keyframes screen-in-forward{
  0%{opacity:0;transform:translate3d(34px,8px,0) scale(.965);filter:blur(7px)}
  62%{opacity:1;transform:translate3d(-3px,0,0) scale(1.004);filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes screen-in-back{
  0%{opacity:0;transform:translate3d(-30px,5px,0) scale(.975);filter:blur(6px)}
  68%{opacity:1;transform:translate3d(3px,0,0) scale(1.003);filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes list-item-in{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.97)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes active-nav-pop{
  0%{transform:translateY(5px) scale(.72) rotate(-8deg)}
  58%{transform:translateY(-3px) scale(1.14) rotate(3deg)}
  100%{transform:translateY(0) scale(1) rotate(0)}
}
@keyframes fab-aura{
  0%,100%{transform:scale(.86);opacity:.18}
  50%{transform:scale(1.16);opacity:.48}
}
@keyframes toast-spring{
  0%{opacity:0;transform:translate(-50%,24px) scale(.78)}
  64%{opacity:1;transform:translate(-50%,-5px) scale(1.035)}
  100%{opacity:1;transform:translate(-50%,0) scale(1)}
}

.screen-view.screen-enter-forward{
  transform-origin:50% 35%;
  animation:screen-in-forward .46s cubic-bezier(.18,.82,.24,1) both;
  will-change:transform,opacity,filter;
}
.screen-view.screen-enter-back{
  transform-origin:50% 35%;
  animation:screen-in-back .42s cubic-bezier(.18,.82,.24,1) both;
  will-change:transform,opacity,filter;
}
.screen-enter-forward [data-act^="openClient"],
.screen-enter-forward [data-act^="editService"]{
  animation:list-item-in .44s cubic-bezier(.2,.8,.25,1) both;
}
.screen-enter-forward [data-act^="openClient"]:nth-child(2),
.screen-enter-forward [data-act^="editService"]:nth-child(2){animation-delay:35ms}
.screen-enter-forward [data-act^="openClient"]:nth-child(3),
.screen-enter-forward [data-act^="editService"]:nth-child(3){animation-delay:70ms}
.screen-enter-forward [data-act^="openClient"]:nth-child(4),
.screen-enter-forward [data-act^="editService"]:nth-child(4){animation-delay:105ms}

.nav-item svg{transform-origin:50% 65%;transition:transform .24s var(--ease-spring),filter .24s ease}
.nav-item[style*="color:#EC1E79"] svg{
  animation:active-nav-pop .44s cubic-bezier(.2,.9,.25,1.18) both;
  filter:drop-shadow(0 5px 8px rgba(236,30,121,.28));
}
.nav-item:active svg{transform:scale(.76) translateY(2px)}
.nav-fab::after{animation:fab-aura 2.8s ease-in-out infinite}
.nav-fab:active{transform:translateY(4px) scale(.86) rotate(45deg) !important}

.sheet-panel{
  will-change:transform;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.sheet-panel > div:first-child{
  transition:width .22s ease,background-color .22s ease,transform .22s ease;
}
.sheet-panel:active > div:first-child{
  width:64px !important;
  background:rgba(237,23,111,.35) !important;
  transform:scaleY(1.15);
}
.dialog-card{animation:pop .34s cubic-bezier(.16,.88,.24,1.12) !important}
.app-toast{animation:toast-spring .38s cubic-bezier(.18,.9,.24,1.12) both !important}

.primary-action{position:relative;overflow:hidden;isolation:isolate}
.primary-action::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -35%;
  width:28%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  transition:transform .58s cubic-bezier(.2,.8,.25,1);
  pointer-events:none;
}
.primary-action:active::after{transform:translateX(520%) skewX(-20deg)}

@media (max-width:900px), (display-mode:standalone){
  .screen-view.screen-enter-forward{animation-duration:.4s}
  .screen-view.screen-enter-back{animation-duration:.36s}
  .sheet-panel{border-radius:32px 32px 0 0 !important}
}