:root{
  --content-max:900px;
  --sidebar-width:280px;
  --topbar-height:72px;
  --surface-soft:rgba(15,23,42,.04);
  --surface-hover:rgba(15,23,42,.08);
  --surface-active:rgba(15,23,42,.14);
  --underline-subtle:rgba(15,23,42,.35);
  --app-bg:#f8fafc;
  --app-border:#dbe3ef;
  --app-text:#0f172a;
  --app-muted:#64748b;
  --app-panel:#ffffff;
  --app-panel-soft:#f8fbff;
  --app-panel-raised:#ffffff;
  --app-input-bg:#ffffff;
  --app-input-border:#cbd5e1;
  --app-link:#0b61df;
  --app-card-border:#dbe3ef;
  --app-card-ink:#0b1538;
  --app-card-muted:#43506d;
}
*,
*::before,
*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--app-bg);color:var(--app-text)}
img,svg,video,canvas{max-width:100%;height:auto}
[data-app-theme="dark"]{
  color-scheme:dark;
  --app-bg:#0f172a;
  --app-border:#334155;
  --app-text:#e5edf8;
  --app-muted:#a8b3c7;
  --app-panel:#172033;
  --app-panel-soft:#1d2940;
  --app-panel-raised:#1b263b;
  --app-input-bg:#111c2f;
  --app-input-border:#42526d;
  --app-link:#8fb9ff;
  --app-card-border:#334155;
  --app-card-ink:#edf4ff;
  --app-card-muted:#a8b3c7;
  --surface-soft:rgba(148,163,184,.12);
  --surface-hover:rgba(148,163,184,.18);
  --surface-active:rgba(96,165,250,.22);
}
main{max-width:var(--content-max);margin:2rem auto}
main.container{padding-left:1rem;padding-right:1rem}
body:not(:has(.app-shell)){
  --public-bg:#f6f9fc;
  --public-surface:#ffffff;
  --public-surface-soft:#f8fbff;
  --public-border:#dbe3ef;
  --public-ink:#0b1538;
  --public-muted:#43506d;
  --public-blue:#0b61df;
  --public-blue-soft:#eaf2ff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 42%,#f5f9ff 76%,#fff 100%);
  color:var(--public-ink);
}
body:not(:has(.app-shell)) > header.container,
body:not(:has(.app-shell)) > footer.container{
  flex:0 0 auto;
}
body:not(:has(.app-shell)) > .public-site-header{
  flex:0 0 auto;
}
body:not(:has(.app-shell)) .public-site-header{
  width:100%;
  border-bottom:1px solid var(--public-border);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
}
body:not(:has(.app-shell)) .public-site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  max-width:1320px;
  min-height:58px;
  margin:0 auto;
  padding:0 1rem;
}
body:not(:has(.app-shell)) .public-header-brand{
  display:inline-flex;
  align-items:center;
  gap:.58rem;
  margin:0;
  color:var(--public-ink);
  font-size:1rem;
  font-weight:750;
  text-decoration:none;
  letter-spacing:0;
}
body:not(:has(.app-shell)) .public-header-brand:hover{
  color:var(--public-ink);
  text-decoration:none;
}
body:not(:has(.app-shell)) .public-header-brand .logo{
  width:auto;
  height:34px;
  flex:0 0 auto;
  object-fit:contain;
}
body:not(:has(.app-shell)) .public-header-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.36rem;
  margin:0;
}
body:not(:has(.app-shell)) .public-header-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.44rem .68rem;
  border-radius:9px;
  color:var(--public-ink);
  font-size:.76rem;
  font-weight:650;
  text-decoration:none;
}
body:not(:has(.app-shell)) .public-header-links a:hover,
body:not(:has(.app-shell)) .public-header-links a.active{
  background:var(--public-blue-soft);
  color:var(--public-blue);
  text-decoration:none;
}
body:not(:has(.app-shell)) header.container{
  max-width:1320px;
  margin:0 auto;
  padding:0 1rem !important;
}
body:not(:has(.app-shell)) .public-header-container{
  max-width:1320px;
}
body:not(:has(.app-shell)) header.container nav{
  position:relative;
  z-index:0;
  isolation:isolate;
  min-height:58px;
  padding:.42rem 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:blur(14px);
}
body:not(:has(.app-shell)) header.container nav::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  border-bottom:1px solid var(--public-border);
  background:rgba(255,255,255,.82);
}
body:not(:has(.app-shell)) header.container nav > *{
  position:relative;
  z-index:1;
}
body:not(:has(.app-shell)) header .brand{
  gap:.58rem;
  color:var(--public-ink);
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.02em;
}
body:not(:has(.app-shell)) header .logo{
  height:34px;
  width:auto;
  flex:0 0 auto;
  object-fit:contain;
  padding:0;
}
body:not(:has(.app-shell)) .nav-menu > ul{
  gap:.36rem;
  align-items:center;
}
body:not(:has(.app-shell)) .nav-menu a{
  border-radius:9px;
  color:var(--public-ink);
  font-size:.76rem;
  font-weight:600;
}
body:not(:has(.app-shell)) .nav-menu a:hover,
body:not(:has(.app-shell)) .nav-menu a.active{
  background:var(--public-blue-soft);
  color:var(--public-blue);
}
body:not(:has(.app-shell)) .public-login-link{
  margin-left:.25rem;
  padding:.48rem .76rem;
  border:1px solid #b8d5ff;
  background:rgba(255,255,255,.72);
  color:#0b61df !important;
}
body:not(:has(.app-shell)) .public-start-link{
  padding:.48rem .76rem;
  border:1px solid #1268f3;
  background:#1268f3;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(18,104,243,.18);
}
body:not(:has(.app-shell)) .public-start-link:hover,
body:not(:has(.app-shell)) .public-start-link.active{
  background:#0757d8;
  color:#fff !important;
}
body:not(:has(.app-shell)) main.container{
  max-width:1320px;
  width:100%;
  flex:1 0 auto;
  margin:0 auto;
  padding:0 1rem;
}
body:not(:has(.app-shell)) main.container:has([data-testid="login-container"]),
body:not(:has(.app-shell)) main.container:has([data-testid="billing-container"]),
body:not(:has(.app-shell)) main.container:has(> form),
body:not(:has(.app-shell)) main.container:has(> section > form){
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:1.25rem;
  padding-bottom:1.25rem;
}
body:not(:has(.app-shell)) h1,
body:not(:has(.app-shell)) h2,
body:not(:has(.app-shell)) h3{
  color:var(--public-ink);
  letter-spacing:-.025em;
}
body:not(:has(.app-shell)) .muted{
  color:var(--public-muted);
}
body:not(:has(.app-shell)) .hero{
  position:relative;
  overflow:visible;
  padding:3.2rem 0 2.65rem;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body:not(:has(.app-shell)) .hero::after{
  content:none;
}
body:not(:has(.app-shell)) .hero > *{
  position:relative;
  z-index:1;
}
body:not(:has(.app-shell)) .hero-eyebrow{
  display:inline-flex;
  padding:.22rem .5rem;
  border:1px solid #b8d5ff;
  border-radius:999px;
  background:var(--public-blue-soft);
  color:#0748a6;
  font-size:.74rem;
  font-weight:600;
}
body:not(:has(.app-shell)) .hero h1{
  max-width:560px;
  margin:.64rem 0 .78rem;
  font-size:clamp(2.2rem,4.1vw,3.55rem);
  line-height:1.04;
}
body:not(:has(.app-shell)) .hero-subtitle{
  max-width:540px;
  color:var(--public-muted);
  font-size:.92rem;
  line-height:1.48;
}
body:not(:has(.app-shell)) .hero-cta-row{
  margin-top:1rem;
}
body:not(:has(.app-shell)) a[role="button"],
body:not(:has(.app-shell)) button{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.54rem .82rem;
  border-radius:10px;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:-.01em;
  box-shadow:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease,color .16s ease;
}
body:not(:has(.app-shell)) a[role="button"].primary,
body:not(:has(.app-shell)) button[type="submit"]{
  border-color:#0b61df;
  background:linear-gradient(135deg,#0b61df,#1d72ff);
  color:#fff;
  box-shadow:0 14px 28px rgba(11,97,223,.22);
}
body:not(:has(.app-shell)) a[role="button"].secondary{
  border-color:#b8d5ff;
  background:rgba(255,255,255,.74);
  color:#0b61df;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
body:not(:has(.app-shell)) a[role="button"]:hover,
body:not(:has(.app-shell)) button:hover{
  transform:translateY(-1px);
}
body:not(:has(.app-shell)) a[role="button"].primary:hover,
body:not(:has(.app-shell)) button[type="submit"]:hover{
  background:linear-gradient(135deg,#0757d8,#1768f2);
  box-shadow:0 18px 34px rgba(11,97,223,.26);
}
body:not(:has(.app-shell)) a[role="button"].secondary:hover{
  border-color:#8bbcff;
  background:#f8fbff;
  color:#0748a6;
}
body:not(:has(.app-shell)) .hero-trust-row{
  gap:.45rem;
  margin-top:1rem;
}
body:not(:has(.app-shell)) .hero-trust-item{
  padding:.28rem .48rem;
  border:1px solid var(--public-border);
  border-radius:999px;
  background:#fff;
  color:var(--public-muted);
  font-size:.76rem;
  font-weight:600;
}
body:not(:has(.app-shell)) .section{
  margin-top:1rem;
}
body:not(:has(.app-shell)) .section > h2{
  margin-bottom:.65rem;
  font-size:1.3rem;
}
body:not(:has(.app-shell)) .card,
body:not(:has(.app-shell)) .feature-card,
body:not(:has(.app-shell)) .help-box,
body:not(:has(.app-shell)) main.container > form,
body:not(:has(.app-shell)) [data-testid="login-container"]{
  border:1px solid var(--public-border);
  border-radius:16px;
  background:var(--public-surface);
  color:var(--public-ink);
  box-shadow:0 12px 34px rgba(15,23,42,.06);
}
body:not(:has(.app-shell)) .card,
body:not(:has(.app-shell)) .feature-card{
  padding:.82rem;
}
body:not(:has(.app-shell)) .how-step-title{
  color:var(--public-ink);
  font-size:.94rem;
}
body:not(:has(.app-shell)) .how-step-text,
body:not(:has(.app-shell)) .feature-card p{
  font-size:.78rem;
  line-height:1.36;
}
body:not(:has(.app-shell)) .how-step-text,
body:not(:has(.app-shell)) .feature-card p{
  color:var(--public-muted);
}
body:not(:has(.app-shell)) main.container > form,
body:not(:has(.app-shell)) [data-testid="login-container"]{
  max-width:420px;
  margin:0 auto;
  padding:.9rem;
  border-radius:14px;
}
body:not(:has(.app-shell)) .forgot-password-link{
  margin:.15rem 0 0;
  text-align:center;
  font-size:.8rem;
}
body:not(:has(.app-shell)) .forgot-password-link a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.22rem .35rem;
  border-radius:8px;
  color:var(--public-blue);
  font-weight:600;
  text-decoration:none;
}
body:not(:has(.app-shell)) .forgot-password-link a:hover{
  background:var(--public-blue-soft);
  color:#0748a6;
  text-decoration:none;
}
body:not(:has(.app-shell)) [data-testid="login-container"] form{
  margin-bottom:.55rem;
}
body:not(:has(.app-shell)) main.container > h2,
body:not(:has(.app-shell)) [data-testid="login-title"]{
  max-width:420px;
  margin:.1rem auto .28rem;
  font-size:1.35rem;
}
body:not(:has(.app-shell)) main.container > h2 + .muted{
  max-width:420px;
  margin:.15rem auto .55rem;
  font-size:.82rem;
  line-height:1.36;
}
body:not(:has(.app-shell)) label{
  color:var(--public-ink);
  font-size:.76rem;
  font-weight:600;
  margin-bottom:.16rem;
}
body:not(:has(.app-shell)) .form-field{
  margin-bottom:.7rem;
}
body:not(:has(.app-shell)) .form-field label,
body:not(:has(.app-shell)) .form-field input,
body:not(:has(.app-shell)) .form-field textarea,
body:not(:has(.app-shell)) .form-field select{
  display:block;
  width:100%;
}
body:not(:has(.app-shell)) .form-field > ul,
body:not(:has(.app-shell)) form > ul{
  display:block;
  margin:.25rem 0 0;
  padding:0;
  list-style:none;
  color:#b42318;
  font-size:.76rem;
  line-height:1.25;
}
body:not(:has(.app-shell)) .form-field > ul li,
body:not(:has(.app-shell)) form > ul li{
  margin:0;
}
body:not(:has(.app-shell)) input:not([type="checkbox"]):not([type="radio"]),
body:not(:has(.app-shell)) textarea,
body:not(:has(.app-shell)) select{
  min-height:34px;
  padding:.34rem .5rem;
  border-color:#cbd5e1;
  background:#fff;
  color:var(--public-ink);
  font-size:.8rem;
  box-shadow:none;
}
body:not(:has(.app-shell)) input:focus,
body:not(:has(.app-shell)) textarea:focus,
body:not(:has(.app-shell)) select:focus{
  border-color:var(--public-blue);
  box-shadow:0 0 0 2px rgba(11,97,223,.12);
}
body:not(:has(.app-shell)) .checkbox-inline{
  align-items:flex-start;
  gap:.45rem;
  padding:.48rem;
  border:1px solid var(--public-border);
  border-radius:10px;
  background:var(--public-surface-soft);
  font-size:.78rem;
}
body:not(:has(.app-shell)) main.container:has(.auth-card){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-height:0;
  margin:0 auto;
  padding-top:0;
  padding-bottom:0;
}
body:not(:has(.app-shell)) main.container:has(.auth-card) > .notice{
  width:min(460px, 100%);
  margin:0 auto .6rem;
  padding:.72rem .9rem;
  text-align:left;
}
body:not(:has(.app-shell)):has(.auth-card){
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
}
body:not(:has(.app-shell)):has(.auth-card-register){
  height:auto;
  min-height:100dvh;
  overflow-y:auto;
}
body:not(:has(.app-shell)) main.container:has(.auth-card-register){
  justify-content:flex-start;
  padding-top:.75rem;
  padding-bottom:.75rem;
}
body:not(:has(.app-shell)):has(.auth-card) header.container{
  padding:0 1rem !important;
}
body:not(:has(.app-shell)):has(.auth-card) header.container nav{
  min-height:46px;
  padding:.24rem 0;
}
body:not(:has(.app-shell)):has(.auth-card) footer.container{
  display:block;
  margin:0 auto;
  padding:0 1rem .35rem;
}
body:not(:has(.app-shell)):has(.auth-card) .app-footer{
  padding:.32rem .6rem;
  font-size:.7rem;
}
body:not(:has(.app-shell)) .auth-card{
  width:100%;
  max-width:460px;
  margin:0 auto !important;
  padding:.68rem !important;
  border:1px solid var(--public-border);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  color:var(--public-ink);
  box-shadow:0 16px 40px rgba(15,23,42,.08);
}
body:not(:has(.app-shell)) .auth-card-register{
  max-width:500px;
}
body:not(:has(.app-shell)) .auth-card h2{
  margin:0 0 .2rem;
  font-size:1.2rem;
  line-height:1.12;
}
body:not(:has(.app-shell)) .auth-card > .muted{
  margin:.05rem 0 .48rem;
  font-size:.74rem;
  line-height:1.25;
}
body:not(:has(.app-shell)) .auth-card form{
  display:grid;
  gap:.24rem;
  width:100%;
  margin:0;
}
body:not(:has(.app-shell)) .auth-card .form-field{
  margin-bottom:0;
}
body:not(:has(.app-shell)) .auth-card label{
  margin-bottom:0;
  font-size:.72rem;
}
body:not(:has(.app-shell)) .auth-card input:not([type="checkbox"]):not([type="radio"]),
body:not(:has(.app-shell)) .auth-card textarea,
body:not(:has(.app-shell)) .auth-card select{
  min-height:31px;
  border-radius:9px;
}
body:not(:has(.app-shell)) .auth-card button[type="submit"]{
  width:100%;
  margin-top:.15rem;
}
body:not(:has(.app-shell)) .auth-card .notice{
  margin:.28rem 0 .42rem;
  padding:.44rem .54rem;
  border-radius:11px;
  font-size:.8rem;
}
body:not(:has(.app-shell)) .auth-card .help-box{
  margin:.42rem 0 0;
  padding:.5rem;
  border-radius:13px;
}
body:not(:has(.app-shell)) .auth-card .help-box h3{
  margin:0 0 .28rem;
  font-size:.82rem;
}
body:not(:has(.app-shell)) .auth-card .checkbox-inline{
  margin-top:0;
}
body:not(:has(.app-shell)) .auth-card .form-help-inline{
  margin-top:-.2rem;
  margin-bottom:.22rem;
  font-size:.68rem;
}
body:not(:has(.app-shell)) footer.container{
  max-width:1320px;
  margin:1rem auto 0;
  padding:0 1rem 1rem;
}
body:not(:has(.app-shell)) .public-footer-container{
  max-width:1320px;
}
body:not(:has(.app-shell)) .app-footer{
  border-color:var(--public-border);
  background:rgba(255,255,255,.82);
  color:var(--public-muted);
}
body:not(:has(.app-shell)) .public-hero{
  display:grid;
  grid-template-columns:minmax(500px,1fr) minmax(460px,560px);
  gap:3.4rem;
  align-items:center;
}
body:not(:has(.app-shell)) .public-product-card{
  position:relative;
  z-index:1;
  padding:.9rem;
  border:1px solid var(--public-border);
  border-radius:17px;
  background:rgba(255,255,255,.94);
  box-shadow:0 28px 80px rgba(15,23,42,.14);
  transform:translateY(10px);
}
body:not(:has(.app-shell)) .public-product-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:52%;
  width:118%;
  height:118%;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(11,97,223,.18) 0%, rgba(11,97,223,.08) 38%, transparent 70%);
  filter:blur(6px);
  pointer-events:none;
}
body:not(:has(.app-shell)) .public-product-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.62rem;
  color:var(--public-ink);
  font-size:.78rem;
}
body:not(:has(.app-shell)) .public-product-top strong{
  color:var(--public-blue);
}
body:not(:has(.app-shell)) .public-metric-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
  margin-bottom:.65rem;
}
body:not(:has(.app-shell)) .public-metric-grid div,
body:not(:has(.app-shell)) .public-table-card,
body:not(:has(.app-shell)) .public-next-card{
  border:1px solid var(--public-border);
  border-radius:12px;
  background:var(--public-surface-soft);
}
body:not(:has(.app-shell)) .public-metric-grid div{
  padding:.58rem;
  background:#fff;
}
body:not(:has(.app-shell)) .public-metric-grid small{
  display:block;
  color:var(--public-muted);
  font-size:.68rem;
}
body:not(:has(.app-shell)) .public-metric-grid strong{
  display:block;
  margin-top:.18rem;
  color:var(--public-ink);
  font-size:.98rem;
}
body:not(:has(.app-shell)) .public-table-card{
  overflow:hidden;
  background:#fff;
}
body:not(:has(.app-shell)) .public-table-row{
  display:grid;
  grid-template-columns:1.25fr .7fr .7fr;
  gap:.6rem;
  padding:.48rem .55rem;
  border-bottom:1px solid var(--public-border);
  color:var(--public-ink);
  font-size:.68rem;
}
body:not(:has(.app-shell)) .public-table-row:last-child{
  border-bottom:0;
}
body:not(:has(.app-shell)) .public-table-row.is-head{
  background:var(--public-surface-soft);
  color:var(--public-muted);
  font-size:.68rem;
  font-weight:600;
}
body:not(:has(.app-shell)) .public-status{
  justify-self:start;
  padding:.12rem .38rem;
  border-radius:999px;
  font-size:.68rem;
  font-weight:600;
}
body:not(:has(.app-shell)) .public-status.is-late{background:#fef2f2;color:#991b1b}
body:not(:has(.app-shell)) .public-status.is-waiting{background:#eff6ff;color:#1d4ed8}
body:not(:has(.app-shell)) .public-status.is-paid{background:#ecfdf3;color:#166534}
body:not(:has(.app-shell)) .public-next-card{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:.62rem;
  padding:.56rem;
  background:#fff;
}
body:not(:has(.app-shell)) .public-next-card > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--public-blue-soft);
  color:var(--public-blue);
}
body:not(:has(.app-shell)) .public-next-card p{
  margin:0;
  color:var(--public-ink);
  font-size:.72rem;
}
body:not(:has(.app-shell)) .public-next-card small{
  color:var(--public-muted);
}
body:not(:has(.app-shell)) .public-feature-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
body:not(:has(.app-shell)) .public-feature-grid .feature-card{
  display:block;
  min-height:172px;
  padding:.9rem;
  border-radius:14px;
  background:#fff;
}
body:not(:has(.app-shell)) .public-feature-grid h3{
  margin:.62rem 0 .32rem;
  font-size:.88rem;
  line-height:1.2;
}
body:not(:has(.app-shell)) .public-section-heading{
  max-width:620px;
  margin:0 auto .75rem;
  text-align:center;
}
body:not(:has(.app-shell)) .public-section-heading h2{
  margin:.32rem 0 0;
  font-size:1.55rem;
}
body:not(:has(.app-shell)) .public-step-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body:not(:has(.app-shell)) .public-pricing-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  gap:1.4rem;
  align-items:center;
  padding:1.35rem;
  border:1px solid var(--public-border);
  border-radius:18px;
  background:linear-gradient(135deg,#f8fbff,#fff);
  box-shadow:0 16px 42px rgba(15,23,42,.05);
}
body:not(:has(.app-shell)) .public-pricing-section h2{
  max-width:620px;
  margin:.35rem 0 .55rem;
  font-size:1.58rem;
  line-height:1.1;
}
body:not(:has(.app-shell)) .public-price-card{
  padding:.95rem;
  border:1px solid var(--public-border);
  border-radius:15px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.1);
}
body:not(:has(.app-shell)) .public-price-brand{
  margin:0;
  color:var(--public-blue);
  font-weight:700;
  text-align:center;
}
body:not(:has(.app-shell)) .public-price{
  margin:.25rem 0 0;
  color:var(--public-ink);
  text-align:center;
}
body:not(:has(.app-shell)) .public-price strong{
  font-size:1.75rem;
  letter-spacing:-.04em;
}
body:not(:has(.app-shell)) .public-price span{
  color:var(--public-muted);
  font-weight:600;
}
body:not(:has(.app-shell)) .public-price-card .small{
  text-align:center;
}
body:not(:has(.app-shell)) .public-price-card ul{
  display:grid;
  gap:.28rem;
  margin:.7rem 0 .8rem;
  padding-left:1rem;
  color:var(--public-muted);
  font-size:.78rem;
}
body:not(:has(.app-shell)) .public-price-card a[role="button"]{
  width:100%;
}
body:not(:has(.app-shell)) .public-faq-section{
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
  gap:1.35rem;
  align-items:start;
}
body:not(:has(.app-shell)) .public-faq-section h2{
  margin:.32rem 0 .35rem;
  font-size:1.35rem;
}
body:not(:has(.app-shell)) .public-faq-list{
  display:grid;
  gap:.4rem;
}
body:not(:has(.app-shell)) .public-faq-list details{
  border:1px solid var(--public-border);
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
body:not(:has(.app-shell)) .public-faq-list summary{
  padding:.68rem .82rem;
  color:var(--public-ink);
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
}
body:not(:has(.app-shell)) .public-faq-list p{
  margin:0;
  padding:0 .82rem .75rem;
  color:var(--public-muted);
  font-size:.78rem;
}
body:not(:has(.app-shell)) .public-legal-page{
  width:min(100%,860px);
  margin:1.15rem auto 0;
  padding:1.25rem;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--public-ink);
  box-shadow:none;
}
body:not(:has(.app-shell)) .public-legal-page h2{
  margin:0 0 .85rem;
  color:var(--public-ink);
  font-size:1.55rem;
  line-height:1.12;
}
body:not(:has(.app-shell)) .public-legal-page h3{
  margin:1.05rem 0 .35rem;
  color:var(--public-ink);
  font-size:1rem;
  line-height:1.2;
}
body:not(:has(.app-shell)) .public-legal-page h3:first-of-type{
  margin-top:.3rem;
}
body:not(:has(.app-shell)) .public-legal-page p,
body:not(:has(.app-shell)) .public-legal-page li{
  color:var(--public-muted);
  font-size:.88rem;
  line-height:1.55;
}
body:not(:has(.app-shell)) .public-legal-page p{
  margin:.45rem 0;
}
body:not(:has(.app-shell)) .public-legal-page ul{
  margin:.45rem 0 .75rem;
  padding-left:1.1rem;
}
body:not(:has(.app-shell)) .public-legal-intro{
  margin-top:.85rem;
}
body:not(:has(.app-shell)) .public-legal-intro .muted{
  margin:0;
}
body:not(:has(.app-shell)) .public-legal-faq{
  display:grid;
  gap:.65rem;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
body:not(:has(.app-shell)) .public-legal-faq .help-box{
  margin:0;
  padding:1rem 0;
  border:0;
  background:transparent;
  box-shadow:none;
}
body:not(:has(.app-shell)) .public-legal-faq .help-box h3{
  margin:0 0 .45rem;
  font-size:.96rem;
}
body:not(:has(.app-shell)) .public-legal-faq .help-box p{
  margin:.35rem 0 0;
}
.app-shell{min-height:100vh;background:var(--app-bg)}
.app-frame{min-height:100vh;margin-left:var(--sidebar-width)}
.app-main.container{width:min(var(--content-max),calc(100% - 2rem));margin:1.5rem auto 2rem;padding:0}
.app-footer-container.container{width:min(var(--content-max),calc(100% - 2rem));margin:0 auto 2rem;padding:0}
.app-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:80;
  width:var(--sidebar-width);
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1.1rem;
  background:var(--app-panel);
  border-right:1px solid var(--app-border);
  box-shadow:0 16px 40px rgba(15,23,42,.06);
}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:.85rem;border-bottom:1px solid rgba(15,23,42,.08)}
.sidebar-brand{display:inline-flex;align-items:center;gap:.65rem;color:inherit;text-decoration:none;font-weight:750;font-size:1.08rem}
.sidebar-brand:hover{color:inherit;text-decoration:none}
.sidebar-logo{width:38px;height:38px;object-fit:contain;display:block}
.sidebar-close{display:none}
.sidebar-nav{display:flex;flex-direction:column;gap:.28rem;margin:.1rem 0;padding:0}
.sidebar-nav-secondary{
  margin-top:auto;
  padding-top:.75rem;
  border-top:1px solid rgba(15,23,42,.08);
}
.sidebar-mobile-actions{display:none}
.sidebar-nav-secondary .sidebar-link{
  min-height:34px;
  padding:.44rem .62rem;
  color:#53627f;
  font-size:.72rem;
}
.sidebar-nav-secondary .sidebar-link-icon{
  width:18px;
  height:18px;
  flex-basis:18px;
}
.sidebar-nav-secondary .sidebar-link-icon svg{
  width:18px;
  height:18px;
}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:.72rem;
  min-height:42px;
  padding:.58rem .72rem;
  border-radius:8px;
  color:#334155;
  text-decoration:none;
  font-weight:550;
  line-height:1.2;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
  border:1px solid transparent;
}
.sidebar-link:hover{background:var(--surface-hover);color:#0f172a;text-decoration:none}
.sidebar-link:focus-visible,
.topbar-menu:focus-visible,
.topbar-action:focus-visible,
.topbar-icon-button:focus-visible,
.user-menu summary:focus-visible,
.sidebar-close:focus-visible{outline:2px solid var(--pico-primary);outline-offset:2px}
.sidebar-link.is-active{
  color:var(--pico-primary);
  background:rgba(1,120,144,.11);
  border-color:rgba(1,120,144,.18);
  box-shadow:inset 3px 0 0 var(--pico-primary);
}
.sidebar-link.is-disabled{color:#94a3b8;cursor:not-allowed}
.sidebar-link.is-disabled:hover{background:transparent;color:#94a3b8}
.sidebar-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
.sidebar-link-icon svg,
.topbar-actions svg,
.sidebar-close svg,
.topbar-menu svg,
.user-chevron svg{width:20px;height:20px;display:block}
.app-topbar{
  position:sticky;
  top:0;
  z-index:50;
  min-height:var(--topbar-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1.5rem;
  background:color-mix(in srgb, var(--app-panel) 92%, transparent);
  border-bottom:1px solid var(--app-border);
  backdrop-filter:blur(14px);
}
.topbar-left,.topbar-actions{display:flex;align-items:center;gap:.65rem}
.topbar-menu,
.topbar-icon-button,
.sidebar-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--app-border);
  border-radius:8px;
  background:var(--app-panel);
  color:var(--app-text);
  box-shadow:none;
}
.topbar-menu:hover,
.topbar-icon-button:hover,
.sidebar-close:hover{background:var(--surface-hover);border-color:#cbd8ea}
.topbar-brand{display:none;color:#0f172a;text-decoration:none;font-weight:750}
.topbar-action{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  min-height:38px;
  padding:.42rem .65rem;
  border-radius:8px;
  color:#334155;
  text-decoration:none;
}
.topbar-action:hover{background:var(--surface-hover);color:#0f172a;text-decoration:none}
.topbar-icon-button{position:relative}
.notification-badge{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:999px;background:var(--pico-primary);border:2px solid #fff}
.notification-menu,
.user-menu{position:relative;margin:0;padding:0;line-height:1}
.notification-menu summary{
  list-style:none;
  margin:0;
}
.notification-menu summary::marker,
.notification-menu summary::-webkit-details-marker{display:none;content:""}
.notification-menu summary::after{content:none}
.notification-menu[open],
.notification-menu[open] summary{margin:0}
.user-menu summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.6rem;
  min-height:44px;
  padding:.25rem .42rem .25rem .25rem;
  border:1px solid var(--app-border);
  border-radius:10px;
  background:var(--app-panel);
  cursor:pointer;
  margin:0;
}
.user-menu[open],
.user-menu[open] summary{margin:0}
.user-menu summary::marker,
.user-menu summary::-webkit-details-marker{display:none;content:""}
.user-menu summary::after{content:none}
.user-menu summary:hover{background:var(--surface-soft)}
.user-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:rgba(1,120,144,.11);color:var(--pico-primary);font-weight:600;font-size:.82rem}
.user-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0;text-align:left}
.user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;color:var(--app-text);font-size:.92rem}
.user-workspace{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--app-muted);font-size:.78rem}
.user-chevron{color:var(--app-muted)}
.user-menu-panel{
  position:absolute;
  top:calc(100% + .45rem);
  right:0;
  z-index:90;
  min-width:210px;
  display:flex;
  flex-direction:column;
  gap:.12rem;
  padding:.38rem;
  background:var(--app-panel-raised);
  border:1px solid var(--app-border);
  border-radius:10px;
  box-shadow:0 20px 42px rgba(15,23,42,.14);
}
.notification-panel{
  position:absolute;
  top:calc(100% + .45rem);
  right:0;
  z-index:90;
  width:280px;
  max-height:min(420px, calc(100vh - 90px));
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:.55rem;
  background:var(--app-panel-raised);
  border:1px solid var(--app-border);
  border-radius:10px;
  box-shadow:0 20px 42px rgba(15,23,42,.14);
}
.notification-panel > strong{
  padding:.15rem .2rem .35rem;
  color:var(--app-text);
  font-size:.78rem;
  font-weight:600;
}
.notification-panel p{
  margin:.15rem .2rem;
  font-size:.76rem;
}
.notification-panel a{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  padding:.45rem .5rem;
  border-radius:8px;
  color:var(--app-text);
  text-decoration:none;
}
.notification-panel a:hover{background:var(--surface-hover);color:var(--app-text);text-decoration:none}
.notification-panel a span{font-size:.78rem;font-weight:600}
.notification-panel a small{color:var(--app-muted);font-size:.7rem;line-height:1.25}
.user-menu-panel a,
.user-menu-panel button{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  min-height:0;
  margin:0;
  padding:.42rem .55rem;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--app-text);
  text-align:left;
  text-decoration:none;
  font-size:.78rem;
  line-height:1.2;
  box-shadow:none;
}
.user-menu-panel a:hover,
.user-menu-panel button:hover{background:var(--surface-hover);color:var(--app-text);text-decoration:none}
.user-menu-panel svg{width:16px;height:16px}
.user-menu-logout{margin-top:.2rem;border-top:1px solid rgba(15,23,42,.08)}
.sidebar-overlay{position:fixed;inset:0;z-index:70;background:rgba(15,23,42,.35)}
header.container nav{
  border:none;
  border-radius:0;
  padding:0 .75rem;
  background:var(--surface-soft);
}
header .brand{font-weight:700;font-size:1.1rem}
header .brand{display:flex;align-items:center;gap:.5rem;margin:0}
header .logo{height:45px;width:auto;display:block;padding:0;}
header.container{padding-top:0 !important;padding-bottom:0 !important}
header nav ul{margin:0;display:flex;align-items:center}
header nav a{margin-right:.5rem;padding:.35rem .6rem;border-radius:999px;color:inherit;text-decoration:none;transition:background-color .18s ease,color .18s ease}
header nav a:hover{background:var(--surface-hover)}
header nav a.brand:hover{background:transparent}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.kpi{padding:1rem;border:1px solid var(--pico-muted-border-color);border-radius:8px}
.kpi-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:.5rem;border:1px dashed rgba(15,23,42,.25);border-radius:8px}
.kpi-icon svg{width:18px;height:18px}
.kpi-icon-info{color:#1d4ed8;background:rgba(29,78,216,.18)}
.kpi-icon-success{color:#15803d;background:rgba(21,128,61,.18)}
.kpi-icon-danger{color:#b91c1c;background:rgba(185,28,28,.18)}
.kpi .value{font-size:1.6rem;font-weight:600}
.tag{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.8rem}
.tag-green{background:#e7f7ee;color:#176b3a}
.tag-amber{background:#fff4e5;color:#8a5a00}
.tag-red{background:#fdecec;color:#9d1f1f}
.tag-muted{background:#e6ebf2;color:#4b5563}
.muted{color:var(--pico-muted-color)}
.hero{padding:2rem 1.75rem;border:none;border-radius:12px;background:var(--surface-soft)}
.hero h1{font-size:2.1rem;line-height:1.2;margin-top:.25rem;margin-bottom:1rem}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.35rem;margin-bottom:.5rem}
.hero-eyebrow svg{width:15px;height:15px}
.hero-subtitle{max-width:680px}
.hero-cta-row{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;flex-wrap:wrap}
.hero-note{margin:.65rem 0 0;max-width:680px}
.hero-trust-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
.hero-trust-item{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem}
.hero-trust-item svg{width:15px;height:15px}
.trust-blue{color:#1565c0}
.trust-green{color:#2e7d32}
.trust-amber{color:#9a6700}
.hero-mini-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px}
.trust-blue .hero-mini-icon{background:rgba(21,101,192,.18)}
.trust-green .hero-mini-icon{background:rgba(46,125,50,.18)}
.trust-amber .hero-mini-icon{background:rgba(154,103,0,.2)}
.section{margin-top:2.5rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.dashboard-follow-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.dashboard-follow-list{
  display:grid;
  gap:.18rem;
}
.card{padding:1rem;border:1px solid var(--pico-muted-border-color);border-radius:10px;background:var(--surface-soft)}
.dashboard-follow-grid .card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.dashboard-follow-grid .card .followup-link{margin-top:auto}
.dashboard-follow-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(128px,auto) auto;
  gap:.75rem;
  align-items:center;
  position:relative;
  overflow:hidden;
  margin:0;
  padding:.72rem .78rem;
  border-left:0;
}
.dashboard-follow-row::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:#94a3b8;
}
.dashboard-follow-row:has(.dashboard-follow-marker.is-error)::before{
  background:#dc2626;
}
.dashboard-follow-row:has(.dashboard-follow-marker.is-sent)::before{
  background:#0891b2;
}
.dashboard-follow-row:has(.dashboard-follow-marker.is-created)::before{
  background:#7c3aed;
}
.dashboard-follow-row:has(.dashboard-follow-marker.is-paid)::before{
  background:#16a34a;
}
.dashboard-follow-row:has(.dashboard-follow-marker.is-client)::before{
  background:#2563eb;
}
.dashboard-follow-row:has(.dashboard-follow-marker.is-done)::before{
  background:#475569;
}
.dashboard-follow-row:has(.dashboard-follow-marker.is-draft)::before{
  background:#d97706;
}
.dashboard-follow-marker{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--surface-soft);
  color:#64748b;
}
.dashboard-follow-marker svg{
  width:18px;
  height:18px;
}
.dashboard-follow-marker.is-error{
  background:#fee2e2;
  color:#dc2626;
}
.dashboard-follow-marker.is-sent{
  background:#cffafe;
  color:#0891b2;
}
.dashboard-follow-marker.is-created{
  background:#ede9fe;
  color:#7c3aed;
}
.dashboard-follow-marker.is-paid{
  background:#dcfce7;
  color:#16a34a;
}
.dashboard-follow-marker.is-client{
  background:#dbeafe;
  color:#2563eb;
}
.dashboard-follow-marker.is-draft{
  background:#fef3c7;
  color:#d97706;
}
.dashboard-follow-marker.is-done{
  background:#e2e8f0;
  color:#475569;
}
.tag-activity-error{background:#fdecec;color:#9d1f1f}
.tag-activity-paid{background:#e7f7ee;color:#176b3a}
.tag-activity-sent{background:#e0f7fb;color:#0e7490}
.tag-activity-created{background:#f1ecff;color:#6d28d9}
.tag-activity-draft{background:#fff4e5;color:#8a5a00}
.tag-activity-client{background:#eaf2ff;color:#1d4ed8}
.tag-activity-done{background:#e6ebf2;color:#475569}
.dashboard-follow-copy{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.15rem .5rem;
  align-items:center;
  min-width:0;
}
.dashboard-follow-copy .tag{
  justify-self:start;
}
.dashboard-follow-copy strong{
  color:var(--app-card-ink);
  font-size:.92rem;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-follow-copy > .muted{
  grid-column:1 / -1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-follow-meta{
  display:grid;
  gap:.05rem;
  justify-items:end;
  text-align:right;
}
.dashboard-follow-meta span{
  color:var(--app-card-ink);
  font-weight:600;
}
.dashboard-follow-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  min-height:32px;
  padding:.34rem .58rem;
  border:1px solid var(--app-card-border);
  border-radius:999px;
  background:var(--app-panel-soft);
  color:var(--app-link);
  font-size:.78rem;
  font-weight:600;
  text-decoration:none;
}
.dashboard-follow-action:hover{
  border-color:#0b61df;
  background:rgba(11,97,223,.08);
  text-decoration:none;
}
.dashboard-follow-action svg{
  width:14px;
  height:14px;
}
.dashboard-balance-card{
  display:grid;
  gap:.6rem;
  margin:.65rem 0 .8rem;
  padding:.82rem .9rem;
  border:1px solid var(--app-card-border);
  border-radius:12px;
  background:var(--app-panel-raised);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.dashboard-balance-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}
.dashboard-balance-heading h3,
.dashboard-balance-heading p{
  margin:0;
}
.dashboard-balance-heading h3{
  color:var(--app-card-ink);
  font-size:.95rem;
  font-weight:600;
}
.dashboard-balance-total{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:.16rem .5rem;
  border:1px solid var(--app-card-border);
  border-radius:999px;
  color:var(--app-card-muted);
  font-size:.74rem;
  font-weight:600;
  white-space:nowrap;
}
.dashboard-balance-bar{
  display:flex;
  width:100%;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-soft);
}
.dashboard-balance-bar span{
  min-width:0;
}
.dashboard-balance-bar span[style="width: 0%"],
.dashboard-balance-bar span[style="width: 0.0%"]{
  display:none;
}
.dashboard-balance-bar .is-overdue,
.dashboard-balance-legend .is-overdue{background:#ef4444}
.dashboard-balance-bar .is-upcoming,
.dashboard-balance-legend .is-upcoming{background:#0b61df}
.dashboard-balance-bar .is-draft,
.dashboard-balance-legend .is-draft{background:#d97706}
.dashboard-balance-bar .is-paid,
.dashboard-balance-legend .is-paid{background:#16a34a}
.dashboard-balance-legend{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .85rem;
  color:var(--app-card-muted);
  font-size:.76rem;
}
.dashboard-balance-legend span{
  display:inline-flex;
  align-items:center;
  gap:.28rem;
}
.dashboard-balance-legend i{
  width:8px;
  height:8px;
  border-radius:999px;
}
.dashboard-balance-legend strong{
  color:var(--app-card-ink);
  font-weight:600;
}
.app-shell:not(:has(.email-workspace)) [data-testid="dashboard-container"]{
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"]{
  align-items:stretch;
}
.app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "icon label"
    "icon value"
    "icon hint";
  align-items:center;
  column-gap:.72rem;
  min-height:92px;
  border-color:var(--app-card-border);
  background:linear-gradient(180deg,var(--app-panel-raised),var(--app-panel-soft));
}
.app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi-icon{
  grid-area:icon;
  margin:0;
  border-style:solid;
  border-color:color-mix(in srgb, currentColor 28%, transparent);
}
.app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi .muted{
  margin:0;
  color:var(--app-card-muted);
  font-weight:500;
}
.app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi > .muted:not(.small){
  grid-area:label;
}
.app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi .value{
  grid-area:value;
  margin:.05rem 0;
  color:var(--app-card-ink);
  font-weight:600;
  letter-spacing:-.01em;
}
.app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi .small{
  grid-area:hint;
}
.app-shell:not(:has(.email-workspace)) .dashboard-follow-grid .card{
  border-color:var(--app-card-border);
  background:var(--app-panel-raised);
}
.app-shell:not(:has(.email-workspace)) .dashboard-follow-grid .card p{
  margin-bottom:.35rem;
}
.app-shell:not(:has(.email-workspace)) .dashboard-follow-grid .card strong{
  color:var(--app-card-ink);
  font-weight:600;
}
.app-shell:not(:has(.email-workspace)) .dashboard-follow-grid .card .muted{
  color:var(--app-card-muted);
}
.app-shell:not(:has(.email-workspace)) .dashboard-follow-list .card{
  border-color:var(--app-card-border);
  background:var(--app-panel-raised);
}
.billing-workspace{
  display:grid;
  gap:.55rem;
}
.billing-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.billing-header h2{
  margin:0 0 .35rem;
}
.billing-status-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem;
}
.billing-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.2rem .5rem;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  line-height:1;
}
.billing-status svg{
  width:15px;
  height:15px;
  display:block;
}
.billing-status-active,
.billing-status-trial{
  border-color:#bbf7d0;
  background:#ecfdf3;
  color:#15803d;
}
.billing-status-warning{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#9a3412;
}
.billing-trial-countdown{
  display:inline-flex;
  align-items:center;
  min-height:1.45rem;
  padding:.18rem .5rem;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:.72rem;
  line-height:1;
  white-space:nowrap;
}
.billing-summary-grid,
.billing-bottom-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
}
.billing-summary-card,
.billing-plan-card,
.billing-info-card,
.billing-benefits-card,
.billing-help-card{
  border:1px solid var(--app-card-border);
  border-radius:10px;
  background:var(--app-panel-raised);
  color:var(--app-card-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.billing-summary-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  column-gap:.65rem;
  min-height:68px;
  padding:.68rem .75rem;
}
.billing-summary-card > div{
  display:grid;
  align-content:center;
}
.billing-card-icon,
.billing-mini-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  line-height:1;
}
.billing-card-icon{
  width:48px;
  height:48px;
  position:relative;
}
.billing-card-icon svg{
  position:absolute;
  left:50%;
  top:50%;
  width:26px;
  height:26px;
  display:block;
  stroke-width:1.8;
  margin:0;
  transform:translate(-50%,-50%);
  transform-origin:center;
}
.billing-card-icon-blue{background:#eaf2ff;color:#0b61df}
.billing-card-icon-green{background:#ecfdf3;color:#15803d}
.billing-card-icon-orange{background:#fff7ed;color:#d97706}
.billing-card-icon-purple{background:#f5efff;color:#7c3aed}
.billing-summary-card small,
.billing-summary-card span{
  display:block;
  color:var(--app-card-muted);
}
.billing-summary-card small{
  margin-bottom:.12rem;
  font-weight:600;
}
.billing-summary-card strong{
  display:block;
  color:var(--app-card-ink);
  font-size:.98rem;
  font-weight:600;
  line-height:1.12;
}
.billing-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  grid-template-areas:
    "plan info"
    "benefits help";
  gap:.65rem;
  align-items:stretch;
  min-height:0;
}
.billing-layout-active{
  margin-top:.1rem;
  grid-template-columns:minmax(0,1fr) minmax(330px,.9fr);
}
.billing-plan-card{grid-area:plan}
.billing-info-card{grid-area:info}
.billing-benefits-card{grid-area:benefits}
.billing-help-card{grid-area:help}
.billing-layout > .billing-plan-card,
.billing-layout > .billing-info-card,
.billing-layout > .billing-benefits-card,
.billing-layout > .billing-help-card{
  height:100%;
  align-self:stretch;
}
.billing-plan-card,
.billing-info-card,
.billing-benefits-card,
.billing-help-card{
  padding:.78rem .85rem;
}
.billing-info-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.billing-card-heading{
  padding-bottom:.4rem;
  border-bottom:1px solid var(--app-card-border);
}
.billing-card-heading h3,
.billing-card-title h3,
.billing-benefits-card h3{
  margin:0;
  font-size:.92rem;
  font-weight:600;
}
.billing-card-heading p{
  margin:.2rem 0 0;
}
.billing-price{
  margin:.32rem 0 .25rem;
  color:#0b61df !important;
}
.billing-price > strong{
  color:#0b61df;
  font-size:1.42rem;
  font-weight:600;
  letter-spacing:-.04em;
}
.billing-price span{
  color:var(--app-card-muted);
  font-weight:600;
}
.billing-check-list{
  display:grid;
  gap:.32rem;
  margin:.35rem 0 .58rem;
  padding:0 0 0 .55rem;
  list-style:none;
}
.billing-check-list li{
  display:flex;
  align-items:center;
  gap:.42rem;
  margin:0;
  padding:.1rem 0;
  color:var(--app-card-ink);
  line-height:1.2;
  font-size:.78rem;
}
.billing-check-list svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
  display:block;
  color:#15803d;
  stroke-width:2.2;
}
.billing-facts{
  display:grid;
  gap:.44rem;
  margin:.55rem 0 .62rem;
  padding:.62rem .68rem;
  border:1px solid var(--app-card-border);
  border-radius:9px;
  background:var(--surface-soft);
}
.billing-facts div{
  display:grid;
  grid-template-columns:minmax(120px,.72fr) minmax(0,1fr);
  gap:.45rem;
  align-items:center;
}
.billing-facts dt,
.billing-facts dd{
  margin:0;
  font-size:.78rem;
  line-height:1.25;
}
.billing-facts dt{
  color:var(--app-card-muted);
  font-weight:600;
}
.billing-facts dd{
  color:var(--app-card-ink);
  font-weight:600;
}
.client-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,340px));
  gap:.6rem;
  align-items:start;
  justify-content:start;
}
.client-card{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:.55rem;
  margin:0;
  padding:.72rem .78rem;
  border:1px solid var(--app-card-border);
  border-radius:14px;
  background:var(--app-panel);
  box-shadow:0 10px 24px rgba(15,23,42,.045);
}
.client-card h3,
.client-card p{
  margin:0;
}
.client-card-header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.55rem;
  align-items:center;
}
.client-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:#eaf2ff;
  color:#0b61df;
  font-size:.82rem;
  font-weight:700;
}
.client-identity{
  min-width:0;
}
.client-identity h3,
.client-identity p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.client-identity h3{
  color:var(--app-card-ink);
  font-size:.94rem;
  font-weight:600;
}
.client-edit-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:1px solid var(--app-card-border);
  border-radius:10px;
  color:var(--app-link);
  background:var(--app-panel-soft);
}
.client-edit-link svg{
  width:15px;
  height:15px;
}
.client-contact-lines{
  display:grid;
  gap:.22rem;
  padding:.42rem .48rem;
  border:1px solid var(--app-card-border);
  border-radius:10px;
  background:var(--app-panel-soft);
}
.client-contact-lines a,
.client-contact-lines span{
  display:flex;
  align-items:center;
  gap:.35rem;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.78rem;
}
.client-contact-lines svg{
  width:14px;
  height:14px;
  flex:0 0 auto;
}
.client-note{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.client-card-actions{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:flex-end;
  min-height:0;
}
.client-card-actions button{
  width:auto !important;
  margin:0;
  padding:.36rem .55rem;
  font-size:.76rem;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
.client-card-actions button svg{
  width:14px;
  height:14px;
}
.client-card-actions form{
  margin:0;
}

.clients-workspace{
  --clients-blue:#0b61df;
  --clients-blue-soft:#e8f1ff;
  --clients-border:#dbe3ef;
  --clients-ink:#0b1538;
  --clients-muted:#526079;
  --clients-surface:#fff;
  --clients-surface-soft:#f8fbff;
  --clients-row:#fff;
  --invoice-blue:var(--clients-blue);
  --invoice-blue-soft:var(--clients-blue-soft);
  --invoice-border:var(--clients-border);
  --invoice-ink:var(--clients-ink);
  --invoice-muted:var(--clients-muted);
  --invoice-surface:var(--clients-surface);
  --invoice-surface-soft:var(--clients-surface-soft);
  --invoice-row:var(--clients-row);
  color:var(--clients-ink);
}

.clients-live-region,
.invoices-live-region{
  display:contents;
}
[data-app-theme="dark"] .clients-workspace{
  --clients-blue:#8fb9ff;
  --clients-blue-soft:#14365f;
  --clients-border:#334155;
  --clients-ink:#edf4ff;
  --clients-muted:#a8b3c7;
  --clients-surface:#172033;
  --clients-surface-soft:#111827;
  --clients-row:#172033;
}
.clients-workspace .invoice-header{
  margin:0 0 .5rem;
}
.clients-workspace .section-header{
  align-items:flex-start;
}
.clients-workspace .invoice-header h2{
  margin:0 0 .22rem;
  color:var(--clients-ink);
  font-size:1.42rem;
  line-height:1.15;
}
.clients-workspace .invoice-header .muted{
  margin:0;
  color:var(--clients-blue);
  font-size:.82rem;
  font-weight:600;
}
.clients-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.68rem;
  margin:.65rem 0 .75rem;
}
.clients-summary-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.72rem;
  align-items:center;
  margin:0;
  padding:.82rem;
  border:1px solid var(--clients-border);
  border-radius:10px;
  background:var(--clients-surface);
  color:var(--clients-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.clients-summary-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
}
.clients-summary-icon svg{
  width:19px;
  height:19px;
}
.clients-summary-icon.is-blue{background:#dbeafe;color:#0b61df}
.clients-summary-icon.is-green{background:#dcfce7;color:#15803d}
.clients-summary-icon.is-orange{background:#fff7ed;color:#d97706}
.clients-summary-icon.is-purple{background:#f3e8ff;color:#7c3aed}
[data-app-theme="dark"] .clients-summary-icon.is-blue{background:#14365f;color:#8fb9ff}
[data-app-theme="dark"] .clients-summary-icon.is-green{background:#123624;color:#86efac}
[data-app-theme="dark"] .clients-summary-icon.is-orange{background:#3b250f;color:#fbbf24}
[data-app-theme="dark"] .clients-summary-icon.is-purple{background:#2e1d55;color:#c4b5fd}
.clients-summary-card span:not(.clients-summary-icon){
  display:block;
  color:var(--clients-muted);
  font-size:.76rem;
  font-weight:600;
}
.clients-summary-card strong{
  display:block;
  color:var(--clients-ink);
  font-size:1.18rem;
  line-height:1.1;
}
.clients-summary-card small{
  display:block;
  color:var(--clients-muted);
  font-size:.72rem;
}
.clients-table-card{margin-top:.5rem}
.clients-toolbar{
  display:flex;
  flex-wrap:nowrap;
  gap:.58rem;
  align-items:center;
  margin:0;
  padding:.68rem .68rem .1rem;
}
.clients-search-field,
.clients-select-field{
  position:relative;
  margin:0;
}
.clients-search-field svg,
.clients-select-field svg{
  position:absolute;
  left:.55rem;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  color:var(--clients-muted);
  pointer-events:none;
}
.clients-search-field input,
.clients-select-field select{
  width:100%;
  height:34px;
  margin:0;
  padding:.3rem .65rem .3rem 2.05rem !important;
  border-color:var(--clients-border);
  background:var(--clients-surface);
  color:var(--clients-ink);
  font-size:.82rem;
}
.clients-search-field{
  flex:1 1 auto;
  min-width:260px;
}
.clients-select-field{
  flex:0 0 190px;
}
.clients-sort-field{
  flex-basis:145px;
}
.clients-select-field select{
  min-width:190px;
  padding-right:1.8rem !important;
  appearance:auto;
}
.clients-sort-field select{
  min-width:145px;
}
.clients-toolbar a[role="button"]{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  min-height:34px;
  margin:0;
  padding:.32rem .62rem;
  font-size:.8rem;
  font-weight:600;
  flex:0 0 auto;
  white-space:nowrap;
  width:auto !important;
}
.clients-toolbar svg{
  width:15px;
  height:15px;
}
.client-table-identity{
  display:flex;
  align-items:center;
  gap:.42rem;
  min-width:150px;
}
.client-table-identity strong{
  display:block;
  font-weight:600;
}
.client-table-identity small{
  display:block;
  line-height:1.22;
}
.client-mobile-email{
  display:none;
}
.clients-table-card td a{
  color:var(--clients-ink);
  text-decoration:none;
}
.clients-table-card td a:hover{
  color:var(--clients-blue);
}
.client-note-line{
  display:block;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--clients-muted);
  font-size:.76rem;
}
.clients-workspace .invoice-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.16rem .46rem;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  line-height:1.15;
  white-space:nowrap;
}
.clients-workspace .client-type-active{
  color:#0b61df;
  background:#eaf2ff;
}
.clients-workspace .client-type-late{
  color:#d97706;
  background:#fff7ed;
}
.clients-workspace .client-type-person{
  color:#64748b;
  background:#f1f5f9;
}
[data-app-theme="dark"] .clients-workspace .client-type-active{background:#14365f;color:#8fb9ff}
[data-app-theme="dark"] .clients-workspace .client-type-late{background:#3b250f;color:#fbbf24}
[data-app-theme="dark"] .clients-workspace .client-type-person{background:#263244;color:#cbd5e1}
.clients-late-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:24px;
  padding:0 .45rem;
  border:1px solid currentColor;
  border-radius:7px;
  font-size:.78rem;
  font-weight:600;
}
.clients-late-count.has-late{
  color:#dc2626;
  background:#fff1f2;
}
.clients-late-count.is-clear{
  color:#15803d;
  background:#ecfdf3;
}
[data-app-theme="dark"] .clients-late-count.has-late{background:#451a1a;color:#fca5a5}
[data-app-theme="dark"] .clients-late-count.is-clear{background:#123624;color:#86efac}
.client-table-actions{
  justify-content:flex-end;
}
.client-table-actions form{
  margin:0;
}
.clients-workspace .icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  margin:0;
  padding:0;
  border:1px solid var(--clients-border);
  border-radius:7px;
  background:var(--clients-surface);
  color:var(--clients-muted);
}
.clients-workspace .icon-button svg{
  width:15px;
  height:15px;
}
.clients-workspace .icon-button:hover{
  border-color:#b8d5ff;
  background:#f4f8ff;
  color:var(--clients-blue);
}
.clients-workspace .icon-button.btn-danger{
  border-color:#fecaca !important;
  background:#fff1f2 !important;
  color:#dc2626 !important;
}
.clients-workspace .icon-button.btn-danger:hover{
  border-color:#fca5a5 !important;
  background:#fee2e2 !important;
  color:#b91c1c !important;
}
[data-app-theme="dark"] .clients-workspace .icon-button:hover{
  background:var(--clients-surface-soft);
}
.clients-workspace .pagination{
  margin-top:.46rem;
}
.clients-workspace .pagination-btn{
  border:1px solid var(--clients-border);
  border-radius:7px;
  background:var(--clients-surface);
  color:var(--clients-ink);
}
.clients-workspace .pagination-btn:hover{
  border-color:#b8d5ff;
  background:#f4f8ff;
  color:var(--clients-blue);
}
[data-app-theme="dark"] .clients-workspace .pagination-btn:hover{
  background:var(--clients-surface-soft);
}
.clients-workspace .client-table-actions button.icon-button{
  flex:0 0 27px;
  width:27px !important;
  min-width:27px;
  height:27px;
  min-height:27px !important;
  padding:0 !important;
  line-height:1;
  appearance:none;
}
.clients-workspace .client-table-actions button.icon-button svg{
  display:block;
  flex:0 0 auto;
}
@media (max-width:1100px){
  .invoice-toolbar{flex-wrap:wrap}
  .invoice-search-field{flex:1 1 100%}
  .clients-toolbar{flex-wrap:wrap}
  .clients-search-field{flex:1 1 100%}
}
@media (max-width:760px){
  .invoice-search-field,
  .invoice-select-field,
  .invoice-toolbar a[role="button"],
  .clients-search-field,
  .clients-select-field,
  .clients-toolbar a[role="button"]{flex:1 1 100%}
}
.invoice-paid-info{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.info-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex:0 0 auto;
  border:1px solid color-mix(in srgb, var(--app-link) 55%, transparent);
  border-radius:999px;
  color:var(--app-link);
  font-size:.68rem;
  font-weight:700;
  line-height:1;
}
.billing-profile-warning{
  display:grid;
  gap:.15rem;
  margin:.35rem 0;
  padding:.45rem;
  border:1px solid #fed7aa;
  border-radius:8px;
  background:#fff7ed;
  color:#9a3412;
}
.billing-profile-warning strong{
  color:#9a3412;
  font-weight:600;
}
.billing-action-form{
  max-width:none !important;
  margin:.4rem 0 .32rem;
}
.billing-active-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem;
  align-items:center;
  margin:.4rem 0 .32rem;
}
.billing-active-actions .billing-action-form{
  margin:0;
}
.billing-active-actions button{
  width:100%;
  white-space:nowrap;
}
.billing-action-form [data-testid="billing-portal-submit"]{
  border-color:#0b61df !important;
  background:#0b61df;
  color:#fff;
}
.billing-action-form [data-testid="billing-portal-submit"]:hover{
  border-color:#0757d8 !important;
  background:#0757d8;
  color:#fff;
}
.billing-main-cta,
.billing-secondary-cta{
  width:100% !important;
}
.billing-action-form [data-testid="billing-cancel-submit"]{
  border-color:#fecaca !important;
  background:transparent;
  color:#b91c1c;
  font-weight:600;
}
.billing-action-form [data-testid="billing-cancel-submit"]:hover{
  border-color:#b91c1c !important;
  background:#fff1f2;
  color:#991b1b;
}
.billing-secondary-cta{
  margin-bottom:.3rem;
}
.billing-card-title{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.24rem;
}
.billing-card-title > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  color:#0b61df;
  line-height:1;
}
.billing-card-title svg{
  width:19px;
  height:19px;
  display:block;
}
.billing-info-card ul{
  display:grid;
  gap:.16rem;
  margin:0;
  padding:0 0 0 .55rem;
  list-style:none;
  font-size:.72rem;
  line-height:1.22;
}
.billing-info-card li{
  display:grid;
  grid-template-columns:.3rem minmax(0,1fr);
  column-gap:.42rem;
  align-items:start;
  min-height:0;
  margin:9px 0;
  padding-top:.06rem;
  padding-bottom:.06rem;
  padding-left:0;
  color:var(--app-card-ink);
  font-weight:600;
}
.billing-info-card li::before{
  content:"";
  display:block;
  width:.28rem;
  height:.28rem;
  margin-top:.42em;
  border-radius:999px;
  background:#0b61df;
}
.billing-legal-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin:.55rem 0 0;
  color:#0b61df;
  font-size:.72rem;
  font-weight:600;
}
.billing-legal-links a{
  text-decoration:none;
  text-decoration-color:transparent;
  font-weight:600;
}
.billing-legal-links a:hover{
  text-decoration:underline;
}
.billing-bottom-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
}
.billing-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
  margin-top:.45rem;
}
.billing-benefits div{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"icon title" "icon text";
  column-gap:.55rem;
  align-items:center;
}
.billing-mini-icon{
  grid-area:icon;
  width:32px;
  height:32px;
}
.billing-mini-icon svg{
  width:18px;
  height:18px;
  display:block;
  margin:auto;
}
.billing-benefits strong{
  grid-area:title;
  color:var(--app-card-ink);
  font-weight:600;
}
.billing-benefits small{
  grid-area:text;
  color:var(--app-card-muted);
}
.billing-help-card .secondary{
  width:auto !important;
}
[data-app-theme="dark"] .billing-card-icon-blue,
[data-app-theme="dark"] .billing-mini-icon.billing-card-icon-blue{background:#17365f;color:#8fb9ff}
[data-app-theme="dark"] .billing-card-icon-green,
[data-app-theme="dark"] .billing-mini-icon.billing-card-icon-green{background:#123624;color:#86efac}
[data-app-theme="dark"] .billing-card-icon-orange{background:#3b250f;color:#fbbf24}
[data-app-theme="dark"] .billing-card-icon-purple,
[data-app-theme="dark"] .billing-mini-icon.billing-card-icon-purple{background:#33204f;color:#c4b5fd}
[data-app-theme="dark"] .dashboard-follow-marker.is-error{background:#3f171b;color:#fca5a5}
[data-app-theme="dark"] .dashboard-follow-marker.is-sent{background:#123842;color:#67e8f9}
[data-app-theme="dark"] .dashboard-follow-marker.is-created{background:#2e1f55;color:#c4b5fd}
[data-app-theme="dark"] .dashboard-follow-marker.is-paid{background:#123624;color:#86efac}
[data-app-theme="dark"] .dashboard-follow-marker.is-client{background:#172554;color:#93c5fd}
[data-app-theme="dark"] .dashboard-follow-marker.is-draft{background:#3f2a12;color:#fbbf24}
[data-app-theme="dark"] .dashboard-follow-marker.is-done{background:#253247;color:#cbd5e1}
[data-app-theme="dark"] .tag-activity-error{background:#3f171b;color:#fca5a5}
[data-app-theme="dark"] .tag-activity-paid{background:#123624;color:#86efac}
[data-app-theme="dark"] .tag-activity-sent{background:#123842;color:#67e8f9}
[data-app-theme="dark"] .tag-activity-created{background:#2e1f55;color:#c4b5fd}
[data-app-theme="dark"] .tag-activity-draft{background:#3f2a12;color:#fbbf24}
[data-app-theme="dark"] .tag-activity-client{background:#172554;color:#93c5fd}
[data-app-theme="dark"] .tag-activity-done{background:#253247;color:#cbd5e1}
[data-app-theme="dark"] .dashboard-follow-action{background:#1d2940}
[data-app-theme="dark"] .billing-status-active,
[data-app-theme="dark"] .billing-status-trial{
  border-color:#22543d;
  background:#102f22;
  color:#86efac;
}
[data-app-theme="dark"] .billing-status-warning,
[data-app-theme="dark"] .billing-profile-warning{
  border-color:#7c4a12;
  background:#2f1f0f;
  color:#facc15;
}
[data-app-theme="dark"] .billing-trial-countdown{
  border-color:#1e3a8a;
  background:#14213d;
  color:#93c5fd;
}
[data-app-theme="dark"] .billing-profile-warning strong{
  color:#facc15;
}
[data-app-theme="dark"] .billing-price,
[data-app-theme="dark"] .billing-card-title > span,
[data-app-theme="dark"] .billing-legal-links{
  color:#8fb9ff;
}
.bullets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5rem}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:.75rem}
.feature-card{display:flex;align-items:flex-start;gap:.6rem;padding:.8rem;border:1px solid var(--pico-muted-border-color);border-radius:10px;background:var(--surface-soft)}
.feature-card p{margin:0}
.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border:1px dashed rgba(15,23,42,.25)}
.feature-icon svg{width:18px;height:18px}
.feature-icon-blue{color:#1565c0;background:rgba(21,101,192,.18);border-radius:8px}
.feature-icon-green{color:#2e7d32;background:rgba(46,125,50,.18);border-radius:8px}
.feature-icon-amber{color:#9a6700;background:rgba(154,103,0,.2);border-radius:8px}
.feature-icon-red{color:#b42318;background:rgba(180,35,24,.18);border-radius:8px}
.how-step-card{
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:.45rem;
}
.how-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--pico-muted-border-color);
  border-radius:999px;
  font-weight:600;
}
.how-step-title{margin:0;font-size:1.45rem;line-height:1.2}
.how-step-text{margin:0}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.section-header h2{margin:0}
.section-header p{margin:0}
.section-header + article{margin-top:1rem}
.invoice-header .section-header a[role="button"]{width:auto !important}
.small{font-size:.9rem}
a[role="button"].dashboard-cta-large{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.section-header > p,
[data-testid="dashboard-container"] + section p{margin:0}
.link-subtle{color:inherit;text-decoration:underline;text-decoration-color:var(--underline-subtle)}
.link-subtle:hover{text-decoration-color:currentColor}
.mobile-back-link{
  display:none;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
table th,table td{vertical-align:top}
#follow-list th:nth-child(2),
#follow-list td:nth-child(2){text-align:right}
#paid-list th:nth-child(2),
#paid-list td:nth-child(2){text-align:right}
.active{color:var(--pico-primary);background:var(--surface-active)}
.help-box{border:1px solid var(--pico-muted-border-color);border-radius:10px;padding:1rem;background:var(--surface-soft);margin:1.5rem 0}
.badge-list{display:flex;flex-wrap:wrap;gap:.5rem}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:var(--surface-hover);font-size:.85rem}
.btn-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border:1px solid #dc2626 !important;
  background:#dc2626 !important;
  color:#fff !important;
  font-weight:600;
  box-shadow:none;
}
.btn-danger:hover,
.btn-danger:focus{
  border-color:#b91c1c !important;
  background:#b91c1c !important;
  color:#fff !important;
  text-decoration:none;
}
.offer-badge{
  display:inline-flex;
  align-items:center;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(0,166,255,.45);
  background:rgba(0,166,255,.12);
  font-weight:600;
}
.empty-state{padding:1rem;border:1px solid var(--pico-muted-border-color);border-radius:10px;background:var(--surface-soft)}
.notice{padding:1rem;border:1px solid var(--pico-muted-border-color);border-radius:10px;background:var(--surface-soft);margin:1rem 0}
.notice-success{border-color:#48a36d;background:rgba(72,163,109,.12)}
.notice-error{border-color:#c55353;background:rgba(197,83,83,.12)}
.validation-errors{
  margin:.28rem 0 .42rem;
  padding:0;
  list-style:none;
}
.validation-errors > li,
.form-error,
.invalid-feedback{
  display:block;
  margin:.18rem 0;
  color:#b91c1c;
  font-size:.84rem;
  font-weight:400;
  line-height:1.25;
}
.app-main input[aria-invalid="true"],
.app-main select[aria-invalid="true"],
.app-main textarea[aria-invalid="true"],
body:not(:has(.app-shell)) input[aria-invalid="true"],
body:not(:has(.app-shell)) select[aria-invalid="true"],
body:not(:has(.app-shell)) textarea[aria-invalid="true"]{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 1px rgba(220,38,38,.24) !important;
}
[data-app-theme="dark"] .validation-errors > li,
[data-app-theme="dark"] .form-error,
[data-app-theme="dark"] .invalid-feedback{
  color:#fca5a5;
}
[data-app-theme="dark"] .app-main input[aria-invalid="true"],
[data-app-theme="dark"] .app-main select[aria-invalid="true"],
[data-app-theme="dark"] .app-main textarea[aria-invalid="true"]{
  border-color:#f87171 !important;
  box-shadow:0 0 0 1px rgba(248,113,113,.34) !important;
}
.template-title{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
fieldset{margin-bottom:1.5rem}
.template-actions{display:flex;gap:.5rem;margin-top:.5rem;align-items:flex-start}
.field-label{display:flex;align-items:center;gap:.5rem}
.checkbox-inline{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 1.1rem}
.checkbox-inline input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
  width:1rem;
  height:1rem;
  min-width:1rem;
  margin:0;
  padding:0;
}
.checkbox-inline input[type="checkbox"][disabled]{
  opacity:.55;
  cursor:not-allowed;
}
.checkbox-inline label{margin:0;display:inline}
.form-help-inline{margin-top:-.25rem;margin-bottom:.75rem}
.field-status{margin-left:auto}
.field-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--pico-muted-color)}
.field-status svg{width:16px;height:16px;align-self:center;margin-right:2px}
.field-status.is-custom{color:#b7892b}
.field-status.is-default{color:#3a8f5c}
.field-status .status-default,
.field-status .status-custom{display:none}
.field-status.is-default .status-default{display:inline-flex}
.field-status.is-custom .status-custom{display:inline-flex}
.field-status.is-default .status-custom{display:none}
.field-status.is-custom .status-default{display:none}
.token-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 0}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;color:inherit}
.icon-button svg{width:20px;height:20px}
.table-actions{display:inline-flex;align-items:center;gap:.35rem}
.invoice-card{position:relative}
.invoice-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.25rem;margin-bottom:.75rem}
.invoice-details-grid p{margin:0 0 .95rem}
.invoice-details-grid strong{display:block;margin-bottom:.2rem}
.invoice-note-row{grid-column:1 / -1}
.invoice-paid-btn{display:inline-flex;align-items:center;justify-content:center;width:auto !important;min-width:0;padding:.5rem .9rem}
.invoice-actions{position:absolute;top:.75rem;right:.75rem}
.invoice-show-workspace{
  --show-border:#dbe3ef;
  --show-surface:#fff;
  --show-soft:#f6f9ff;
  --show-ink:#0b1538;
  --show-muted:#52607a;
  --show-blue:#1268f3;
  --show-blue-soft:#eef6ff;
  display:grid;
  gap:.65rem;
  color:var(--show-ink);
}
[data-app-theme="dark"] .invoice-show-workspace{
  --show-border:#334155;
  --show-surface:#172033;
  --show-soft:#1d2940;
  --show-ink:#edf4ff;
  --show-muted:#a8b3c7;
  --show-blue:#8fb9ff;
  --show-blue-soft:#17365f;
}
.invoice-show-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.invoice-show-header h2{
  margin:0 0 .22rem;
  color:var(--show-ink);
  font-size:1.42rem;
  line-height:1.15;
  font-weight:600;
}
.invoice-show-header p{
  margin:0;
  color:var(--show-muted);
  font-size:.86rem;
}
.invoice-show-menu summary{
  width:34px;
  height:34px;
  border:1px solid #b8d5ff;
  border-radius:8px;
  background:var(--show-blue-soft);
  color:var(--show-blue);
}
.invoice-show-menu[open],
.invoice-show-menu[open] summary{
  margin:0;
}
@media (min-width:769px){
  .invoice-show-header .invoice-show-menu{
    align-self:flex-end;
    margin:0 !important;
  }
  .invoice-show-header .invoice-show-menu summary{
    border-color:#8bbcff;
    background:#ffffff;
    color:#0b61df;
    box-shadow:0 8px 18px rgba(11,97,223,.14), 0 1px 2px rgba(15,23,42,.08);
  }
  .invoice-show-header .invoice-show-menu summary:hover,
  .invoice-show-header .invoice-show-menu[open] summary{
    border-color:#0b61df;
    background:#eaf2ff;
    color:#0748a6;
  }
  .invoice-show-header .invoice-show-menu .action-menu-panel{
    border-color:#b8d5ff;
    box-shadow:0 18px 38px rgba(15,23,42,.16), 0 0 0 1px rgba(11,97,223,.06);
  }
}
.invoice-show-card,
.invoice-show-mobile-summary,
.invoice-show-mobile-details,
.invoice-show-history{
  border:1px solid var(--show-border);
  border-radius:12px;
  background:var(--show-surface);
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.invoice-show-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,310px);
  grid-template-areas:
    "info info"
    "note payment";
  gap:.75rem 1rem;
  margin-top:0 !important;
  padding:.9rem 1rem;
}
.invoice-show-mobile-summary,
.invoice-show-mobile-details{
  display:none;
}
.invoice-show-details{
  display:contents;
}
.invoice-show-info-grid{
  grid-area:info;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem 1.25rem;
}
.invoice-show-info-item:nth-child(even){
  padding-left:1.25rem;
  border-left:1px solid var(--show-border);
}
.invoice-show-info-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.55rem;
  align-items:center;
  min-width:0;
  margin-bottom:.12rem;
}
.invoice-show-info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:999px;
  background:var(--show-blue-soft);
  color:var(--show-blue);
}
.invoice-show-info-icon svg{
  width:28px;
  height:28px;
}
.invoice-show-status-icon{
  background:#fee2e2;
  color:#dc2626;
}
.invoice-show-status-icon.is-paid{
  background:#dcfce7;
  color:#16a34a;
}
.invoice-show-status-icon.is-programmed{
  background:#fff7ed;
  color:#d97706;
}
.invoice-show-status-icon.is-completed,
.invoice-show-status-icon.is-draft{
  background:#f1f5f9;
  color:#64748b;
}
.invoice-show-info-item strong,
.invoice-show-note strong{
  display:block;
  margin:0 0 .12rem;
  color:var(--show-ink);
  font-size:.78rem;
  font-weight:600;
}
.invoice-show-info-item span:not(.invoice-show-info-icon):not(.invoice-show-status){
  display:block;
  color:var(--show-ink);
  font-size:.88rem;
  font-weight:500;
  overflow-wrap:anywhere;
}
.invoice-show-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:.18rem .52rem;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  line-height:1.15;
}
.invoice-show-status.is-running{background:#fee2e2;color:#dc2626}
.invoice-show-status.is-programmed{background:#fff7ed;color:#d97706}
.invoice-show-status.is-completed,
.invoice-show-status.is-draft{background:#f1f5f9;color:#64748b}
.invoice-show-status.is-paid{background:#dcfce7;color:#16a34a}
.invoice-show-note{
  grid-area:note;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  align-self:start;
  gap:0;
  padding-top:.75rem;
  border-top:1px solid var(--show-border);
}
.invoice-show-note strong{
  margin:0;
  line-height:1.05;
}
.invoice-show-note p{
  margin:-.02rem 0 0;
  color:var(--show-ink);
  font-size:.84rem;
  line-height:1.3;
}
.invoice-show-payment{
  grid-area:payment;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.5rem;
  border-top:1px solid var(--show-border);
  padding-top:.75rem;
}
.invoice-show-paid-btn,
.invoice-show-draft-btn{
  width:100% !important;
  min-height:40px;
  gap:.42rem;
  border-radius:8px;
  font-size:.88rem;
  font-weight:600;
}
.invoice-show-paid-btn svg{
  width:18px;
  height:18px;
}
.invoice-show-payment form{
  margin:0;
}
.invoice-show-payment .invoice-paid-info{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.35rem;
  align-items:start;
  margin:0;
  color:var(--show-muted);
  font-size:.78rem;
  line-height:1.35;
}
.invoice-show-payment .invoice-paid-info svg{
  display:block;
  align-self:start;
  width:15px;
  height:15px;
  margin-top:0;
  color:var(--show-blue);
}
.invoice-show-paid-state{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.55rem;
  align-items:center;
  color:#16a34a;
}
.invoice-show-paid-state svg{
  width:28px;
  height:28px;
}
.invoice-show-paid-state strong,
.invoice-show-paid-state span{
  display:block;
}
.invoice-show-paid-state span{
  color:var(--show-muted);
  font-size:.8rem;
}
.invoice-show-history{
  margin-top:0 !important;
  padding:.9rem 1rem;
}
.invoice-show-history h3{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0 0 .72rem;
  color:var(--show-ink);
  font-size:1rem;
  font-weight:600;
}
.invoice-show-history h3 svg{
  width:18px;
  height:18px;
}
.invoice-show-timeline{
  display:grid;
  gap:.45rem;
  position:relative;
}
.invoice-show-timeline-item{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:.6rem;
  align-items:start;
  position:relative;
}
.invoice-show-timeline-item::before{
  content:"";
  position:absolute;
  left:8.5px;
  top:18px;
  bottom:-.54rem;
  width:1px;
  transform:translateX(-50%);
  background:#cbd5e1;
}
.invoice-show-timeline-item:last-child::before{
  display:none;
}
.invoice-show-timeline-item > span{
  width:9px;
  height:9px;
  margin-top:.58rem;
  justify-self:center;
  border-radius:999px;
  background:#94a3b8;
  position:relative;
  z-index:1;
}
.invoice-show-timeline-item.is-current > span{
  background:var(--show-blue);
}
.invoice-show-timeline-item.is-error > span{
  background:#dc2626;
}
.invoice-show-timeline-item p{
  margin:0;
  padding:.55rem .7rem;
  border:1px solid var(--show-border);
  border-radius:8px;
  background:var(--show-soft);
  color:var(--show-ink);
  font-size:.84rem;
  line-height:1.35;
}
.invoice-show-timeline-item:not(.is-current) p{
  border-color:transparent;
  background:transparent;
  padding:.25rem .1rem;
}
.invoice-show-timeline-item strong,
.invoice-show-timeline-item small{
  display:block;
}
.invoice-show-timeline-item small{
  margin-top:.12rem;
  color:var(--show-muted);
  font-size:.72rem;
}
.action-menu{position:relative}
.action-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px}
.action-menu summary::marker{content:""}
.action-menu summary::after{content:none}
.action-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{content:none !important;display:none !important}
.nav-menu summary::marker{content:"" !important;display:none !important}
.action-menu-panel{position:absolute;right:0;margin-top:.35rem;min-width:160px;background:var(--pico-card-background-color);border:1px solid var(--pico-muted-border-color);border-radius:.6rem;padding:.35rem;display:flex;flex-direction:column;gap:.15rem;z-index:5}
.action-menu-panel .menu-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border-radius:.45rem;text-decoration:none}
.action-menu-panel .menu-item svg{width:16px;height:16px;flex:0 0 16px}
.action-menu-panel .menu-item:hover{background:var(--surface-hover);text-decoration:none}
.icon-button:hover{background:var(--surface-hover)}
.row-highlight{animation:row-highlight-fade 3s ease-out}
@keyframes row-highlight-fade{
  0%{background:var(--surface-active)}
  15%{background:var(--surface-active)}
  100%{background:transparent}
}
.invoice-mobile-tabs{display:flex;gap:.5rem;margin:0 0 1rem}
.invoice-mobile-tabs .tab-btn{flex:0 0 auto;border-radius:999px;padding:.45rem .7rem;background:var(--surface-hover)}
.invoice-mobile-tabs .tab-btn.is-active{background:var(--surface-active)}
.is-hidden{display:none}
.pagination{display:flex;align-items:center;gap:.5rem;margin-top:.75rem}
.pagination-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;color:inherit;text-decoration:none;background:var(--surface-hover);transition:background-color .18s ease,color .18s ease}
.pagination-btn:hover{background:var(--surface-active)}
.pagination-btn.disabled{opacity:.45;pointer-events:none}
.pagination-range{font-size:.9rem;color:var(--pico-muted-color)}
.pagination-spinner{display:inline-flex;align-items:center;justify-content:center;opacity:.7}
.pagination-spinner svg{width:16px;height:16px}
.pagination-spinner.is-loading svg{animation:spin .8s linear infinite}
.live-loading-indicator{
  display:none;
  align-items:center;
  justify-self:start;
  align-self:center;
  width:max-content;
  min-width:max-content;
  gap:.35rem;
  color:var(--pico-muted-color);
  font-size:.86rem;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.live-loading-indicator.is-visible{
  display:inline-flex;
}
.live-loading-spinner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.live-loading-spinner svg{
  width:18px;
  height:18px;
  animation:spin .8s linear infinite;
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.primary{
  background-color:var(--pico-primary);
  background-image:linear-gradient(135deg, var(--pico-primary), var(--pico-primary));
  transition:background-image 500ms ease-in-out,background-color 500ms ease-in-out,color 500ms ease-in-out;
}
.primary:hover,
.primary:focus{
background-color:var(--pico-primary);
background-image:linear-gradient(135deg, var(--pico-primary), #39c88a);
}

/* Responsive */
@media (max-width:480px){
  .container{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  header.container,
  main.container{max-width:100% !important;width:100% !important;min-width:0}
  header.container{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--pico-background-color)}
  main.container{padding-top:5rem;padding-left:.75rem;padding-right:.75rem}
  main.container > *:not(.hero){padding-left:.75rem;padding-right:.75rem;margin-top:1.75rem}
  footer.container{padding-top:1rem}
  main{max-width:100% !important;min-width:0;margin:1rem 0;padding:0}
  header.container{padding-top:0 !important;padding-bottom:0 !important}
  header .brand{font-size:1rem}
  .hero{padding:1rem;margin-top:.5rem}
  .hero h1{font-size:1.6rem}
  .hero-cta-row{align-items:flex-start}
  .hero-cta-row a[role="button"]{width:auto;max-width:100%}
  .feature-grid{grid-template-columns:1fr}
  .section-header{align-items:flex-start}
  .section-header a[role="button"]{width:auto}
  .invoice-header .section-header{gap:.5rem}
  .kpi-grid{grid-template-columns:1fr}
  .kpi-grid,
  .card-grid,
  .feature-grid,
  .hero,
  .help-box,
  .notice,
  .empty-state,
  .app-footer,
  table,
  .invoice-mobile-tabs,
  .section-header{max-width:100% !important}
  .section{margin-top:1rem}
  .section{padding-left:.75rem;padding-right:.75rem}
  .card-grid{grid-template-columns:1fr}
  .dashboard-follow-grid{grid-template-columns:1fr !important}
  .bullets{grid-template-columns:1fr}
  .card{padding:.75rem}
  .kpi{padding:.75rem}
  .help-box{padding:.75rem;margin:.75rem 0}
  .notice{padding:.75rem}
  .empty-state{padding:.75rem}
  .app-footer{padding:.6rem .75rem}
  .template-actions{flex-direction:column}
  .template-actions button{width:auto}
  form button[type="submit"],
  a[role="button"]{width:auto;max-width:100%}
  .invoice-paid-btn{width:auto !important}
  .invoice-mobile-tabs{flex-wrap:wrap}
  .invoice-mobile-tabs .tab-btn{max-width:100%;width:100%;flex:1 1 100%}
  [data-testid="profile-submit"],
  [data-testid="profile-delete-cta"]{width:100%}
  .hero-trust-item{max-width:100%;overflow-wrap:anywhere}
  .feature-card{min-width:0}
  .feature-card p{overflow-wrap:anywhere}
  .invoice-details-grid{min-width:0}
  .invoice-details-grid p{overflow-wrap:anywhere}
  .action-menu-panel{max-width:calc(100vw - 1.5rem)}
  nav{position:relative;display:flex;align-items:center}
  nav > ul:first-child{flex:1;min-width:0}
  .nav-menu{width:100%;position:relative;display:flex;justify-content:end;margin-left:auto}
  .nav-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:999px;background:var(--surface-hover)}
  .nav-menu summary::marker{content:""}
  .nav-menu summary::-webkit-details-marker{display:none}
  .nav-menu:not([open]) > ul{display:none}
  .nav-menu[open] > ul{display:flex}
  .nav-menu ul{
    position:fixed;
    inset:0;
    z-index:50;
    margin:0;
    padding:4rem .75rem .75rem;
    background:rgba(12,16,24,0.98);
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .nav-menu li{margin:0}
  .nav-menu a{display:block;padding:.5rem .65rem;border-radius:10px}
  .nav-menu[open] summary{position:relative;z-index:60;margin-top:15px}
  .nav-icon svg{width:22px;height:22px}
  main.container > *,
  .hero > *,
  .section > *,
  .help-box > *,
  .app-footer > *{min-width:0}
  .app-frame{margin-left:0}
  .app-topbar{min-height:62px;padding:.65rem .75rem}
  .app-main.container{width:100% !important;margin:0;padding:1rem .75rem 0 !important}
  .app-footer-container.container{width:100% !important;margin:0;padding:.75rem !important}
  .app-sidebar{
    width:min(86vw,300px);
    transform:translateX(-100%);
    transition:transform .18s ease;
  }
  .app-shell.is-sidebar-open .app-sidebar{transform:translateX(0)}
  .sidebar-close{display:inline-flex}
  .app-shell:not(.is-sidebar-open) .sidebar-overlay{display:none}
  .topbar-brand{display:inline-flex}
  .topbar-help span,
  .user-meta,
  .user-chevron{display:none}
  .topbar-actions{gap:.35rem}
  .topbar-action{padding:.42rem}
  .notification-panel{right:-2.75rem;width:min(280px,calc(100vw - 1.5rem))}
  .user-menu summary{min-height:38px;padding:.18rem;border-radius:999px}
  .user-avatar{width:32px;height:32px}
  .user-menu-panel{right:0;min-width:190px}
  .sidebar-nav{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:.28rem !important;position:static !important}
}

@media (min-width:481px) and (max-width:768px){
  main{max-width:720px;padding:0 1rem}
  .hero h1{font-size:1.9rem}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-follow-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

@media (min-width:481px){
    details.nav-menu{display:flex;overflow:visible;align-items:center;margin-bottom:0}
  .nav-menu > summary{display:none}
  .nav-menu > ul{display:flex !important}
  .nav-menu[open] > ul{display:flex !important}
  .nav-menu:not([open]) > ul{display:flex !important}
  .nav-menu > ul{
    gap:.5rem;
    align-items:center;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    position:static !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
    transform:none !important;
  }
}

@media (max-width:768px){
  body:not(:has(.app-shell)) header.container{
    position:sticky;
    top:0;
    z-index:100;
    padding:0 .65rem !important;
    background:transparent;
  }
  body:not(:has(.app-shell)) header.container nav{
    min-height:52px;
    padding:.34rem .45rem;
    border-radius:14px;
    backdrop-filter:blur(16px);
  }
  body:not(:has(.app-shell)) header.container nav::before{
    left:0;
    width:100%;
    transform:none;
    border:1px solid rgba(184,213,255,.72);
    border-radius:14px;
    background:rgba(255,255,255,.9);
    box-shadow:0 12px 30px rgba(15,23,42,.08);
  }
  body:not(:has(.app-shell)) header .brand{
    gap:.42rem;
    font-size:.94rem;
  }
  body:not(:has(.app-shell)) header .logo{
    height:30px;
  }
  body:not(:has(.app-shell)) details.nav-menu{
    width:auto;
    flex:0 0 auto;
    margin-left:auto;
  }
  body:not(:has(.app-shell)) .nav-menu > summary{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid rgba(184,213,255,.72);
    border-radius:999px;
    background:#fff;
    color:var(--public-blue);
    list-style:none;
    cursor:pointer;
  }
  body:not(:has(.app-shell)) .nav-menu > summary::marker{
    content:"";
  }
  body:not(:has(.app-shell)) .nav-menu > summary::-webkit-details-marker{
    display:none;
  }
  body:not(:has(.app-shell)) .nav-menu:not([open]) > ul{
    display:none !important;
  }
  body:not(:has(.app-shell)) .nav-menu[open] > ul{
    position:fixed !important;
    inset:.65rem;
    z-index:150;
    display:flex !important;
    flex-direction:column;
    gap:.5rem;
    height:auto !important;
    max-height:calc(100vh - 1.3rem) !important;
    margin:0;
    padding:4.25rem .9rem 1rem;
    overflow:auto;
    border:1px solid rgba(184,213,255,.72);
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 70px rgba(15,23,42,.18);
  }
  body:not(:has(.app-shell)) .nav-menu[open] summary{
    position:fixed;
    top:1rem;
    right:1rem;
    z-index:160;
  }
  body:not(:has(.app-shell)) .nav-menu li{
    width:100%;
    margin:0;
  }
  body:not(:has(.app-shell)) .nav-menu a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:0;
    padding:.72rem .78rem;
    border:1px solid var(--public-border);
    border-radius:12px;
    background:#fff;
    font-size:.9rem;
  }
  body:not(:has(.app-shell)) main.container{
    margin:0 auto;
    padding:.45rem .75rem 0;
  }
  body:not(:has(.app-shell)) .public-hero{
    grid-template-columns:1fr;
    gap:.95rem;
    margin-top:.15rem;
    padding:.95rem 0 .6rem;
    border-radius:0;
  }
  body:not(:has(.app-shell)) .hero h1{
    max-width:100%;
    font-size:clamp(2rem,9vw,2.5rem);
    line-height:1.02;
  }
  body:not(:has(.app-shell)) .hero-subtitle{
    max-width:100%;
    font-size:.9rem;
    line-height:1.42;
  }
  body:not(:has(.app-shell)) .public-product-card{
    display:block;
    padding:.72rem;
    border-radius:15px;
    transform:none;
    box-shadow:0 16px 42px rgba(15,23,42,.1);
  }
  body:not(:has(.app-shell)) .public-product-card::before{
    content:none;
  }
  body:not(:has(.app-shell)) .public-metric-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.35rem;
  }
  body:not(:has(.app-shell)) .public-metric-grid div{
    padding:.46rem;
  }
  body:not(:has(.app-shell)) .public-metric-grid small{
    font-size:.61rem;
    line-height:1.15;
  }
  body:not(:has(.app-shell)) .public-metric-grid strong{
    font-size:.82rem;
  }
  body:not(:has(.app-shell)) .public-table-row{
    grid-template-columns:1.05fr .55fr .72fr;
    gap:.35rem;
    padding:.42rem .46rem;
    font-size:.64rem;
  }
  body:not(:has(.app-shell)) .public-status{
    padding:.1rem .3rem;
    font-size:.61rem;
  }
  body:not(:has(.app-shell)) .public-next-card{
    align-items:flex-start;
    gap:.5rem;
    padding:.48rem;
  }
  body:not(:has(.app-shell)) .public-next-card p{
    font-size:.68rem;
  }
  body:not(:has(.app-shell)) .public-feature-grid,
  body:not(:has(.app-shell)) .public-step-grid,
  body:not(:has(.app-shell)) .public-pricing-section,
  body:not(:has(.app-shell)) .public-faq-section{
    grid-template-columns:1fr;
    gap:.65rem;
  }
  body:not(:has(.app-shell)) .public-feature-grid .feature-card{
    min-height:0;
    padding:.62rem 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  body:not(:has(.app-shell)) .public-feature-grid .feature-card + .feature-card{
    border-top:1px solid var(--public-border);
  }
  body:not(:has(.app-shell)) .public-feature-grid{
    gap:0;
  }
  body:not(:has(.app-shell)) .public-feature-grid .feature-icon{
    width:42px;
    height:42px;
    border-radius:12px;
  }
  body:not(:has(.app-shell)) .public-feature-grid .feature-icon svg{
    width:24px;
    height:24px;
  }
  body:not(:has(.app-shell)) .public-section-heading{
    margin:0 0 .55rem;
    text-align:left;
  }
  body:not(:has(.app-shell)) .public-section-heading h2,
  body:not(:has(.app-shell)) .public-pricing-section h2,
  body:not(:has(.app-shell)) .public-faq-section h2{
    font-size:1.35rem;
    line-height:1.12;
  }
  body:not(:has(.app-shell)) .section{
    margin-top:.85rem;
  }
  body:not(:has(.app-shell)) .public-pricing-section{
    padding:.9rem;
    border-radius:16px;
  }
  body:not(:has(.app-shell)) .public-price-card{
    padding:.82rem;
  }
  body:not(:has(.app-shell)) .public-faq-list{
    gap:.35rem;
  }
  body:not(:has(.app-shell)) .public-legal-page{
    width:100%;
    margin:.65rem auto 0;
    padding:.9rem;
    border-radius:0;
  }
  body:not(:has(.app-shell)) .public-legal-page h2{
    margin-bottom:.62rem;
    font-size:1.28rem;
    line-height:1.14;
    overflow-wrap:anywhere;
  }
  body:not(:has(.app-shell)) .public-legal-page h3{
    margin:.9rem 0 .28rem;
    font-size:.92rem;
  }
  body:not(:has(.app-shell)) .public-legal-page p,
  body:not(:has(.app-shell)) .public-legal-page li{
    font-size:.82rem;
    line-height:1.48;
    overflow-wrap:anywhere;
  }
  body:not(:has(.app-shell)) .public-legal-page ul{
    padding-left:1rem;
  }
  body:not(:has(.app-shell)) .public-legal-faq{
    padding:0;
    gap:.5rem;
  }
  body:not(:has(.app-shell)) .public-legal-faq .help-box{
    padding:.78rem 0;
  }
  body:not(:has(.app-shell)) footer.container{
    padding:0 .65rem .75rem;
  }
  button[data-testid="profile-submit"],
  a[data-testid="profile-delete-cta"],
  button[data-testid="billing-cancel-submit"],
  button[data-testid="billing-checkout-submit"],
  a[data-testid="invoice-create-cta"],
  .hero-cta-row a[role="button"]{
    width:100% !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  a[role="button"].dashboard-cta-large{width:100% !important;min-width:0 !important}
  .dashboard-cta-wrap{width:100%;margin:0}
  .invoice-header .section-header .invoice-cta-wrap{
    flex:1 0 100%;
    width:100%;
    max-width:100%;
    margin:0;
  }
  .invoice-cta-wrap{width:100%;margin:0}
  .invoice-cta-wrap a[role="button"]{
    display:flex !important;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100% !important;
    max-width:100%;
  }
  .invoice-cta-wrap a[role="button"],
  .dashboard-cta-wrap a[role="button"],
  .empty-state a[role="button"],
  button[data-testid="profile-submit"],
  a[data-testid="profile-delete-cta"],
  button[data-testid="billing-cancel-submit"],
  button[data-testid="billing-checkout-submit"],
  a[data-testid="invoice-create-cta"]{
    min-height:36px;
    padding:.46rem .68rem;
    border-radius:8px;
    font-size:.82rem;
    line-height:1.15;
    font-weight:600;
  }
  .invoice-cta-wrap a[role="button"] svg,
  .dashboard-cta-wrap a[role="button"] svg,
  .empty-state a[role="button"] svg{
    width:16px;
    height:16px;
  }
  .invoice-header > p.muted{margin-top:.75rem}
  #email-templates-form .template-actions button{width:100% !important}
  [data-testid="profile-delete-section"]{padding-left:0 !important;padding-right:0 !important}
  table{width:100%}
  table thead{display:none}
  table tbody tr{display:block;border:1px solid var(--pico-muted-border-color);border-radius:10px;padding:.75rem;margin-bottom:.75rem;background:var(--surface-soft)}
  table tbody td{display:flex;justify-content:space-between;gap:.4rem;padding:.35rem .50rem}
  table tbody td{min-width:0;overflow-wrap:anywhere}
  table tbody td::before{content:attr(data-label);color:var(--app-card-muted);font-weight:600}
  #reminders-list table tbody td{
    display:block;
    width:100%;
    padding:.35rem .50rem;
  }
  #reminders-list table tbody td::before{
    display:block;
    margin-bottom:.2rem;
  }
  #follow-list td:nth-child(2),
  #paid-list td:nth-child(2){text-align:right}
  .invoice-details-grid{grid-template-columns:1fr}
  .app-frame{margin-left:0}
  .app-topbar{padding:.7rem 1rem}
  .app-main.container{width:100%;max-width:100% !important;margin:0;padding:1rem !important}
  .app-footer-container.container{width:100%;max-width:100% !important;margin:0;padding:1rem !important}
  .app-sidebar{
    width:min(84vw,304px);
    transform:translateX(-100%);
    transition:transform .18s ease;
  }
  .app-shell.is-sidebar-open .app-sidebar{transform:translateX(0)}
  .sidebar-close{display:inline-flex}
  .app-shell:not(.is-sidebar-open) .sidebar-overlay{display:none}
  .topbar-brand{display:inline-flex}
  .sidebar-nav{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:.28rem !important;position:static !important}
}

@media (min-width:769px){
  main{max-width:var(--content-max)}
  .topbar-menu{display:none}
  .dashboard-follow-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  button[data-testid="billing-cancel-submit"],
  button[data-testid="billing-checkout-submit"]{width:auto !important;display:inline-flex}
  .app-shell .hero{padding:0}
}

@media (max-width:760px){
  .invoice-new-layout{grid-template-columns:1fr}
  .invoice-new-preview{order:2}
  .client-new-layout{grid-template-columns:1fr}
  .client-new-preview{order:2}
  .profile-new-layout{grid-template-columns:1fr}
  .profile-edit-side{display:flex;flex-direction:column;gap:.62rem}
  .profile-new-preview{order:2}
  .clients-toolbar a[role="button"]{justify-content:center}
}

@media (max-width:640px){
  .invoice-form-grid,
  .invoice-new-actions,
  .client-form-grid,
  .client-new-actions,
  .profile-form-grid,
  .profile-new-actions{grid-template-columns:1fr}
  .invoice-client-select-row{grid-template-columns:1fr}
  .invoice-inline-link{justify-self:start}
  .invoice-new-preview dl div{
    grid-template-columns:1fr;
    gap:.18rem;
  }
  .invoice-new-preview dd,
  .client-new-preview dd,
  .profile-new-preview dd{text-align:left}
  .client-new-preview dl div,
  .profile-new-preview dl div{
    grid-template-columns:1fr;
    gap:.18rem;
  }
}

@media (prefers-color-scheme: light){
  .invoice-mobile-tabs .tab-btn{
    background:rgba(15,23,42,.08);
    border:1px solid rgba(15,23,42,.2);
    color:#0f172a;
  }
  .invoice-mobile-tabs .tab-btn.is-active{
    background:rgba(15,23,42,.16);
    color:#0f172a;
  }
  @media (max-width:480px){
    .nav-menu ul{
      background:rgba(255,255,255,.98);
    }
    .nav-menu a{
      color:#0f172a;
      background:transparent;
    }
    .nav-menu a:hover{
      background:rgba(15,23,42,.08);
    }
    .nav-menu summary{
      color:#0f172a;
    }
  }
}

@media (max-width:480px){
  body:not(:has(.app-shell)) header.container{
    position:sticky;
    top:0;
    left:auto;
    right:auto;
    padding:0 .55rem !important;
    background:transparent;
  }
  body:not(:has(.app-shell)) main.container{
    padding:.35rem .65rem 0 !important;
  }
  body:not(:has(.app-shell)) main.container > *:not(.hero){
    padding-left:0;
    padding-right:0;
    margin-top:.85rem;
  }
  body:not(:has(.app-shell)) main.container > .public-legal-page{
    padding:.82rem 0;
    margin-top:.65rem;
  }
  body:not(:has(.app-shell)) main.container > .public-legal-faq{
    padding:0;
  }
  body:not(:has(.app-shell)) .hero{
    margin-top:0;
    padding:.85rem 0 .45rem;
  }
  body:not(:has(.app-shell)) .hero-eyebrow{
    max-width:100%;
    font-size:.68rem;
    line-height:1.2;
  }
  body:not(:has(.app-shell)) .hero h1{
    margin:.55rem 0 .62rem;
    font-size:clamp(1.92rem,10vw,2.32rem);
  }
  body:not(:has(.app-shell)) .hero-cta-row{
    gap:.5rem;
  }
  body:not(:has(.app-shell)) .hero-trust-row{
    display:grid;
    grid-template-columns:1fr;
    gap:.38rem;
  }
  body:not(:has(.app-shell)) .hero-trust-item{
    width:100%;
    border-radius:11px;
  }
  body:not(:has(.app-shell)) .nav-menu{
    width:auto;
    flex:0 0 auto;
  }
  body:not(:has(.app-shell)) .nav-menu summary{
    width:38px;
    height:38px;
    padding:0;
    margin:0;
    border:1px solid rgba(184,213,255,.72);
    background:#fff;
    color:var(--public-blue);
  }
  body:not(:has(.app-shell)) .nav-menu[open] summary{
    position:fixed;
    top:.72rem;
    right:.72rem;
    z-index:160;
    margin:0;
  }
  body:not(:has(.app-shell)) .nav-menu ul{
    z-index:150;
    padding:4.25rem .9rem 1rem;
    background:rgba(255,255,255,.98);
  }
  body:not(:has(.app-shell)) .nav-menu a{
    padding:.72rem .78rem;
    border:1px solid var(--public-border);
    border-radius:12px;
    background:#fff;
    color:var(--public-ink);
    font-size:.9rem;
  }
  body:not(:has(.app-shell)) .public-login-link,
  body:not(:has(.app-shell)) .public-start-link{
    margin-left:0;
    text-align:center;
  }
  body:not(:has(.app-shell)) .public-product-top{
    align-items:flex-start;
  }
  body:not(:has(.app-shell)) .public-metric-grid{
    grid-template-columns:1fr;
  }
  body:not(:has(.app-shell)) .public-metric-grid div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
  }
  body:not(:has(.app-shell)) .public-table-row{
    grid-template-columns:1fr .58fr .72fr;
  }
  body:not(:has(.app-shell)) .public-feature-grid,
  body:not(:has(.app-shell)) .public-step-grid{
    gap:.55rem;
  }
  body:not(:has(.app-shell)) .public-faq-section,
  body:not(:has(.app-shell)) .public-pricing-section{
    gap:.7rem;
  }
  body:not(:has(.app-shell)) footer.container{
    padding:.85rem .65rem .75rem !important;
  }
  body:not(:has(.app-shell)) .app-footer{
    gap:.45rem;
  }
}

@media (max-width:768px){
  body:not(:has(.app-shell)):has(.auth-card) header.container{
    position:sticky;
    top:0;
    z-index:100;
    padding:0 .75rem !important;
    background:transparent;
  }
  body:not(:has(.app-shell)):has(.auth-card) header.container nav{
    display:flex;
    justify-content:center;
    min-height:40px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  body:not(:has(.app-shell)):has(.auth-card) header.container nav::before{
    content:none;
  }
  body:not(:has(.app-shell)):has(.auth-card) header.container nav > ul:first-child{
    flex:0 0 auto;
  }
  body:not(:has(.app-shell)):has(.auth-card) header .brand{
    justify-content:center;
    margin:0 auto;
    gap:.46rem;
    font-size:.94rem;
  }
  body:not(:has(.app-shell)):has(.auth-card) header .logo{
    height:28px;
  }
  body:not(:has(.app-shell)):has(.auth-card) .nav-menu{
    display:none !important;
  }
  body:not(:has(.app-shell)) main.container:has(.auth-card){
    flex:1 1 auto;
    min-height:0;
    margin:0 auto;
    padding:0 .75rem !important;
  }
  body:not(:has(.app-shell)) main.container:has(.auth-card-register){
    justify-content:flex-start;
    padding:.65rem .75rem !important;
  }
  body:not(:has(.app-shell)) .auth-card{
    width:100%;
    padding:.55rem !important;
    border-radius:15px;
    box-shadow:0 10px 28px rgba(15,23,42,.07);
  }
  body:not(:has(.app-shell)) .auth-card h2{
    font-size:1.08rem;
  }
  body:not(:has(.app-shell)) .auth-card > .muted{
    margin-bottom:.38rem;
  }
  body:not(:has(.app-shell)) .auth-card form{
    gap:.25rem;
  }
  body:not(:has(.app-shell)) .auth-card input:not([type="checkbox"]):not([type="radio"]),
  body:not(:has(.app-shell)) .auth-card textarea,
  body:not(:has(.app-shell)) .auth-card select{
    min-height:30px;
    font-size:.78rem;
  }
  body:not(:has(.app-shell)) .auth-card .forgot-password-link{
    margin:.32rem 0 0;
  }
  body:not(:has(.app-shell)) .auth-card .help-box{
    margin-top:.28rem;
    padding:.42rem;
  }
  body:not(:has(.app-shell)):has(.auth-card) footer.container{
    display:block;
    margin:0 auto;
    padding:0 .75rem .28rem !important;
  }
  body:not(:has(.app-shell)):has(.auth-card) .app-footer{
    padding:.28rem .5rem;
    font-size:.64rem;
  }
}

@media (max-width:768px){
  body:not(:has(.app-shell)):has(.public-hero) header.container{
    position:sticky;
    top:0;
    z-index:100;
    padding:0 .75rem !important;
    background:transparent;
  }
  body:not(:has(.app-shell)):has(.public-hero) header.container nav{
    display:flex;
    justify-content:center;
    min-height:46px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  body:not(:has(.app-shell)):has(.public-hero) header.container nav::before{
    content:none;
  }
  body:not(:has(.app-shell)):has(.public-hero) header.container nav > ul:first-child{
    flex:0 0 auto;
  }
  body:not(:has(.app-shell)):has(.public-hero) header .brand{
    justify-content:center;
    margin:0 auto;
    gap:.46rem;
    font-size:1rem;
  }
  body:not(:has(.app-shell)):has(.public-hero) header .logo{
    height:32px;
  }
  body:not(:has(.app-shell)):has(.public-hero) .nav-menu{
    display:none !important;
  }
  body:not(:has(.app-shell)):has(.public-hero) .public-pricing-section,
  body:not(:has(.app-shell)):has(.public-hero) .public-faq-section{
    padding:1rem !important;
  }
}
@media (max-width:768px){
  body:not(:has(.app-shell)) .public-site-header-inner{
    justify-content:center;
    min-height:46px;
    padding:0 .75rem;
  }
  body:not(:has(.app-shell)) .public-header-brand{
    justify-content:center;
    gap:.46rem;
    font-size:1rem;
  }
  body:not(:has(.app-shell)) .public-header-brand .logo{
    height:32px;
  }
  body:not(:has(.app-shell)) .public-header-links{
    display:none;
  }
}
.app-footer{
  border:1px solid var(--app-card-border);
  border-radius:12px;
  padding:.8rem 1rem;
  background:var(--app-panel-raised);
  color:var(--app-card-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
.app-footer-links{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.app-footer-links a{
  color:inherit;
  text-decoration:none;
}
.app-footer-links a:hover{
  text-decoration:underline;
  text-decoration-color:currentColor;
}
.has-confirm-modal{
  overflow:hidden;
}
.confirm-modal[hidden]{
  display:none;
}
.has-onboarding-modal{
  overflow:hidden;
}
.onboarding-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:1rem;
}
.onboarding-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.52);
  backdrop-filter:blur(10px);
}
.onboarding-dialog{
  position:relative;
  z-index:1;
  width:min(620px,100%);
  border:1px solid rgba(37,99,235,.22);
  border-radius:14px;
  background:var(--card-bg);
  box-shadow:0 24px 70px rgba(15,23,42,.28);
  padding:1.35rem;
}
.onboarding-close{
  position:absolute;
  top:.8rem;
  right:.8rem;
  width:2.25rem;
  height:2.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--pico-muted-border-color);
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--text-strong);
}
.onboarding-close svg{
  width:1.05rem;
  height:1.05rem;
}
.onboarding-icon{
  width:3rem;
  height:3rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#0b61df;
  background:rgba(37,99,235,.1);
  margin-bottom:.85rem;
}
.onboarding-icon svg{
  width:1.7rem;
  height:1.7rem;
}
.onboarding-kicker{
  margin:0 0 .25rem;
  color:#0b61df;
  font-size:.82rem;
  font-weight:700;
}
.onboarding-dialog h2{
  margin:0 2.5rem .55rem 0;
  font-size:1.55rem;
  line-height:1.15;
  letter-spacing:0;
}
.onboarding-dialog p{
  margin:.35rem 0;
}
.onboarding-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;
  margin:1rem 0 1.1rem;
}
.onboarding-steps span{
  display:flex;
  align-items:center;
  gap:.45rem;
  min-height:3.1rem;
  padding:.65rem;
  border:1px solid var(--pico-muted-border-color);
  border-radius:10px;
  background:var(--surface-soft);
  color:var(--text-strong);
  font-size:.86rem;
  font-weight:650;
}
.onboarding-steps svg{
  width:1.1rem;
  height:1.1rem;
  color:#0b61df;
  flex:0 0 auto;
}
.onboarding-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.onboarding-actions a,
.onboarding-actions button{
  width:100%;
  margin:0;
}
[data-app-theme="dark"] .onboarding-dialog{
  background:#121826;
  border-color:rgba(96,165,250,.26);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
[data-app-theme="dark"] .onboarding-icon,
[data-app-theme="dark"] .onboarding-steps span{
  background:rgba(96,165,250,.1);
}
@media (max-width: 720px){
  .onboarding-modal{
    align-items:end;
    padding:.75rem;
  }
  .onboarding-dialog{
    width:100%;
    max-height:calc(100dvh - 1.5rem);
    overflow:auto;
    border-radius:14px;
    padding:1rem;
  }
  .onboarding-dialog h2{
    margin-right:2.25rem;
    font-size:1.28rem;
  }
  .onboarding-steps{
    grid-template-columns:1fr;
    gap:.45rem;
    margin:.85rem 0;
  }
  .onboarding-steps span{
    min-height:2.7rem;
  }
  .onboarding-actions{
    grid-template-columns:1fr;
    gap:.55rem;
  }
}
.confirm-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:1rem;
}
.confirm-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(4px);
}
.confirm-dialog{
  position:relative;
  z-index:1;
  width:min(440px,100%);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.75rem;
  margin:0;
  padding:1rem;
  border:1px solid var(--app-card-border);
  border-radius:14px;
  background:var(--app-panel-raised);
  color:var(--app-card-ink);
  box-shadow:0 24px 70px rgba(15,23,42,.24);
}
.confirm-dialog-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#fff7ed;
  color:#c2410c;
}
.confirm-dialog-icon svg{
  width:22px;
  height:22px;
  display:block;
}
.confirm-dialog-copy h2{
  margin:0 0 .25rem;
  color:var(--app-card-ink);
  font-size:1rem;
  font-weight:600;
}
.confirm-dialog-copy p{
  margin:0;
  color:var(--app-card-muted);
  font-size:.86rem;
  line-height:1.35;
}
.confirm-dialog-actions{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem;
  width:100%;
  margin-top:.25rem;
}
.confirm-dialog-actions button{
  width:100% !important;
  min-width:0;
  min-height:34px;
  margin:0;
  padding:.38rem .75rem;
  border-radius:8px;
  font-size:.8rem;
}
[data-app-theme="dark"] .confirm-dialog-icon{
  background:#3b2414;
  color:#fdba74;
}

/* Email reminder editor */
.email-workspace{
  --email-blue:#0b61df;
  --email-blue-soft:#eaf2ff;
  --email-border:#dbe3ef;
  --email-ink:#0b1538;
  --email-muted:#43506d;
  --email-surface:#fff;
  --email-surface-soft:#f8fbff;
  --email-token-bg:#f1f5f9;
  --email-sticky-surface:rgba(248,250,252,.96);
}
[data-app-theme="dark"] .email-workspace{
  --email-blue:#8fb9ff;
  --email-blue-soft:#17365f;
  --email-border:#334155;
  --email-ink:#edf4ff;
  --email-muted:#a8b3c7;
  --email-surface:#172033;
  --email-surface-soft:#1d2940;
  --email-token-bg:#0f1b2f;
  --email-sticky-surface:rgba(23,32,51,.96);
}
.invoice-workspace{
  --invoice-blue:#0b61df;
  --invoice-blue-soft:#eaf2ff;
  --invoice-border:#dbe3ef;
  --invoice-ink:#0b1538;
  --invoice-muted:#43506d;
  --invoice-surface:#fff;
  --invoice-surface-soft:#f8fbff;
  --invoice-row:#fbfdff;
  --status-programmed:#f59e0b;
  --status-running:#8b5cf6;
  --status-paid:#0ea5e9;
  --status-completed:#22c55e;
  color:var(--invoice-ink);
}
[data-app-theme="dark"] .invoice-workspace{
  --invoice-blue:#8fb9ff;
  --invoice-blue-soft:#17365f;
  --invoice-border:#334155;
  --invoice-ink:#edf4ff;
  --invoice-muted:#a8b3c7;
  --invoice-surface:#172033;
  --invoice-surface-soft:#1d2940;
  --invoice-row:#151f31;
  --status-programmed:#fbbf24;
  --status-running:#c4b5fd;
  --status-paid:#7dd3fc;
  --status-completed:#86efac;
}
.invoice-workspace .invoice-header{
  margin:0 0 .5rem;
}
.invoice-workspace .invoice-header h2{
  margin:0 0 .22rem;
  color:var(--invoice-ink);
  font-size:1.42rem;
  line-height:1.15;
}
.invoice-workspace .invoice-header .muted{
  margin:0;
  color:var(--invoice-blue);
  font-size:.82rem;
  font-weight:600;
}
.invoice-workspace .help-box,
.invoice-workspace .invoice-table-card,
.clients-workspace .invoice-table-card{
  border:1px solid var(--invoice-border);
  border-radius:10px;
  background:var(--invoice-surface);
  color:var(--invoice-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.invoice-workspace .help-box{
  margin:.5rem 0;
  padding:.42rem .55rem;
}
.invoice-workspace .invoice-status-legend{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
.invoice-workspace .invoice-status-legend > span{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.04rem .32rem;
  align-items:start;
  color:var(--invoice-muted);
  font-size:.7rem;
  line-height:1.16;
  padding:0 .55rem;
  position:relative;
}
.invoice-workspace .invoice-status-legend > span:first-child{
  padding-left:0;
}
.invoice-workspace .invoice-status-legend > span:not(:last-child)::after{
  content:"";
  position:absolute;
  top:.05rem;
  right:0;
  bottom:.05rem;
  width:1px;
  background:var(--invoice-border);
}
.invoice-workspace .invoice-status-legend > span > span{
  min-width:0;
}
.invoice-workspace .invoice-status-legend strong{
  display:block;
  color:var(--invoice-ink);
  font-size:.72rem;
  font-weight:600;
}
.invoice-workspace .status-dot{
  width:6px;
  height:6px;
  margin-top:.22rem;
  border-radius:999px;
  background:currentColor;
}
.invoice-workspace .legend-programmed{color:var(--status-programmed)}
.invoice-workspace .legend-running{color:var(--status-running)}
.invoice-workspace .legend-paid{color:var(--status-paid)}
.invoice-workspace .legend-completed{color:var(--status-completed)}
.invoice-workspace .invoice-table-card,
.clients-workspace .invoice-table-card{
  margin-top:.5rem;
  padding:0;
  overflow:hidden;
}
.invoice-workspace .invoice-mobile-tabs{
  display:flex;
  gap:.24rem;
  margin:0;
  padding:0 .55rem;
  border:0;
  border-bottom:1px solid var(--invoice-border);
  border-radius:0;
  background:var(--invoice-surface-soft);
}
.invoice-workspace .invoice-mobile-tabs .tab-btn{
  display:inline-flex;
  align-items:center;
  border:1px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--invoice-muted);
  margin:0;
  padding:.58rem .45rem .54rem;
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
  position:relative;
}
.invoice-workspace .invoice-mobile-tabs .tab-btn span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:19px;
  height:19px;
  margin-left:.28rem;
  padding:0 .34rem;
  border-radius:999px;
  background:#e8eef8;
  color:var(--invoice-muted);
  font-size:.72rem;
}
.invoice-workspace .invoice-mobile-tabs .tab-btn.is-active{
  border-color:transparent;
  background:transparent;
  color:#0748a6;
}
.invoice-workspace .invoice-mobile-tabs .tab-btn.is-active::after{
  content:"";
  position:absolute;
  left:.45rem;
  right:.45rem;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:var(--invoice-blue);
}
.invoice-workspace .invoice-mobile-tabs .tab-btn.is-active span{
  background:var(--invoice-blue-soft);
  color:var(--invoice-blue);
}
[data-app-theme="dark"] .invoice-workspace .invoice-mobile-tabs .tab-btn.is-active{
  color:var(--invoice-blue);
}
.invoice-toolbar{
  display:flex;
  flex-wrap:nowrap;
  gap:.5rem;
  align-items:center;
  margin:0 0 .55rem;
}
.invoice-search-field,
.invoice-select-field{
  position:relative;
  margin:0;
}
.invoice-search-field svg,
.invoice-select-field svg{
  position:absolute;
  left:.55rem;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  color:var(--invoice-muted);
  pointer-events:none;
}
.invoice-search-field input,
.invoice-select-field select{
  width:100%;
  height:34px;
  margin:0;
  padding:.3rem .65rem .3rem 2.05rem !important;
  border-color:var(--invoice-border);
  background:var(--invoice-surface);
  color:var(--invoice-ink);
  font-size:.82rem;
}
.invoice-search-field{
  flex:1 1 auto;
  min-width:260px;
}
.invoice-select-field{
  flex:0 0 178px;
}
.invoice-sort-field{
  flex-basis:165px;
}
.invoice-paid-sort-field{
  flex-basis:178px;
}
.invoice-select-field select{
  min-width:178px;
  padding-right:1.8rem !important;
  appearance:auto;
}
.invoice-toolbar a[role="button"]{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  margin:0;
  padding:.32rem .62rem;
  font-size:.8rem;
  font-weight:600;
  flex:0 0 auto;
  white-space:nowrap;
  width:auto !important;
}
.invoice-workspace [data-tab],
.clients-workspace #clients-list{
  padding:.55rem;
}
.invoice-workspace table,
.clients-workspace table{
  margin:0;
  border:1px solid var(--invoice-border);
  border-radius:9px;
  overflow:hidden;
  background:var(--invoice-surface);
  color:var(--invoice-ink);
  box-shadow:none;
}
.invoice-workspace table th,
.clients-workspace table th{
  border-bottom-color:var(--invoice-border);
  background:var(--invoice-surface-soft);
  color:var(--invoice-ink);
  font-weight:600;
}
.invoice-workspace .table-sort-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  color:inherit;
  text-decoration:none;
}
.invoice-workspace .table-sort-link span{
  display:inline-flex;
  min-width:.7rem;
  color:var(--invoice-muted);
  font-size:.82rem;
}
.invoice-workspace .table-sort-link:hover,
.invoice-workspace .table-sort-link.is-active{
  color:var(--invoice-blue);
}
.invoice-workspace table td,
.clients-workspace table td{
  color:var(--invoice-ink);
}
.invoice-workspace table th,
.invoice-workspace table td,
.clients-workspace table th,
.clients-workspace table td{
  padding:.42rem .55rem;
  vertical-align:middle;
  font-size:.82rem;
}
.invoice-workspace table tbody tr,
.clients-workspace table tbody tr{
  background:var(--invoice-row);
}
.invoice-workspace table tr:not(:last-child) td,
.clients-workspace table tr:not(:last-child) td{
  border-bottom-color:#eef3f8;
}
[data-app-theme="dark"] .invoice-workspace table tr:not(:last-child) td,
[data-app-theme="dark"] .clients-workspace table tr:not(:last-child) td{
  border-bottom-color:var(--invoice-border);
}
.invoice-workspace table td strong,
.clients-workspace table td strong{
  display:block;
  color:var(--invoice-ink);
  font-weight:600;
}
.invoice-workspace table td small,
.clients-workspace table td small{
  display:block;
  color:var(--invoice-muted);
  font-size:.72rem;
  line-height:1.22;
}
.invoice-workspace .invoice-client-cell{
  display:flex;
  align-items:center;
  gap:.42rem;
  min-width:150px;
}
.invoice-workspace .invoice-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  flex:0 0 25px;
  border-radius:999px;
  background:#dff7ec;
  color:#15803d;
  font-size:.68rem;
  font-weight:600;
}
[data-app-theme="dark"] .invoice-workspace .invoice-avatar{
  background:#123624;
  color:#86efac;
}
.invoice-workspace .invoice-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.16rem .46rem;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  line-height:1.15;
  white-space:nowrap;
}
.invoice-workspace .status-programmed{
  color:var(--status-programmed);
  background:#fff7ed;
}
.invoice-workspace .status-running{
  color:var(--status-running);
  background:#f3e8ff;
}
.invoice-workspace .status-completed{
  color:var(--status-completed);
  background:#ecfdf3;
}
.invoice-workspace .status-paid{
  color:var(--status-paid);
  background:#eaf6ff;
}
.invoice-workspace .status-draft{
  color:#64748b;
  background:#f1f5f9;
}
[data-app-theme="dark"] .invoice-workspace .status-programmed{background:#3b250f}
[data-app-theme="dark"] .invoice-workspace .status-running{background:#2e1d55}
[data-app-theme="dark"] .invoice-workspace .status-completed{background:#123624}
[data-app-theme="dark"] .invoice-workspace .status-paid{background:#102f4a}
[data-app-theme="dark"] .invoice-workspace .status-draft{background:#263244;color:#cbd5e1}
.invoice-workspace .invoice-delay{
  font-size:.8rem;
  font-weight:600;
  white-space:nowrap;
}
.invoice-workspace .invoice-delay-upcoming{color:#0b8de3}
.invoice-workspace .invoice-delay-late{color:#dc2626}
.invoice-workspace .invoice-delay-today{color:#d97706}
.invoice-workspace .invoice-automation{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  color:var(--invoice-ink);
  font-size:.78rem;
  font-weight:600;
}
.invoice-workspace .invoice-automation svg{
  width:15px;
  height:15px;
}
.invoice-workspace .invoice-automation.is-on svg{color:var(--invoice-blue)}
.invoice-workspace .invoice-automation.is-done svg{color:#16a34a}
.invoice-workspace .invoice-automation.is-off svg{color:#64748b}
.invoice-workspace .table-actions{
  justify-content:flex-end;
}
.invoice-workspace .icon-button{
  width:25px;
  height:25px;
  border:1px solid var(--invoice-border);
  border-radius:7px;
  background:var(--invoice-surface);
  color:var(--invoice-muted);
}
.invoice-workspace .icon-button svg{
  width:15px;
  height:15px;
}
.invoice-workspace .icon-button:hover{
  border-color:#b8d5ff;
  background:#f4f8ff;
  color:var(--invoice-blue);
}
[data-app-theme="dark"] .invoice-workspace .icon-button:hover{
  background:var(--invoice-surface-soft);
}
.invoice-workspace .pagination{
  margin-top:.46rem;
}
.invoice-workspace .pagination-btn{
  border:1px solid var(--invoice-border);
  border-radius:7px;
  background:var(--invoice-surface);
  color:var(--invoice-ink);
}
.invoice-workspace .pagination-btn:hover{
  border-color:#b8d5ff;
  background:#f4f8ff;
  color:var(--invoice-blue);
}
[data-app-theme="dark"] .invoice-workspace .pagination-btn:hover{
  background:var(--invoice-surface-soft);
}
.invoice-workspace .pagination-range{
  color:var(--invoice-muted);
}
.invoice-workspace .pagination,
.clients-workspace .pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.38rem;
  width:100%;
  margin:.42rem 0 0;
  padding:0 .35rem;
  box-sizing:border-box;
  line-height:1;
}
.invoice-workspace .pagination-btn,
.clients-workspace .pagination-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px !important;
  min-width:28px;
  height:28px !important;
  min-height:28px !important;
  margin:0;
  padding:0 !important;
  line-height:1;
  box-sizing:border-box;
}
.invoice-workspace .pagination-range,
.clients-workspace .pagination-range{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  margin:0;
  padding:0;
  line-height:36px;
  vertical-align:middle;
}
.invoice-new-workspace{
  --invoice-new-blue:#0b61df;
  --invoice-new-blue-soft:#eef5ff;
  --invoice-new-border:#dbe3ef;
  --invoice-new-ink:#0b1538;
  --invoice-new-muted:#526079;
  --invoice-new-surface:#fff;
  color:var(--invoice-new-ink);
}
[data-app-theme="dark"] .invoice-new-workspace{
  --invoice-new-blue:#8fb9ff;
  --invoice-new-blue-soft:#17365f;
  --invoice-new-border:#334155;
  --invoice-new-ink:#edf4ff;
  --invoice-new-muted:#a8b3c7;
  --invoice-new-surface:#172033;
}
.invoice-new-header{margin:0 0 .28rem}
.invoice-new-header h2{
  margin:0 0 .14rem;
  color:var(--invoice-new-ink);
  font-size:1.38rem;
  line-height:1.15;
}
.invoice-new-header p{
  max-width:640px;
  margin:0;
  color:var(--invoice-new-muted);
  font-size:.86rem;
  line-height:1.34;
}
.invoice-new-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,330px);
  gap:.62rem;
  align-items:start;
}
.app-shell:not(:has(.email-workspace)) .invoice-new-form,
.invoice-new-form{
  max-width:none;
  margin:0;
  padding:.56rem .64rem;
  border:1px solid var(--invoice-new-border);
  border-radius:10px;
  background:var(--invoice-new-surface);
  color:var(--invoice-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.invoice-form-section{
  padding:0 0 .24rem;
  margin:0 0 .24rem;
  border-bottom:1px solid var(--invoice-new-border);
}
.invoice-new-form .invoice-form-section{
  margin:0 0 .4rem !important;
  padding:0 0 .4rem !important;
}
.invoice-form-section:last-of-type{margin-bottom:.22rem}
.invoice-new-form .invoice-form-section:last-of-type{margin-bottom:.34rem !important}
.invoice-form-section-title,
.invoice-preview-title{
  display:flex;
  align-items:center;
  gap:.28rem;
  margin:0 0 .42rem;
}
.invoice-form-section-title span,
.invoice-preview-title span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:999px;
  background:var(--invoice-new-blue-soft);
  color:var(--invoice-new-blue);
}
.invoice-form-section-title svg,
.invoice-preview-title svg{width:15px;height:15px}
.invoice-form-section-title h3,
.invoice-preview-title h3{
  margin:0;
  color:var(--invoice-new-ink);
  font-size:.94rem;
  font-weight:600;
}
.invoice-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem .68rem;
}
.invoice-new-form .invoice-form-section:nth-of-type(2) .invoice-form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.invoice-client-select-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.28rem .52rem;
  align-items:center;
  margin-bottom:.46rem;
}
.invoice-client-select-row select,
.invoice-client-select-row .invalid-feedback,
.invoice-client-select-row .form-error,
.invoice-client-select-row ul{grid-column:1 / -1}
.invoice-inline-link{
  color:var(--invoice-new-blue);
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
}
.invoice-inline-link:hover{text-decoration:underline}
.invoice-new-form label{
  margin-bottom:.08rem;
  color:var(--invoice-new-ink);
  font-size:.8rem;
  font-weight:600;
  line-height:1.08;
}
.invoice-new-form input,
.invoice-new-form select,
.invoice-new-form textarea{
  min-height:37px;
  height:37px;
  padding:.32rem .5rem;
  border-color:var(--invoice-new-border);
  border-radius:7px;
  background:var(--invoice-new-surface);
  color:var(--invoice-new-ink);
  font-size:.86rem;
  box-shadow:none;
  margin:0 !important;
}
.invoice-new-form input,
.invoice-new-form select{
  min-height:37px !important;
  height:37px !important;
}
.invoice-new-form textarea{
  height:60px !important;
  min-height:60px !important;
  resize:vertical;
}
.invoice-new-form input::placeholder,
.invoice-new-form textarea::placeholder{color:#8390a8}
[data-app-theme="dark"] .invoice-new-form input::placeholder,
[data-app-theme="dark"] .invoice-new-form textarea::placeholder{color:#8493a8}
.invoice-new-form .muted.small{
  margin:.18rem 0 0;
  color:var(--invoice-new-muted);
  font-size:.76rem;
}
.invoice-new-info{
  display:flex;
  align-items:center;
  gap:.34rem;
  margin:.16rem 0 .44rem;
  padding:.36rem .46rem;
  border-radius:7px;
  background:var(--invoice-new-blue-soft);
  color:var(--invoice-new-muted);
  font-size:.79rem;
}
.invoice-new-info svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  color:var(--invoice-new-blue);
}
.invoice-new-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}
.invoice-new-actions button,
.invoice-new-actions a[role="button"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  margin:0;
  padding:.34rem .64rem;
  font-size:.86rem;
  font-weight:600;
}
.invoice-edit-actions.has-draft-action{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.invoice-edit-workspace .invoice-new-layout{
  align-items:stretch;
}
.invoice-edit-side{
  display:flex;
  flex-direction:column;
  gap:.62rem;
  justify-content:space-between;
  min-height:100%;
  margin:0;
}
.invoice-edit-side .invoice-new-preview{margin:0}
.invoice-delete-card{
  margin:0;
  padding:.68rem;
  border:1px solid var(--invoice-new-border);
  border-radius:10px;
  background:var(--invoice-new-surface);
  color:var(--invoice-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.invoice-delete-card h3{
  margin:0 0 .2rem;
  color:var(--invoice-new-ink);
  font-size:.92rem;
  font-weight:600;
}
.invoice-delete-card p{
  margin:0 0 .48rem;
  font-size:.78rem;
}
.invoice-delete-card form{margin:0}
.invoice-delete-card button{
  width:100%;
  min-height:30px;
  padding:.28rem .5rem;
  font-size:.8rem;
}
@media (max-width:640px){
  .invoice-edit-actions.has-draft-action{
    grid-template-columns:1fr;
  }
}
.invoice-new-preview{
  padding:.72rem;
  border:1px solid var(--invoice-new-border);
  border-radius:10px;
  background:var(--invoice-new-surface);
  color:var(--invoice-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.invoice-new-preview dl{margin:0}
.invoice-new-preview dl div{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:.7rem;
  padding:.58rem 0;
  border-bottom:1px solid var(--invoice-new-border);
}
.invoice-new-preview dl div:last-child{border-bottom:0;padding-bottom:0}
.invoice-new-preview dt,
.invoice-new-preview dd{
  margin:0;
  font-size:.82rem;
}
.invoice-new-preview dt{
  color:var(--invoice-new-ink);
  font-weight:600;
}
.invoice-new-preview dd{
  color:var(--invoice-new-ink);
  font-weight:500;
  text-align:right;
  overflow-wrap:anywhere;
}
.client-new-workspace{
  --client-new-blue:#0b61df;
  --client-new-blue-soft:#eef5ff;
  --client-new-border:#dbe3ef;
  --client-new-ink:#0b1538;
  --client-new-muted:#526079;
  --client-new-surface:#fff;
  color:var(--client-new-ink);
}
[data-app-theme="dark"] .client-new-workspace{
  --client-new-blue:#8fb9ff;
  --client-new-blue-soft:#17365f;
  --client-new-border:#334155;
  --client-new-ink:#edf4ff;
  --client-new-muted:#a8b3c7;
  --client-new-surface:#172033;
}
.client-new-header{margin:0 0 .28rem}
.client-new-header h2{
  margin:0 0 .14rem;
  color:var(--client-new-ink);
  font-size:1.38rem;
  line-height:1.15;
}
.client-new-header p{
  max-width:640px;
  margin:0;
  color:var(--client-new-muted);
  font-size:.86rem;
  line-height:1.34;
}
.client-new-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,320px);
  gap:.62rem;
  align-items:start;
}
.app-shell:not(:has(.email-workspace)) .client-new-form,
.client-new-form{
  max-width:none;
  margin:0;
  padding:.56rem .64rem;
  border:1px solid var(--client-new-border);
  border-radius:10px;
  background:var(--client-new-surface);
  color:var(--client-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.client-new-form .client-form-section{
  margin:0 0 .4rem !important;
  padding:0 0 .4rem !important;
  border-bottom:1px solid var(--client-new-border);
}
.client-new-form .client-form-section:last-of-type{
  margin-bottom:.34rem !important;
}
.client-form-section-title,
.client-preview-title{
  display:flex;
  align-items:center;
  gap:.28rem;
  margin:0 0 .42rem;
}
.client-form-section-title span,
.client-preview-title span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:999px;
  background:var(--client-new-blue-soft);
  color:var(--client-new-blue);
}
.client-form-section-title svg,
.client-preview-title svg{width:15px;height:15px}
.client-form-section-title h3,
.client-preview-title h3{
  margin:0;
  color:var(--client-new-ink);
  font-size:.94rem;
  font-weight:600;
}
.client-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem .68rem;
}
.client-new-form label{
  margin-bottom:.08rem;
  color:var(--client-new-ink);
  font-size:.8rem;
  font-weight:600;
  line-height:1.08;
}
.client-new-form input,
.client-new-form textarea{
  min-height:37px;
  height:37px;
  margin:0 !important;
  padding:.32rem .5rem;
  border-color:var(--client-new-border);
  border-radius:7px;
  background:var(--client-new-surface);
  color:var(--client-new-ink);
  font-size:.86rem;
  box-shadow:none;
}
.client-new-form input{
  min-height:37px !important;
  height:37px !important;
}
.client-new-form textarea{
  height:60px !important;
  min-height:60px !important;
  resize:vertical;
}
.client-new-form input::placeholder,
.client-new-form textarea::placeholder{color:#8390a8}
[data-app-theme="dark"] .client-new-form input::placeholder,
[data-app-theme="dark"] .client-new-form textarea::placeholder{color:#8493a8}
.client-new-form .muted.small{
  margin:.18rem 0 0;
  color:var(--client-new-muted);
  font-size:.76rem;
}
.client-new-info{
  display:flex;
  align-items:center;
  gap:.34rem;
  margin:.16rem 0 .44rem;
  padding:.36rem .46rem;
  border-radius:7px;
  background:var(--client-new-blue-soft);
  color:var(--client-new-muted);
  font-size:.79rem;
}
.client-new-info svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  color:var(--client-new-blue);
}
.client-new-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}
.client-new-actions button,
.client-new-actions a[role="button"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  margin:0;
  padding:.34rem .64rem;
  font-size:.86rem;
  font-weight:600;
}
.client-new-preview{
  display:block;
  padding:.72rem;
  border:1px solid var(--client-new-border);
  border-radius:10px;
  background:var(--client-new-surface);
  color:var(--client-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.client-new-preview dl{margin:0}
.client-new-preview dl div{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:.7rem;
  padding:.58rem 0;
  border-bottom:1px solid var(--client-new-border);
}
.client-new-preview dl div:last-child{border-bottom:0;padding-bottom:0}
.client-new-preview dt,
.client-new-preview dd{
  margin:0;
  font-size:.82rem;
}
.client-new-preview dt{
  color:var(--client-new-ink);
  font-weight:600;
}
.client-new-preview dd{
  color:var(--client-new-ink);
  font-weight:500;
  text-align:right;
  overflow-wrap:anywhere;
}
.profile-new-workspace{
  --profile-new-blue:#0b61df;
  --profile-new-blue-soft:#eef5ff;
  --profile-new-border:#dbe3ef;
  --profile-new-ink:#0b1538;
  --profile-new-muted:#526079;
  --profile-new-surface:#fff;
  color:var(--profile-new-ink);
}
[data-app-theme="dark"] .profile-new-workspace{
  --profile-new-blue:#8fb9ff;
  --profile-new-blue-soft:#17365f;
  --profile-new-border:#334155;
  --profile-new-ink:#edf4ff;
  --profile-new-muted:#a8b3c7;
  --profile-new-surface:#172033;
}
.profile-new-header{margin:0 0 .28rem}
.profile-new-header h2{
  margin:0 0 .14rem;
  color:var(--profile-new-ink);
  font-size:1.38rem;
  line-height:1.15;
}
.profile-new-header p{
  max-width:650px;
  margin:0;
  color:var(--profile-new-muted);
  font-size:.86rem;
  line-height:1.34;
}
.profile-new-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,320px);
  gap:.62rem;
  align-items:stretch;
}
.app-shell:not(:has(.email-workspace)) .profile-new-form,
.profile-new-form{
  max-width:none;
  margin:0;
  padding:.56rem .64rem;
  border:1px solid var(--profile-new-border);
  border-radius:10px;
  background:var(--profile-new-surface);
  color:var(--profile-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.app-shell:not(:has(.email-workspace)) .profile-entry-form.profile-new-form{
  margin-top:0;
}
.profile-new-form .profile-form-section{
  margin:0 0 .46rem !important;
  padding:0 0 .46rem !important;
  border-bottom:1px solid var(--profile-new-border);
}
.profile-new-form .profile-form-section:last-of-type{
  margin-bottom:.36rem !important;
}
.profile-form-section-title,
.profile-preview-title{
  display:flex;
  align-items:center;
  gap:.28rem;
  margin:0 0 .42rem;
}
.profile-form-section-title span,
.profile-preview-title span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:999px;
  background:var(--profile-new-blue-soft);
  color:var(--profile-new-blue);
}
.profile-form-section-title svg,
.profile-preview-title svg{width:15px;height:15px}
.profile-form-section-title h3,
.profile-preview-title h3{
  margin:0;
  color:var(--profile-new-ink);
  font-size:.94rem;
  font-weight:600;
}
.profile-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem .68rem;
}
.profile-new-form label{
  margin-bottom:.08rem;
  color:var(--profile-new-ink);
  font-size:.8rem;
  font-weight:600;
  line-height:1.08;
}
.profile-new-form input{
  min-height:37px !important;
  height:37px !important;
  margin:0 !important;
  padding:.32rem .5rem;
  border-color:var(--profile-new-border);
  border-radius:7px;
  background:var(--profile-new-surface);
  color:var(--profile-new-ink);
  font-size:.86rem;
  box-shadow:none;
}
.profile-new-form input::placeholder{color:#8390a8}
[data-app-theme="dark"] .profile-new-form input::placeholder{color:#8493a8}
.profile-professional-check{
  display:flex;
  align-items:flex-start;
  gap:.42rem;
  margin:.52rem 0 0;
  color:var(--profile-new-muted);
  font-size:.8rem;
}
.profile-professional-check input{
  flex:0 0 auto;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  margin:.05rem 0 0 !important;
}
.profile-professional-check label{
  margin:0;
  color:var(--profile-new-muted);
  font-size:.8rem;
  font-weight:500;
  line-height:1.35;
}
.profile-new-info{
  display:flex;
  align-items:center;
  gap:.34rem;
  margin:.16rem 0 .44rem;
  padding:.36rem .46rem;
  border-radius:7px;
  background:var(--profile-new-blue-soft);
  color:var(--profile-new-muted);
  font-size:.79rem;
}
.profile-new-info svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  color:var(--profile-new-blue);
}
.profile-new-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}
.profile-new-actions button,
.profile-new-actions a[role="button"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  margin:0;
  padding:.34rem .64rem;
  font-size:.86rem;
  font-weight:600;
}
.profile-edit-side{
  display:flex;
  flex-direction:column;
  gap:.62rem;
  justify-content:space-between;
  align-self:stretch;
  min-height:100%;
  margin:0;
}
.profile-edit-side .profile-new-preview{
  margin:0;
}
.app-shell:not(:has(.email-workspace)) .app-main .profile-edit-side .profile-new-preview{
  margin-top:0;
}
.profile-edit-side .profile-delete-card{
  margin:0;
}
.profile-new-preview,
.profile-delete-card{
  padding:.72rem;
  border:1px solid var(--profile-new-border);
  border-radius:10px;
  background:var(--profile-new-surface);
  color:var(--profile-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.profile-new-preview dl{margin:0}
.profile-new-preview dl div{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:.7rem;
  padding:.58rem 0;
  border-bottom:1px solid var(--profile-new-border);
}
.profile-new-preview dl div:last-child{border-bottom:0;padding-bottom:0}
.profile-new-preview dt,
.profile-new-preview dd{
  margin:0;
  font-size:.82rem;
}
.profile-new-preview dt{
  color:var(--profile-new-ink);
  font-weight:600;
}
.profile-new-preview dd{
  color:var(--profile-new-ink);
  font-weight:500;
  text-align:right;
  overflow-wrap:anywhere;
}
.app-shell:not(:has(.email-workspace)) [data-testid="profile-delete-section"].profile-delete-card{
  max-width:none;
  margin-top:0;
}
.profile-delete-card h3{
  margin:0 0 .2rem;
  color:var(--profile-new-ink);
  font-size:.92rem;
  font-weight:600;
}
.profile-delete-card p{
  margin:0 0 .48rem;
  font-size:.78rem;
}
.profile-delete-card a[role="button"]{
  width:100%;
  min-height:30px;
  padding:.28rem .5rem;
  font-size:.8rem;
}
.btn-danger-outline{
  border-color:#fecaca !important;
  color:#b91c1c !important;
  background:transparent !important;
}
[data-app-theme="dark"] .btn-danger-outline{
  border-color:#7f1d1d !important;
  color:#fca5a5 !important;
}
.account-delete-workspace{
  --delete-border:#dbe3ef;
  --delete-surface:#ffffff;
  --delete-surface-soft:#f8fbff;
  --delete-ink:#0b1538;
  --delete-muted:#43506d;
  --delete-blue:#0b61df;
  --delete-red:#b91c1c;
  --delete-red-soft:rgba(185,28,28,.08);
  width:100%;
  margin:0;
  color:var(--delete-ink);
}
[data-app-theme="dark"] .account-delete-workspace{
  --delete-border:#334155;
  --delete-surface:#172033;
  --delete-surface-soft:#1d2940;
  --delete-ink:#edf4ff;
  --delete-muted:#a8b3c7;
  --delete-blue:#8fb9ff;
  --delete-red:#fca5a5;
  --delete-red-soft:rgba(248,113,113,.12);
}
.account-delete-header{
  margin:0 0 .45rem;
}
.account-delete-header h2{
  margin:0;
  color:var(--delete-ink);
  font-size:1.55rem;
  line-height:1.15;
  font-weight:600;
}
.account-delete-header > p:last-child{
  max-width:760px;
  margin:0;
  color:var(--delete-muted);
  font-size:.86rem;
}
.account-delete-layout{
  display:grid;
  grid-template-columns:minmax(0,65fr) minmax(280px,35fr);
  gap:.5rem;
  align-items:stretch;
}
.account-delete-main,
.account-delete-side{
  display:grid;
  gap:.45rem;
  align-items:stretch;
  height:100%;
}
.account-delete-main{
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:0;
  margin:0 !important;
}
.account-delete-side{
  grid-template-rows:minmax(0,1fr) auto;
}
.account-delete-card,
.account-delete-danger-card{
  border:1px solid var(--delete-border);
  border-radius:10px;
  background:var(--delete-surface);
  color:var(--delete-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  min-height:0;
}
.account-delete-card{
  padding:.72rem .78rem;
}
.account-delete-card h3,
.account-delete-danger-card h3{
  margin:0;
  color:var(--delete-ink);
  font-size:.92rem;
  line-height:1.25;
  font-weight:600;
}
.account-delete-danger-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.42rem;
  align-items:center;
  padding:.62rem .72rem;
  border-color:#fecaca;
  background:linear-gradient(135deg,var(--delete-red-soft),rgba(255,255,255,.72));
}
[data-app-theme="dark"] .account-delete-danger-card{
  border-color:#7f1d1d;
  background:linear-gradient(135deg,var(--delete-red-soft),rgba(23,32,51,.8));
}
.account-delete-danger-card h3{
  color:var(--delete-red);
  font-size:.96rem;
}
.account-delete-danger-card p,
.account-delete-help p,
.account-delete-consequences p{
  margin:.16rem 0 0;
  color:var(--delete-muted);
  font-size:.8rem;
  line-height:1.35;
}
.account-delete-danger-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
}
.account-delete-danger-icon svg{
  width:30px;
  height:30px;
}
.account-delete-list,
.account-delete-consequences{
  display:grid;
  gap:.14rem;
  padding:0;
  margin:.34rem 0 0;
  list-style:none;
}
.account-delete-list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.48rem;
  align-items:center;
  padding:.34rem 0;
  border-bottom:1px solid var(--delete-border);
}
.account-delete-list li:last-child,
.account-delete-consequences li:last-child{
  border-bottom:0;
}
.account-delete-list span,
.account-delete-consequences > li > span,
.account-delete-side-title span,
.account-delete-help-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid #fecaca;
  border-radius:8px;
  background:var(--delete-red-soft);
  color:var(--delete-red);
}
.account-delete-list svg,
.account-delete-consequences svg,
.account-delete-side-title svg,
.account-delete-help-icon svg{
  width:20px;
  height:20px;
}
.account-delete-guidance .account-delete-side-title svg{
  width:22px;
  height:22px;
}
.account-delete-consequences svg,
.account-delete-help-icon svg{
  width:28px;
  height:28px;
}
.account-delete-list strong,
.account-delete-consequences strong{
  color:var(--delete-ink);
  font-size:.82rem;
  font-weight:600;
}
.account-delete-confirm-card form{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
  margin:0;
}
.account-delete-confirm-card{
  padding-top:1rem;
  padding-bottom:1rem;
}
.account-delete-confirm-card input{
  height:34px;
  margin:.34rem 0 0;
  border-color:#cbd5e1;
  background:var(--delete-surface);
  color:var(--delete-ink);
  font-size:.82rem;
}
.account-delete-form-error{
  margin:.24rem 0 0;
  color:#dc2626;
  font-size:.78rem;
  line-height:1.3;
}
[data-app-theme="dark"] .account-delete-form-error{
  color:#fca5a5;
}
.account-delete-actions{
  display:flex;
  flex-wrap:nowrap;
  gap:.35rem;
  align-items:center;
  margin:.34rem 0 .12rem;
}
.account-delete-submit,
.account-delete-cancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  margin:0 !important;
  font-size:.82rem;
}
.account-delete-submit{
  gap:.4rem;
  border-color:#dc2626 !important;
  background:#dc2626 !important;
  color:#fff !important;
}
.account-delete-submit:hover{
  border-color:#b91c1c !important;
  background:#b91c1c !important;
}
.account-delete-submit svg{
  width:15px;
  height:15px;
}
.account-delete-cancel{
  width:auto !important;
  flex:0 0 auto;
  padding:.34rem .68rem !important;
}
.account-delete-side-title{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.42rem;
  align-items:center;
}
.account-delete-side-title h3{
  color:var(--delete-blue);
}
.account-delete-guidance .account-delete-side-title span{
  width:40px;
  height:40px;
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#2563eb;
}
[data-app-theme="dark"] .account-delete-guidance .account-delete-side-title span{
  border-color:#1e3a8a;
  background:#14213d;
  color:#93c5fd;
}
.account-delete-consequences li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.46rem;
  padding:.38rem 0;
  border-bottom:1px solid var(--delete-border);
}
.account-delete-consequences > li > span{
  width:44px;
  height:44px;
  border-color:#dbeafe;
  background:#eff6ff;
  color:#2563eb;
}
.account-delete-help-icon{
  width:44px;
  height:44px;
}
[data-app-theme="dark"] .account-delete-consequences > li > span{
  border-color:#1e3a8a;
  background:#14213d;
  color:#93c5fd;
}
.account-delete-help p{
  line-height:1.4;
}
.account-delete-guidance,
.account-delete-help{
  display:flex;
  flex-direction:column;
}
.account-delete-guidance{
  justify-content:center;
}
.account-delete-guidance .account-delete-consequences{
  flex:0 0 auto;
  align-content:start;
}
.account-delete-help{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.65rem;
  align-content:center;
  align-items:start;
  justify-content:stretch;
  border-color:#bfdbfe;
  background:rgba(11,97,223,.02);
}
[data-app-theme="dark"] .account-delete-help{
  border-color:#1e3a8a;
  background:rgba(143,185,255,.1);
}
.account-delete-help-icon{
  align-self:start;
  margin-top:0;
}
.account-delete-help-content h3{
  color:var(--delete-blue);
}
.account-delete-help a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:.34rem;
  color:var(--delete-blue);
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
}
.account-delete-help a:hover{
  text-decoration:underline;
}
.account-delete-help a svg{
  width:15px;
  height:15px;
}
@media (max-width:1000px){
  .account-delete-layout{
    grid-template-columns:1fr;
    gap:.4rem;
  }
  .account-delete-main,
  .account-delete-side{
    height:auto;
    gap:.4rem;
  }
  .account-delete-main,
  .account-delete-side{
    grid-template-rows:auto;
  }
  .account-delete-side{
    grid-template-columns:1fr;
  }
  .account-delete-main{
    gap:.4rem;
  }
}
@media (max-width:700px){
  .account-delete-header h2{
    font-size:1.45rem;
  }
  .account-delete-header > p:last-child{
    font-size:.82rem;
  }
  .account-delete-card,
  .account-delete-danger-card{
    padding:.62rem;
  }
  .account-delete-actions{
    align-items:stretch;
    flex-wrap:wrap;
  }
  .account-delete-submit,
  .account-delete-cancel{
    width:100% !important;
  }
}
@media (max-width:520px){
  .account-delete-danger-card,
  .account-delete-help{
    grid-template-columns:auto minmax(0,1fr);
  }
  .account-delete-danger-icon{
    width:42px;
    height:42px;
  }
  .account-delete-danger-icon svg{
    width:26px;
    height:26px;
  }
  .account-delete-consequences > li > span,
  .account-delete-help-icon{
    width:38px;
    height:38px;
  }
  .account-delete-consequences svg,
  .account-delete-help-icon svg{
    width:24px;
    height:24px;
  }
}
.email-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
}
.email-page-header h2{
  margin:0 0 .3rem;
  color:var(--email-ink);
  font-size:1.55rem;
  line-height:1.15;
}
.email-page-header p{
  max-width:720px;
  margin:0;
  font-size:.9rem;
}
.email-page-header p:nth-of-type(2){
  color:#0b61df;
  font-weight:600;
}
.email-tone-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  flex:0 0 auto;
  padding:.35rem .65rem;
  border:1px solid #b8d5ff;
  border-radius:999px;
  background:#f4f8ff;
  color:#0748a6;
  font-size:.78rem;
  font-weight:600;
}
.email-tone-badge svg{width:17px;height:17px}
.email-template-form{margin:0}
.email-relance-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;
  margin:0 0 .75rem;
}
.email-relance-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.6rem;
  min-height:98px;
  margin:0;
  padding:.68rem;
  border:1px solid var(--email-border);
  border-radius:10px;
  background:var(--email-surface);
  color:var(--email-ink);
  text-align:left;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.email-relance-card:hover{
  border-color:#cbd8ea;
  background:var(--email-surface-soft);
}
.email-relance-card.is-active{
  border-color:#1268f3;
  box-shadow:0 0 0 1px #1268f3,0 10px 24px rgba(18,104,243,.08);
}
.email-relance-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#eef2f7;
  color:#334155;
  font-weight:600;
  font-size:.9rem;
}
.email-relance-card.is-active .email-relance-step{
  border-color:#1268f3;
  background:#1268f3;
  color:#fff;
}
.email-relance-copy{
  display:flex;
  flex-direction:column;
  gap:.18rem;
}
.email-relance-copy strong{
  color:var(--email-ink);
  font-size:.88rem;
}
.email-relance-copy small{
  color:var(--email-muted);
  font-size:.72rem;
}
.email-relance-pill{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  align-self:flex-start;
  margin-top:.18rem;
  padding:.18rem .5rem;
  border-radius:999px;
  background:#fff7ed;
  color:#9a3412;
  font-size:.72rem;
  font-weight:600;
  line-height:1;
  box-shadow:none;
}
.email-relance-pill svg{
  width:13px;
  height:13px;
}
.email-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:.9rem;
  align-items:start;
}
.email-main-column,
.email-side-column{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.email-editor-card,
.email-side-card,
.email-best-practices{
  border:1px solid var(--email-border);
  border-radius:10px;
  background:var(--email-surface);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.email-editor-card{padding:.78rem}
.email-editor-panel{display:none}
.email-editor-panel.is-active{display:block}
.email-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.55rem;
}
.email-panel-heading h3,
.email-card-title h3,
.email-best-practices h3{
  margin:0;
  color:var(--email-ink);
  font-size:.9rem;
}
.email-panel-heading p{margin:0 0 .12rem}
.email-dirty-indicator{
  flex:0 0 auto;
  padding:.18rem .5rem;
  border-radius:999px;
  background:#fff7ed;
  color:#9a3412;
  font-size:.72rem;
  font-weight:600;
}
.email-field-label{
  display:block;
  margin:.7rem 0 .3rem;
  color:var(--email-ink);
  font-weight:600;
  font-size:.88rem;
}
.email-editor-panel input[type="text"],
.email-editor-panel textarea{
  width:100%;
  margin:0;
  border-color:var(--email-border);
  background:var(--email-token-bg);
  color:var(--email-ink);
  caret-color:var(--email-ink);
  font-size:.84rem;
}
.email-editor-panel textarea{
  min-height:230px;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  line-height:1.55;
  resize:vertical;
}
.email-editor-panel .small{margin:.45rem 0 0}
.email-side-card{padding:.78rem}
.email-mobile-token-card{display:none}
.email-card-title{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:.55rem;
}
.email-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border-radius:999px;
  background:var(--email-blue-soft);
  color:var(--email-blue);
}
.email-card-icon svg{width:17px;height:17px}
.email-token-list{
  overflow:hidden;
  margin:.65rem 0;
  border:1px solid var(--email-border);
  border-radius:8px;
}
.email-token-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(120px,.9fr) 1fr auto;
  align-items:center;
  gap:.75rem;
  min-height:40px;
  margin:0;
  padding:.42rem .55rem;
  border:0;
  border-bottom:1px solid var(--email-border);
  border-radius:0;
  background:var(--email-surface);
  color:var(--email-ink);
  text-align:left;
  box-shadow:none;
}
.email-token-row:last-child{border-bottom:0}
.email-token-row:hover{background:var(--email-surface-soft)}
.email-token-row code{
  padding:.08rem .25rem;
  border-radius:4px;
  background:var(--email-token-bg);
  color:var(--email-ink);
  white-space:nowrap;
}
.email-token-row span{
  font-size:.78rem;
  line-height:1.25;
}
.email-copy-icon{
  display:inline-flex;
  justify-content:center;
  color:#53627f;
}
.email-copy-icon svg{width:18px;height:18px}
.email-copy-toast{
  position:fixed;
  top:calc(var(--topbar-height, 62px) + .75rem);
  left:50%;
  z-index:120;
  transform:translateX(-50%);
  margin:0;
  padding:.48rem .72rem;
  border:1px solid #bbf7d0;
  border-radius:999px;
  background:#ecfdf3;
  color:#166534;
  font-size:.8rem;
  font-weight:600;
  box-shadow:0 14px 34px rgba(15,23,42,.16);
}
[data-app-theme="dark"] .email-copy-toast{
  border-color:#166534;
  background:#123624;
  color:#86efac;
}
.email-preview-subject{
  margin:.75rem 0;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--email-border);
  color:var(--email-ink);
}
.email-preview-subject span{
  color:var(--email-ink);
}
.email-preview-body{
  color:var(--email-ink);
  font-size:.8rem;
  line-height:1.45;
}
.email-best-practices{
  display:flex;
  gap:.7rem;
  padding:.78rem;
  background:var(--email-surface-soft);
}
.email-best-practices ul{
  margin:.45rem 0 0;
  padding:0;
  list-style:none;
}
.email-best-practices li{
  position:relative;
  margin:.22rem 0;
  padding-left:1.2rem;
  font-size:.84rem;
}
.email-best-practices li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#15803d;
  font-weight:600;
}
.email-actions-bar{
  position:sticky;
  bottom:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  min-width:0;
  overflow:hidden;
  margin:.9rem 0 0;
  padding:.7rem;
  border:1px solid var(--email-border);
  border-radius:10px;
  background:var(--email-sticky-surface);
  backdrop-filter:blur(10px);
}
.email-actions-left,
.email-actions-right{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  min-width:0;
}
.email-actions-bar button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  margin:0;
  min-height:36px;
  padding:.42rem .7rem;
  font-size:.84rem;
  line-height:1.2;
  width:auto;
  max-width:100%;
}
.email-actions-bar button svg{width:16px;height:16px}

@media (max-width:768px){
  .email-page-header{flex-direction:column}
  .email-tone-badge{align-self:flex-start}
  .email-relance-tabs{
    display:flex;
    grid-template-columns:none;
    gap:.35rem;
    margin:0 0 .75rem;
    padding:.05rem .05rem .15rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
  }
  .email-relance-card{
    flex:1 1 0;
    min-width:0;
    min-height:58px;
    grid-template-columns:1fr;
    gap:.18rem;
    padding:.48rem .5rem;
    scroll-snap-align:start;
  }
  .email-relance-card .email-relance-step{
    display:none;
  }
  .email-relance-copy strong{
    position:relative;
    display:block;
    font-size:.78rem;
    line-height:1.1;
  }
  .email-relance-copy small{
    font-size:.66rem;
    line-height:1.15;
  }
  .email-relance-copy{
    position:relative;
  }
  .email-relance-pill{
    position:absolute;
    top:0;
    right:0;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0;
    width:16px;
    height:16px;
    border-radius:5px;
    background:#fff7ed;
    color:#d97706;
  }
  .email-relance-pill[hidden]{
    display:none !important;
  }
  .email-relance-pill > span{
    display:none;
  }
  .email-relance-pill svg{
    width:12px;
    height:12px;
  }
  .email-layout{
    display:flex;
    flex-direction:column;
  }
  .email-main-column{display:contents}
  .email-editor-card{order:1}
  .email-side-column{order:2}
  .email-side-column > .email-side-card:first-child{
    display:none;
  }
  .email-mobile-token-card{
    display:block;
    margin:.75rem -.78rem -.78rem;
    padding:.78rem;
    border-top:1px solid var(--email-border);
    background:var(--email-surface-soft);
  }
  .email-mobile-token-card .email-token-list{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    margin:.65rem 0 0;
    border:0;
    border-radius:0;
    overflow:visible;
  }
  .email-mobile-token-card .email-token-row{
    width:auto;
    min-height:34px;
    grid-template-columns:auto auto;
    gap:.35rem;
    padding:.32rem .5rem;
    border:1px solid var(--email-border);
    border-radius:8px;
    background:var(--email-surface);
  }
  .email-mobile-token-card .email-token-row span:not(.email-copy-icon){
    display:none;
  }
  .email-mobile-token-card .email-copy-icon svg{
    width:14px;
    height:14px;
  }
  .email-best-practices{order:3}
  .email-actions-bar{
    position:static;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.55rem;
    margin:1rem 0 0;
    border:1px solid var(--email-border);
    border-radius:10px;
  }
  .email-actions-left,
  .email-actions-right{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.55rem;
  }
  .email-actions-right{
    order:2;
  }
  .email-actions-left{
    order:1;
  }
  .email-actions-right .primary{
    order:99;
  }
  .email-actions-bar button{
    width:100%;
  }
}

@media (max-width:640px){
  .email-page-header h2{font-size:1.55rem}
  .email-editor-card,
  .email-side-card,
  .email-best-practices{padding:.85rem}
  .email-token-row{
    grid-template-columns:1fr auto;
    gap:.35rem .6rem;
  }
  .email-token-row span:not(.email-copy-icon){grid-column:1 / -1}
  .email-mobile-token-card .email-token-row{
    grid-template-columns:auto auto;
  }
  .email-mobile-token-card .email-token-row span:not(.email-copy-icon){
    display:none;
  }
  .email-actions-bar,
  .email-actions-left,
  .email-actions-right{align-items:stretch}
  .email-actions-left,
  .email-actions-right,
  .email-actions-bar button{width:100%}
}

/* App shell refined from the provided reference */
body:has(.app-shell){
  background:var(--app-bg);
}
.app-shell{
  --sidebar-width:254px;
  --topbar-height:62px;
  min-height:100vh;
  background:var(--app-bg);
}
.app-shell .app-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:90;
  min-height:var(--topbar-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 1rem;
  background:var(--app-panel);
  border-bottom:1px solid var(--app-card-border);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  backdrop-filter:none;
}
.app-shell .topbar-left,
.app-shell .topbar-actions{
  display:flex;
  align-items:center;
}
.app-shell .topbar-left{gap:1rem}
.app-shell .topbar-actions{gap:1.15rem}
.app-shell .topbar-brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  color:var(--app-card-ink);
  text-decoration:none;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:0;
}
.app-shell .topbar-logo{
  width:32px;
  height:32px;
  display:block;
  object-fit:contain;
  border-radius:6px;
}
.app-shell .topbar-divider{
  width:1px;
  height:34px;
  background:var(--app-card-border);
}
.app-shell .topbar-menu,
.app-shell .topbar-icon-button,
.app-shell .sidebar-close{
  width:38px;
  height:38px;
  margin-bottom:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--app-card-muted);
  box-shadow:none;
  line-height:1;
  vertical-align:middle;
}
.app-shell .topbar-menu:hover,
.app-shell .topbar-icon-button:hover,
.app-shell .sidebar-close:hover,
.app-shell .topbar-action:hover{
  background:var(--app-blue-soft);
  color:var(--app-blue);
}
.app-shell .topbar-action{
  min-height:38px;
  padding:.28rem .4rem;
  border-radius:8px;
  color:var(--app-card-ink);
  font-weight:600;
  font-size:.82rem;
  text-decoration:none;
}
.app-shell .topbar-action svg,
.app-shell .topbar-menu svg,
.app-shell .topbar-icon-button svg,
.app-shell .sidebar-close svg{
  width:22px;
  height:22px;
  display:block;
}
.app-shell .topbar-icon-button{position:relative}
.app-shell .notification-badge{display:none}
.app-shell .notification-count{
  position:absolute;
  top:3px;
  right:2px;
  min-width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#1268f3;
  border:2px solid #fff;
  color:#fff;
  font-size:.66rem;
  font-weight:600;
  line-height:1;
}
.app-shell .user-menu summary{
  min-height:48px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  gap:.6rem;
  margin:0;
}
.app-shell .user-menu[open],
.app-shell .user-menu[open] summary{margin:0}
.app-shell .user-menu summary:hover{background:var(--app-blue-soft)}
.app-shell .user-avatar{
  width:38px;
  height:38px;
  background:var(--app-blue-soft);
  color:var(--app-blue);
  font-weight:600;
}
.app-shell .user-name{
  max-width:150px;
  color:var(--app-card-ink);
  font-size:.78rem;
  font-weight:600;
}
.app-shell .user-workspace{
  max-width:150px;
  color:#43506d;
  font-size:.68rem;
}
.app-shell .app-sidebar{
  position:fixed;
  top:var(--topbar-height);
  left:0;
  bottom:0;
  z-index:80;
  width:var(--sidebar-width);
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:2rem 1rem 1rem;
  background:var(--app-panel);
  border-right:1px solid var(--app-card-border);
  box-shadow:none;
}
.app-shell .sidebar-mobile-header{display:none}
.app-shell .sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin:0;
  padding:0;
}
.app-shell .sidebar-nav-secondary{
  margin-top:auto;
  padding-top:.75rem;
  border-top:1px solid var(--app-card-border);
}
.app-shell .topbar-menu-mobile,
.app-shell .sidebar-mobile-actions{
  display:none;
}
.app-shell .sidebar-nav-secondary .sidebar-link{
  min-height:34px;
  padding:.42rem .58rem;
  color:var(--app-card-muted);
  font-size:.7rem;
  font-weight:500;
}
.app-shell .sidebar-link{
  min-height:40px;
  gap:.62rem;
  padding:.52rem .62rem;
  border:1px solid transparent;
  border-radius:7px;
  color:var(--app-card-ink);
  font-size:.76rem;
  font-weight:600;
  text-decoration:none;
}
.app-shell .sidebar-link:hover{
  background:var(--surface-hover);
  color:var(--app-card-ink);
}
.app-shell .sidebar-link.is-active{
  color:var(--app-blue);
  background:var(--app-blue-soft);
  border-color:var(--app-card-border);
  box-shadow:none;
}
.app-shell .sidebar-link-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:currentColor;
}
.app-shell .sidebar-link-icon svg{
  width:18px;
  height:18px;
  stroke-width:1.8;
}
.app-shell .sidebar-link.is-disabled{
  color:#263653;
  cursor:not-allowed;
  opacity:1;
}
.app-shell .app-frame{
  min-height:calc(100vh - var(--topbar-height));
  margin-left:var(--sidebar-width);
  padding-top:var(--topbar-height);
  display:flex;
  flex-direction:column;
}
.app-shell .app-main.container{
  width:min(100% - .5rem,1248px);
  max-width:1240px;
  flex:1 0 auto;
  margin:0 auto;
  padding:.65rem 0 1rem;
}
.app-shell .app-footer-container.container{
  width:min(100% - .5rem,1248px);
  max-width:1240px;
  flex:0 0 auto;
  margin:0 auto 1rem;
  padding:0;
}

/* App readability guardrails */
.app-shell:not(:has(.email-workspace)){
  --app-blue:#0b61df;
  --app-blue-soft:#eaf2ff;
  --app-card-border:#dbe3ef;
  --app-card-ink:var(--app-text);
  --app-card-muted:var(--app-muted);
  --pico-color:var(--app-card-ink);
  --pico-muted-color:var(--app-card-muted);
  --pico-muted-border-color:var(--app-card-border);
  --pico-form-element-color:var(--app-card-ink);
  --pico-form-element-background-color:var(--app-input-bg);
  --pico-form-element-border-color:var(--app-input-border);
  --pico-form-element-placeholder-color:#64748b;
  --pico-card-background-color:var(--app-panel-raised);
  --pico-card-border-color:var(--app-card-border);
}
[data-app-theme="dark"] .app-shell:not(:has(.email-workspace)){
  --app-blue:#8fb9ff;
  --app-blue-soft:#17365f;
  --app-card-border:#334155;
  --pico-form-element-placeholder-color:#8493a8;
}
.app-shell:not(:has(.email-workspace)) .app-main{
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) .app-main h1,
.app-shell:not(:has(.email-workspace)) .app-main h2,
.app-shell:not(:has(.email-workspace)) .app-main h3,
.app-shell:not(:has(.email-workspace)) .app-main h4,
.app-shell:not(:has(.email-workspace)) .app-main h5,
.app-shell:not(:has(.email-workspace)) .app-main h6{
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) .app-main .muted,
.app-shell:not(:has(.email-workspace)) .app-main small,
.app-shell:not(:has(.email-workspace)) .app-main .small,
.app-shell:not(:has(.email-workspace)) .pagination-range,
.app-shell:not(:has(.email-workspace)) .field-status{
  color:var(--app-card-muted);
}
.app-shell:not(:has(.email-workspace)) .app-main strong,
.app-shell:not(:has(.email-workspace)) .app-main th,
.app-shell:not(:has(.email-workspace)) label,
.app-shell:not(:has(.email-workspace)) legend{
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) .app-main a:not([role="button"]){
  color:#0b61df;
  font-weight:500;
}
.app-shell:not(:has(.email-workspace)) input:not([type="checkbox"]):not([type="radio"]),
.app-shell:not(:has(.email-workspace)) select,
.app-shell:not(:has(.email-workspace)) textarea{
  border-color:var(--app-input-border);
  background-color:var(--app-input-bg);
  color:var(--app-card-ink);
  box-shadow:none;
  caret-color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) input::placeholder,
.app-shell:not(:has(.email-workspace)) textarea::placeholder{
  color:var(--pico-form-element-placeholder-color);
  opacity:1;
}
.app-shell:not(:has(.email-workspace)) input:focus,
.app-shell:not(:has(.email-workspace)) select:focus,
.app-shell:not(:has(.email-workspace)) textarea:focus{
  border-color:#0b61df;
  background-color:var(--app-input-bg);
  color:var(--app-card-ink);
  box-shadow:0 0 0 1px rgba(11,97,223,.14);
}
.app-shell:not(:has(.email-workspace)) input:disabled,
.app-shell:not(:has(.email-workspace)) select:disabled,
.app-shell:not(:has(.email-workspace)) textarea:disabled{
  background:var(--surface-soft);
  color:var(--app-card-muted);
}
.app-shell:not(:has(.email-workspace)) .invoice-entry-form:not(.invoice-new-form):not(.client-new-form):not(.profile-new-form){
  max-width:520px;
  padding:.78rem;
  border:1px solid var(--app-card-border);
  border-radius:10px;
  background:var(--app-panel-raised);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.app-shell:not(:has(.email-workspace)) .invoice-entry-form:not(.invoice-new-form):not(.client-new-form):not(.profile-new-form) > div{
  margin-bottom:.52rem;
}
.app-shell:not(:has(.email-workspace)) .invoice-entry-form:not(.invoice-new-form):not(.client-new-form):not(.profile-new-form) label{
  margin-bottom:.12rem;
  font-size:.72rem;
  font-weight:600;
}
.app-shell:not(:has(.email-workspace)) .invoice-entry-form:not(.invoice-new-form):not(.client-new-form):not(.profile-new-form) input,
.app-shell:not(:has(.email-workspace)) .invoice-entry-form:not(.invoice-new-form):not(.client-new-form):not(.profile-new-form) textarea{
  min-height:28px;
  height:28px;
  padding:.2rem .4rem;
  font-size:.72rem;
  line-height:1.2;
}
.app-shell:not(:has(.email-workspace)) .invoice-entry-form:not(.invoice-new-form):not(.client-new-form):not(.profile-new-form) textarea{
  height:68px;
  min-height:68px;
}
.app-shell:not(:has(.email-workspace)) .invoice-entry-form:not(.invoice-new-form):not(.client-new-form):not(.profile-new-form) button[type="submit"]{
  min-height:30px;
  padding:.28rem .65rem;
}
.app-shell:not(:has(.email-workspace)) .profile-entry-form{
  margin-top:.75rem;
}
.app-shell:not(:has(.email-workspace)) [data-testid="profile-delete-section"]{
  max-width:520px;
  margin-top:1rem;
}
.app-shell:not(:has(.email-workspace)) .kpi,
.app-shell:not(:has(.email-workspace)) .card,
.app-shell:not(:has(.email-workspace)) .help-box,
.app-shell:not(:has(.email-workspace)) .notice,
.app-shell:not(:has(.email-workspace)) .empty-state,
.app-shell:not(:has(.email-workspace)) .invoice-card,
.app-shell:not(:has(.email-workspace)) .action-menu-panel{
  border:1px solid var(--app-card-border);
  border-radius:10px;
  background:var(--app-panel-raised);
  color:var(--app-card-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.app-shell:not(:has(.email-workspace)) article:not(.notice):not(.empty-state):not(.help-box):not(.kpi):not(.card):not(.invoice-card){
  border-color:var(--app-card-border);
  background:var(--app-panel-raised);
  color:var(--app-card-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.app-shell:not(:has(.email-workspace)) .help-box{
  background:var(--app-panel-soft);
  padding:1.1rem;
}
.app-shell:not(:has(.email-workspace)) .notice{
  background:var(--app-panel-raised);
  padding:1.05rem 1.1rem;
}
.app-shell:not(:has(.email-workspace)) .notice-success{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#14532d;
}
.app-shell:not(:has(.email-workspace)) .notice-error{
  border-color:#fecaca;
  background:#fef2f2;
  color:#7f1d1d;
}
.app-shell:not(:has(.email-workspace)) table{
  overflow:hidden;
  border:1px solid var(--app-card-border);
  border-radius:10px;
  background:var(--app-panel-raised);
  color:var(--app-card-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.app-shell:not(:has(.email-workspace)) table th{
  border-bottom-color:var(--app-card-border);
  background:var(--app-panel-soft);
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) table tbody th{
  background:var(--app-panel-raised);
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) table td{
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) table tr:not(:last-child) td{
  border-bottom-color:var(--app-card-border);
}
.invoice-workspace [data-testid="invoices-follow-table"],
.invoice-workspace [data-testid="invoices-paid-table"]{
  background:var(--invoice-surface);
  color:var(--invoice-ink);
}
.invoice-workspace [data-testid="invoices-follow-table"] th,
.invoice-workspace [data-testid="invoices-paid-table"] th{
  background:var(--invoice-surface-soft);
  color:var(--invoice-ink);
}
.invoice-workspace [data-testid="invoices-follow-table"] td,
.invoice-workspace [data-testid="invoices-paid-table"] td{
  background:transparent;
  color:var(--invoice-ink);
  border-bottom-color:#eef3f8;
}
.invoice-workspace [data-testid="invoices-follow-table"] tbody tr:last-child td,
.invoice-workspace [data-testid="invoices-paid-table"] tbody tr:last-child td{
  border-bottom-color:transparent;
}
.app-shell:not(:has(.email-workspace)) .clients-workspace .clients-table{
  border-color:var(--clients-border);
  background:var(--clients-surface);
  color:var(--clients-ink);
}
.app-shell:not(:has(.email-workspace)) .clients-workspace .clients-table th{
  border-bottom-color:var(--clients-border);
  background:var(--clients-surface-soft);
  color:var(--clients-ink);
}
.app-shell:not(:has(.email-workspace)) .clients-workspace .clients-table tbody tr,
.app-shell:not(:has(.email-workspace)) .clients-workspace .clients-table td{
  background:var(--clients-row);
  color:var(--clients-ink);
}
.app-shell:not(:has(.email-workspace)) .clients-workspace .clients-table tr:not(:last-child) td{
  border-bottom-color:var(--clients-border);
}
.app-shell:not(:has(.email-workspace)) .tag,
.app-shell:not(:has(.email-workspace)) .badge,
.app-shell:not(:has(.email-workspace)) .offer-badge{
  border:1px solid transparent;
  font-weight:600;
}
.app-shell:not(:has(.email-workspace)) .tag-green{
  border-color:#bbf7d0;
  background:#ecfdf3;
  color:#166534;
}
.app-shell:not(:has(.email-workspace)) .tag-amber{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#9a3412;
}
.app-shell:not(:has(.email-workspace)) .tag-red{
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}
.app-shell:not(:has(.email-workspace)) .tag-muted,
.app-shell:not(:has(.email-workspace)) .badge{
  border-color:#dbe3ef;
  background:#edf2f8;
  color:#43506d;
}
.app-shell:not(:has(.email-workspace)) .offer-badge{
  border-color:#b8d5ff;
  background:#f4f8ff;
  color:#0748a6;
}
.app-shell:not(:has(.email-workspace)) .app-main button,
.app-shell:not(:has(.email-workspace)) .app-main a[role="button"]{
  border-radius:8px;
  box-shadow:none;
}
.app-shell:not(:has(.email-workspace)) .app-main button.secondary,
.app-shell:not(:has(.email-workspace)) .app-main a[role="button"].secondary{
  border-color:var(--app-card-border);
  background:var(--app-panel-raised);
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) .app-main button.secondary:hover,
.app-shell:not(:has(.email-workspace)) .app-main a[role="button"].secondary:hover{
  border-color:#cbd8ea;
  background:#fbfdff;
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) .app-main .primary,
.app-shell:not(:has(.email-workspace)) .app-main button:not(.secondary):not(.tab-btn):not(.icon-button):not(.table-sort-link),
.app-shell:not(:has(.email-workspace)) .app-main a[role="button"]:not(.secondary){
  border-color:#1268f3;
  background:#1268f3;
  background-image:none;
  color:#fff;
}
.app-shell:not(:has(.email-workspace)) .app-main .invoice-mobile-tabs .tab-btn{
  border:1px solid transparent;
  background:transparent;
  color:var(--app-card-muted);
}
.app-shell:not(:has(.email-workspace)) .app-main .invoice-mobile-tabs .tab-btn.is-active{
  border-color:transparent;
  background:transparent;
  color:#0748a6;
}
[data-app-theme="dark"] .app-shell:not(:has(.email-workspace)) .app-main .invoice-mobile-tabs .tab-btn.is-active{
  color:var(--invoice-blue);
}
.app-shell:not(:has(.email-workspace)) .app-main .invoice-new-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,320px);
  gap:.75rem;
  align-items:start;
}
.app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-layout{
  align-items:stretch;
}
.app-shell:not(:has(.email-workspace)) .app-main .invoice-new-preview{
  display:block;
  margin:0;
  border:1px solid var(--invoice-new-border) !important;
  border-radius:10px;
  background:var(--invoice-new-surface) !important;
  color:var(--invoice-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
@media (max-width:760px){
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-new-layout{
    grid-template-columns:1fr;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-layout{
    display:flex;
    flex-direction:column;
    align-items:start;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-side{
    display:contents;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview{
    order:-1;
    width:100%;
    padding:0 !important;
    border:0 !important;
    border-radius:0;
    background:transparent !important;
    box-shadow:none;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview .invoice-preview-title{
    display:none;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form{
    order:1;
    width:100%;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-delete-card{
    order:2;
    width:100%;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-delete-card .btn-danger{
    width:100% !important;
    min-height:38px;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview dl{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    border:0;
    border-radius:10px;
    background:var(--invoice-new-surface);
    overflow:hidden;
    box-shadow:none;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview dl div{
    display:grid;
    grid-template-columns:1fr;
    align-content:start;
    gap:.12rem;
    min-width:0;
    padding:.48rem;
    border:0 !important;
    position:relative;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview dl div::after{
    content:"";
    position:absolute;
    top:24%;
    right:0;
    width:1px;
    height:52%;
    background:var(--invoice-new-border);
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview dl div::before{
    content:"";
    position:absolute;
    left:18%;
    right:18%;
    bottom:0;
    height:1px;
    background:var(--invoice-new-border);
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview dl div:nth-child(3n)::after,
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview dl div:nth-last-child(-n+2)::before{
    display:none;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview dt,
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-new-preview dd{
    text-align:left;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form .invoice-form-grid,
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form .invoice-form-section:nth-of-type(2) .invoice-form-grid{
    grid-template-columns:1fr !important;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-entry-form .invoice-form-grid,
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-entry-form .client-form-grid,
  .app-shell:not(:has(.email-workspace)) .app-main .client-entry-form .client-form-grid,
  .app-shell:not(:has(.email-workspace)) .app-main .client-new-form .client-form-grid,
  .app-shell:not(:has(.email-workspace)) .app-main .profile-entry-form .profile-form-grid,
  .app-shell:not(:has(.email-workspace)) .app-main .profile-new-form .profile-form-grid{
    grid-template-columns:1fr !important;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-new-workspace .invoice-client-select-row{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-new-workspace .invoice-inline-link{
    justify-self:end;
    white-space:nowrap;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form{
    padding:.72rem .7rem;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form .invoice-form-section{
    margin-bottom:.52rem !important;
    padding-bottom:.52rem !important;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form .invoice-form-grid{
    gap:.62rem;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form label{
    margin-bottom:.18rem;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form input,
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form select,
  .app-shell:not(:has(.email-workspace)) .app-main .invoice-edit-workspace .invoice-edit-form textarea{
    margin-top:.08rem !important;
    margin-bottom:.08rem !important;
  }
  .invoice-edit-side{
    min-height:auto;
    justify-content:flex-start;
  }
}
.app-shell:not(:has(.email-workspace)) .app-main .client-new-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,320px);
  gap:.62rem;
  align-items:start;
}
.app-shell:not(:has(.email-workspace)) .app-main .client-new-preview{
  display:block;
  border:1px solid var(--client-new-border) !important;
  border-radius:10px;
  background:var(--client-new-surface) !important;
  color:var(--client-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
@media (max-width:760px){
  .app-shell:not(:has(.email-workspace)) .app-main .client-new-layout{
    grid-template-columns:1fr;
  }
}
.app-shell:not(:has(.email-workspace)) .app-main .profile-new-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,320px);
  gap:.62rem;
  align-items:stretch;
}
.app-shell:not(:has(.email-workspace)) .app-main .profile-new-preview,
.app-shell:not(:has(.email-workspace)) .app-main .profile-delete-card{
  display:block;
  border:1px solid var(--profile-new-border) !important;
  border-radius:10px;
  background:var(--profile-new-surface) !important;
  color:var(--profile-new-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
@media (max-width:760px){
  .app-shell:not(:has(.email-workspace)) .app-main .profile-new-layout{
    grid-template-columns:1fr;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .profile-delete-card,
  .app-shell:not(:has(.email-workspace)) [data-testid="profile-delete-section"].profile-delete-card{
    padding:.72rem !important;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .profile-delete-card a[role="button"],
  .app-shell:not(:has(.email-workspace)) .app-main a[data-testid="profile-delete-cta"]{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100% !important;
    min-height:38px;
    padding:.46rem .68rem;
    border-color:#dc2626 !important;
    background:#dc2626 !important;
    color:#fff !important;
    font-size:.82rem;
    font-weight:600;
  }
  .app-shell:not(:has(.email-workspace)) .app-main .profile-new-actions{
    grid-template-columns:1fr;
  }
}
.app-shell:not(:has(.email-workspace)) .app-main .action-menu-panel .menu-item{
  color:var(--app-card-ink);
}
.app-shell:not(:has(.email-workspace)) .app-main .action-menu-panel .menu-item-danger{
  color:#dc2626;
}
.app-shell:not(:has(.email-workspace)) .app-main .action-menu-panel .menu-item:hover,
.app-shell:not(:has(.email-workspace)) .app-main .icon-button:hover{
  background:var(--surface-hover);
  color:#0b61df;
}
.app-shell:not(:has(.email-workspace)) .app-main .action-menu-panel .menu-item-danger:hover{
  background:rgba(220,38,38,.1);
  color:#b91c1c;
}

/* Dense app pages, aligned with the email reminder editor rhythm */
@media (min-width:769px){
  .app-shell:has(.billing-workspace) .app-frame{
    min-height:0;
  }
  .app-shell:has(.billing-workspace) .app-main.container{
    width:calc(100% - 20px) !important;
    max-width:none !important;
    flex:0 0 auto;
    margin:10px 10px 0 !important;
    padding:0 !important;
  }
  .app-shell:has(.billing-workspace) .app-footer-container{
    display:none;
  }
  .billing-workspace{
    height:auto;
    grid-template-rows:auto auto;
    align-content:start;
    overflow:visible;
  }
  .billing-workspace:has(.billing-layout-active){
    grid-template-rows:auto auto;
    align-content:start;
  }
  .billing-layout,
  .billing-bottom-grid{
    min-height:0;
  }
  .billing-plan-card,
  .billing-info-card{
    min-height:0;
    overflow:hidden;
  }
  .billing-info-card{
    display:flex;
    flex-direction:column;
  }
  .billing-info-card ul{
    min-height:0;
    overflow:visible;
  }
  .billing-benefits-card,
  .billing-help-card{
    min-height:0;
  }
  .app-shell:not(:has(.email-workspace)) .app-main.container{
    width:calc(100% - 20px);
    max-width:none;
    margin:10px 10px 0;
    padding:0;
  }
  .app-shell:not(:has(.email-workspace)) .app-footer-container.container{
    width:calc(100% - 20px);
    max-width:none;
    margin:10px;
    padding:0;
  }
  .app-shell:not(:has(.email-workspace)) .app-main{
    font-size:.84rem;
    line-height:1.38;
  }
  .app-shell:not(:has(.email-workspace)) .app-main h2{
    margin:0 0 .35rem;
    font-size:1.18rem;
    line-height:1.16;
  }
  .app-shell:not(:has(.email-workspace)) .app-main h3{
    margin:.35rem 0 .45rem;
    font-size:.92rem;
    line-height:1.18;
  }
  .app-shell:not(:has(.email-workspace)) .app-main p,
  .app-shell:not(:has(.email-workspace)) .app-main ul,
  .app-shell:not(:has(.email-workspace)) .app-main ol{
    margin-bottom:.45rem;
  }
.app-shell:not(:has(.email-workspace)) .app-main section{
  margin-top:.55rem;
}
.app-shell:not(:has(.email-workspace)) .app-main > section:first-child{
  margin-top:0;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace section,
.app-shell:not(:has(.email-workspace)) .account-delete-workspace article{
  margin-top:0;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace h2,
.app-shell:not(:has(.email-workspace)) .account-delete-workspace h3{
  margin-top:0;
  margin-bottom:0;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-header{
  margin:0 0 .45rem;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-danger-card p,
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-help p,
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-consequences p{
  margin:.16rem 0 0;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-list,
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-consequences{
  margin:.34rem 0 0;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-confirm-card input{
  margin:.34rem 0 0;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-actions{
  margin:.34rem 0 .12rem;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-help a{
  margin-top:.34rem;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-layout{
  gap:.28rem;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-main,
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-side{
  gap:.28rem;
  grid-template-rows:auto;
  height:auto;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-main{
  gap:0;
  margin:0 !important;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-card{
  padding:.72rem .78rem;
}
.app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-danger-card{
  padding:.62rem .72rem;
}
  .app-shell:not(:has(.email-workspace)) .section{
    margin-top:.65rem;
  }
  .app-shell:not(:has(.email-workspace)) .section-header{
    gap:.55rem;
    margin-bottom:.25rem;
  }
  .app-shell:not(:has(.email-workspace)) .kpi-grid,
  .app-shell:not(:has(.email-workspace)) .card-grid{
    gap:.55rem;
  }
  .app-shell:not(:has(.email-workspace)) .dashboard-follow-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .app-shell:not(:has(.email-workspace)) .kpi,
  .app-shell:not(:has(.email-workspace)) .card,
  .app-shell:not(:has(.email-workspace)) .help-box,
  .app-shell:not(:has(.email-workspace)) .notice,
  .app-shell:not(:has(.email-workspace)) .empty-state,
  .app-shell:not(:has(.email-workspace)) article{
    border-radius:8px;
  }
  .app-shell:not(:has(.email-workspace)) .kpi,
  .app-shell:not(:has(.email-workspace)) .card,
  .app-shell:not(:has(.email-workspace)) .help-box,
  .app-shell:not(:has(.email-workspace)) .notice,
  .app-shell:not(:has(.email-workspace)) .empty-state{
    padding:.55rem .65rem;
  }
  .app-shell:not(:has(.email-workspace)) .kpi-icon{
    width:24px;
    height:24px;
    margin-bottom:.25rem;
    border-radius:7px;
  }
  .app-shell:not(:has(.email-workspace)) .kpi-icon svg{
    width:14px;
    height:14px;
  }
  .app-shell:not(:has(.email-workspace)) .kpi .value{
    font-size:1.18rem;
    line-height:1.1;
  }
  .app-shell:not(:has(.email-workspace)) .small,
  .app-shell:not(:has(.email-workspace)) small{
    font-size:.72rem;
  }
  .app-shell:not(:has(.email-workspace)) .tag,
  .app-shell:not(:has(.email-workspace)) .badge{
    padding:.1rem .38rem;
    font-size:.68rem;
  }
  .app-shell:not(:has(.email-workspace)) table{
    margin:.35rem 0 0;
    font-size:.78rem;
  }
  .app-shell:not(:has(.email-workspace)) table th{font-weight:600}
  .app-shell:not(:has(.email-workspace)) table th,
  .app-shell:not(:has(.email-workspace)) table td{
    padding:.38rem .45rem;
  }
  .app-shell:not(:has(.email-workspace)) .icon-button,
  .app-shell:not(:has(.email-workspace)) .action-menu summary{
    width:27px;
    height:27px;
  }
  .app-shell:not(:has(.email-workspace)) .icon-button svg,
  .app-shell:not(:has(.email-workspace)) .action-menu summary svg{
    width:16px;
    height:16px;
  }
  .app-shell:not(:has(.email-workspace)) .pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.38rem;
    width:100%;
    margin:.42rem 0 0;
    padding:0 .35rem;
    box-sizing:border-box;
    line-height:1;
  }
  .app-shell:not(:has(.email-workspace)) .pagination-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    min-width:28px;
    min-height:28px;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    vertical-align:middle;
  }
  .app-shell:not(:has(.email-workspace)) .pagination-range{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    margin:0;
    padding:0;
    line-height:36px;
  }
  .app-shell:not(:has(.email-workspace)) form{
    max-width:620px;
  }
  .app-shell:not(:has(.email-workspace)) input,
  .app-shell:not(:has(.email-workspace)) select,
  .app-shell:not(:has(.email-workspace)) textarea{
    min-height:32px;
    padding:.32rem .45rem;
    font-size:.78rem;
  }
  .app-shell:not(:has(.email-workspace)) textarea{
    min-height:92px;
  }
  .app-shell:not(:has(.email-workspace)) label{
    margin-bottom:.2rem;
    font-size:.78rem;
  }
  .app-shell:not(:has(.email-workspace)) button,
  .app-shell:not(:has(.email-workspace)) a[role="button"]{
    min-height:30px;
    padding:.28rem .55rem;
    font-size:.74rem;
  }
  .app-shell:not(:has(.email-workspace)) .invoice-details-grid{
    gap:.45rem .9rem;
    margin-bottom:.45rem;
  }
  .app-shell:not(:has(.email-workspace)) .invoice-details-grid p{
    margin-bottom:.4rem;
  }
  .app-shell:not(:has(.email-workspace)) .invoice-actions{
    top:.45rem;
    right:.45rem;
  }
  .app-shell:not(:has(.email-workspace)) .app-footer{
    padding:.45rem .7rem;
    border-radius:8px;
    font-size:.72rem;
  }
  .billing-workspace{
    gap:.55rem;
  }
  .billing-summary-grid{
    gap:.55rem;
  }
  .billing-summary-card{
    min-height:72px;
    padding:.6rem;
  }
  .billing-card-icon{
    width:40px;
    height:40px;
  }
  .billing-card-icon svg{
    width:21px;
    height:21px;
  }
  .billing-plan-card,
  .billing-info-card,
  .billing-benefits-card,
  .billing-help-card{
    padding:.65rem;
  }
  .billing-price strong{
    font-size:1.6rem;
  }
  .billing-info-card ul{
    gap:.35rem;
  }
  .billing-benefits{
    gap:.55rem;
  }
}

@media (max-width:768px){
  .app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"]{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.38rem;
  }
  .app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi:first-child{
    grid-column:1 / -1;
  }
  .app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi{
    min-height:82px;
    column-gap:.55rem;
    padding:.48rem .58rem;
  }
  .app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi .muted{
    font-size:.7rem;
  }
  .app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi .value{
    font-size:1.06rem;
  }
  .app-shell:not(:has(.email-workspace)) [data-testid="dashboard-kpi"] .kpi .small{
    font-size:.66rem;
  }
  .app-shell:not(:has(.email-workspace)) .dashboard-balance-card{
    margin-top:0;
  }
  .app-shell:not(:has(.email-workspace)) .dashboard-balance-legend{
    flex-direction:column;
    align-items:flex-start;
    gap:.32rem;
  }
  .dashboard-follow-row{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "marker tag action"
      "marker title title"
      "marker message message"
      "marker meta meta";
    gap:.24rem .6rem;
    align-items:start;
  }
  .dashboard-follow-marker{
    grid-area:marker;
  }
  .dashboard-follow-copy{
    display:contents;
  }
  .dashboard-follow-copy .tag{
    grid-area:tag;
    align-self:center;
  }
  .dashboard-follow-copy strong{
    grid-area:title;
    white-space:normal;
  }
  .dashboard-follow-copy > .muted{
    grid-area:message;
    white-space:normal;
  }
  .dashboard-follow-meta{
    grid-area:meta;
    justify-self:start;
    text-align:left;
  }
  .dashboard-follow-action{
    grid-area:action;
    align-self:center;
    justify-self:end;
  }
  .app-shell .app-topbar{
    position:fixed;
    min-height:58px;
    padding:0 .75rem;
  }
  .app-shell .topbar-left{gap:.65rem}
  .app-shell .topbar-left .topbar-brand{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:1;
  }
  .app-shell .topbar-actions{
    position:relative;
    z-index:2;
  }
  .app-shell .topbar-brand span{font-size:1rem}
  .app-shell .topbar-divider{display:none}
  .app-shell .topbar-left > .topbar-menu{
    display:none;
  }
  .app-shell .topbar-menu-mobile{
    display:inline-flex;
  }
  .app-shell .topbar-help span,
  .app-shell .user-meta,
  .app-shell .user-chevron{
    display:none;
  }
  .app-shell .user-menu{
    display:none;
  }
  .app-shell .topbar-actions{gap:.35rem}
  .mobile-back-link{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    width:max-content;
    max-width:100%;
    min-height:32px;
    margin:0 0 .35rem;
    padding:.28rem .48rem;
    border:1px solid var(--app-card-border);
    border-radius:8px;
    background:var(--app-panel-raised);
    color:var(--app-link);
    font-size:.8rem;
    font-weight:600;
    text-decoration:none;
  }
  .mobile-back-link svg{
    width:16px;
    height:16px;
  }
  .mobile-back-link:active{
    background:var(--app-blue-soft);
    color:var(--app-blue);
  }
  .invoice-show-workspace{
    gap:.55rem;
  }
  .invoice-show-header{
    align-items:flex-start;
  }
  .invoice-show-header h2{
    font-size:1.2rem;
  }
  .invoice-show-menu{
    position:relative;
    flex:0 0 34px;
    width:34px;
    height:34px;
    margin:0 !important;
  }
  .app-shell:not(:has(.email-workspace)) .invoice-show-menu summary{
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    margin:0 !important;
  }
  .invoice-show-menu .action-menu-panel{
    position:absolute;
    top:calc(100% + .35rem);
    right:0;
    margin:0;
    min-width:176px;
    padding:.34rem;
    border-radius:10px;
    border-color:#b8d5ff;
    background:var(--show-surface);
    box-shadow:0 14px 32px rgba(15,23,42,.16);
  }
  .invoice-show-menu .action-menu-panel .menu-item{
    min-height:38px;
    padding:.5rem .58rem;
    border-radius:8px;
    color:var(--show-ink);
    font-size:.82rem;
    font-weight:600;
    text-decoration:none;
  }
  .invoice-show-menu .action-menu-panel .menu-item + .menu-item{
    margin-top:.12rem;
  }
  .invoice-show-menu .action-menu-panel .menu-item:hover{
    background:transparent;
    color:var(--show-ink) !important;
    text-decoration:none;
  }
  .invoice-show-menu .action-menu-panel .menu-item:active{
    background:var(--show-blue-soft);
    color:var(--show-blue) !important;
    text-decoration:none;
  }
  .invoice-show-card{
    display:none;
  }
  .invoice-show-mobile-summary,
  .invoice-show-mobile-details{
    display:grid;
    padding:.78rem;
    border-radius:10px;
  }
  .invoice-show-mobile-summary{
    gap:.68rem;
  }
  .invoice-show-mobile-summary > .invoice-show-status{
    justify-self:start;
    font-size:.82rem;
  }
  .invoice-show-mobile-amounts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
  }
  .invoice-show-mobile-amounts > div + div{
    padding-left:.75rem;
    border-left:1px solid var(--show-border);
  }
  .invoice-show-mobile-amounts strong{
    display:block;
    margin:0 0 .16rem;
    color:var(--show-ink);
    font-size:.78rem;
    font-weight:600;
  }
  .invoice-show-mobile-amounts span{
    color:var(--show-ink);
    font-size:.96rem;
    font-weight:600;
  }
  .invoice-show-mobile-payment{
    display:grid;
    gap:.55rem;
  }
  .invoice-show-mobile-payment form{
    margin:0;
  }
  .invoice-show-mobile-payment .invoice-show-paid-btn,
  .invoice-show-mobile-payment .invoice-paid-btn{
    width:100% !important;
  }
  .invoice-show-mobile-payment .invoice-paid-info{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:.4rem;
    align-items:start;
    margin:0;
    padding-right:.6rem;
    color:var(--show-muted);
    font-size:.78rem;
    line-height:1.35;
  }
  .invoice-show-mobile-payment .invoice-paid-info svg{
    display:block;
    width:15px;
    height:15px;
    margin-top:0;
    color:var(--show-blue);
  }
  .invoice-show-mobile-details{
    gap:.55rem;
  }
  .invoice-show-mobile-details h3{
    margin:0;
    color:var(--show-ink);
    font-size:1rem;
    font-weight:600;
  }
  .invoice-show-mobile-detail-list{
    display:grid;
  }
  .invoice-show-mobile-detail-list > div{
    display:grid;
    grid-template-columns:24px minmax(72px,auto) minmax(0,1fr);
    gap:.45rem;
    align-items:start;
    padding:.46rem 0;
    border-bottom:1px solid var(--show-border);
  }
  .invoice-show-mobile-detail-list > div:last-child{
    border-bottom:0;
  }
  .invoice-show-mobile-detail-list > div > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:6px;
    background:var(--show-blue-soft);
    color:var(--show-blue);
  }
  .invoice-show-mobile-detail-list svg{
    width:14px;
    height:14px;
  }
  .invoice-show-mobile-detail-list strong{
    color:var(--show-ink);
    font-size:.78rem;
    font-weight:600;
  }
  .invoice-show-mobile-detail-list p{
    margin:0;
    color:var(--show-ink);
    font-size:.8rem;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .invoice-show-history{
    margin-bottom:0 !important;
    padding:.75rem;
    border-radius:10px;
  }
  .app-shell .app-sidebar{
    top:0;
    width:min(86vw,304px);
    max-height:100vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:1rem;
    transform:translateX(-100%);
    transition:transform .18s ease;
    box-shadow:18px 0 36px rgba(15,23,42,.18);
  }
  .app-shell.is-sidebar-open .app-sidebar{transform:translateX(0)}
  .app-shell .sidebar-mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:1rem;
    border-bottom:1px solid #dbe3ef;
  }
  .app-shell .sidebar-close{display:inline-flex}
  .app-shell .sidebar-nav{gap:.4rem}
  .app-shell .sidebar-nav-secondary{margin-top:.5rem}
  .app-shell .sidebar-link{
    font-size:.88rem;
  }
  .app-shell .sidebar-nav-secondary .sidebar-link{
    font-size:.82rem;
  }
  .app-shell .sidebar-mobile-actions{
    display:grid;
    gap:.42rem;
    margin-top:auto;
    padding-top:.85rem;
    border-top:1px solid var(--app-card-border);
  }
  .app-shell .sidebar-mobile-action{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:.62rem;
    width:100%;
    margin:0;
    padding:.58rem .62rem;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:var(--app-card-ink);
    font-size:.88rem;
    font-weight:600;
    line-height:1.2;
    text-align:left;
    text-decoration:none;
    box-shadow:none;
  }
  .app-shell .sidebar-mobile-action svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
    stroke-width:1.8;
  }
  .app-shell .sidebar-mobile-action:active{
    background:var(--app-blue-soft);
    color:var(--app-blue);
  }
  .app-shell .sidebar-mobile-logout{
    color:#dc2626;
  }
  .app-shell .sidebar-mobile-logout:active{
    background:rgba(220,38,38,.1);
    color:#b91c1c;
  }
  .app-shell:not(.is-sidebar-open) .sidebar-overlay{display:none}
  .app-shell .app-frame{margin-left:0;padding-top:58px}
  .app-shell .app-main.container{
    width:100% !important;
    max-width:100% !important;
    margin:0;
    padding:.5rem .75rem 1rem !important;
  }
  .app-shell .app-main.container > *{
    margin-top:.5rem;
  }
  .app-shell .app-main.container > :first-child{
    margin-top:0;
  }
  .app-shell .app-footer-container.container{
    width:100% !important;
    max-width:100% !important;
    margin:0;
    padding:.75rem !important;
  }
  .billing-summary-grid,
  .billing-layout,
  .billing-bottom-grid,
  .billing-benefits{
    grid-template-columns:1fr;
  }
  .billing-layout{
    grid-template-areas:
      "plan"
      "info"
      "benefits"
      "help";
    align-items:start;
  }
  .billing-status{
    font-size:.76rem;
  }
  .billing-summary-card{
    min-height:0;
  }
  .billing-plan-card,
  .billing-info-card,
  .billing-benefits-card,
  .billing-help-card{
    height:auto;
    align-self:start;
  }
  .billing-info-card{
    justify-content:flex-start;
  }
  .billing-active-actions{
    grid-template-columns:1fr;
    width:100%;
    gap:.5rem;
  }
  .billing-action-form,
  .billing-active-actions .billing-action-form{
    width:100%;
    margin:.25rem 0 0;
  }
  .billing-active-actions .billing-action-form{
    margin:0;
  }
  .billing-action-form button,
  .billing-action-form [data-testid="billing-portal-submit"],
  .billing-action-form [data-testid="billing-cancel-submit"],
  .billing-action-form [data-testid="billing-checkout-submit"]{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100% !important;
    height:36px;
    min-height:36px;
    margin:0 !important;
    padding:.34rem .65rem;
    line-height:1.15;
  }
  .billing-legal-links{
    justify-content:center;
    align-items:center;
    flex-direction:row;
    flex-wrap:wrap;
    gap:.35rem .5rem;
    text-align:center;
  }
  .billing-legal-links span{
    display:inline;
  }
  .billing-help-card .secondary{
    width:100% !important;
  }
}

/* Dense viewport fit for the email template editor */
@media (min-width:769px){
  .app-shell:has(.email-workspace) .app-main.container{
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin:10px 10px 0 !important;
    padding:0 !important;
  }
  .app-shell:has(.email-workspace) .app-footer-container{display:none}
  .email-workspace{
    height:calc(100vh - var(--topbar-height) - .7rem);
    overflow:hidden;
  }
  .email-template-form{
    height:100%;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:.38rem;
  }
  .email-workspace .muted{
    font-size:.68rem;
    line-height:1.28;
  }
  .email-page-header{
    margin:0;
    gap:.65rem;
  }
  .email-page-header h2{
    margin:0 0 .15rem;
    font-size:1.16rem;
  }
  .email-page-header p{
    max-width:680px;
    font-size:.68rem;
    line-height:1.28;
  }
  .email-tone-badge{
    padding:.2rem .45rem;
    font-size:.66rem;
  }
  .email-tone-badge svg{width:14px;height:14px}
  .email-layout{
    min-height:0;
    height:100%;
    gap:.55rem;
    align-items:stretch;
    grid-template-columns:minmax(560px,1.12fr) minmax(400px,.88fr);
  }
  .email-main-column,
  .email-side-column{
    min-height:0;
    height:100%;
    gap:.38rem;
  }
  .email-relance-tabs{
    gap:.35rem;
    margin:0 0 .35rem;
  }
  .email-relance-card{
    min-height:52px;
    padding:.32rem;
    border-radius:7px;
    gap:.35rem;
  }
  .email-relance-step{
    width:20px;
    height:20px;
    font-size:.68rem;
  }
  .email-relance-copy strong{font-size:.72rem}
  .email-relance-copy small{font-size:.58rem}
  .email-relance-pill{
    margin-top:.1rem;
    padding:.12rem .4rem;
    font-size:.6rem;
  }
  .email-editor-card,
  .email-side-card,
  .email-best-practices{
    border-radius:7px;
  }
  .email-editor-card{
    flex:1 1 auto;
    display:flex;
    min-height:0;
    overflow:hidden;
    padding:.45rem;
  }
  .email-editor-panel.is-active{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    min-height:0;
    width:100%;
  }
  .email-panel-heading{
    margin-bottom:.25rem;
    gap:.5rem;
  }
  .email-panel-heading h3,
  .email-card-title h3,
  .email-best-practices h3{font-size:.76rem}
  .email-field-label{
    margin:.34rem 0 .16rem;
    font-size:.72rem;
  }
  .email-editor-panel input[type="text"]{
    min-height:32px;
    height:32px;
    padding:.25rem .45rem;
    font-size:.76rem;
  }
  .email-editor-panel textarea{
    flex:1 1 auto;
    height:auto;
    min-height:140px;
    overflow:auto;
    padding:.42rem;
    font-size:.7rem;
    line-height:1.32;
  }
  .email-editor-panel .small{margin:.2rem 0 0}
  .email-side-column{
    display:flex;
    flex-direction:column;
  }
  .email-side-card{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
    padding:.45rem;
  }
  .email-side-card .small:last-child{margin-top:auto}
  .email-card-title{
    gap:.35rem;
    margin-bottom:.25rem;
  }
  .email-card-icon{
    width:20px;
    height:20px;
    flex-basis:20px;
  }
  .email-card-icon svg{width:13px;height:13px}
  .email-token-list{
    flex:1 1 auto;
    margin:.32rem 0;
    overflow:auto;
  }
  .email-token-row{
    min-height:28px;
    padding:.22rem .35rem;
    gap:.4rem;
  }
  .email-token-row code{
    font-size:.66rem;
    padding:.04rem .18rem;
  }
  .email-token-row span{font-size:.66rem}
  .email-preview-subject{
    margin:.3rem 0;
    padding-bottom:.3rem;
    color:var(--email-ink);
    font-size:.72rem;
    font-weight:400;
  }
  .email-preview-subject span{color:var(--email-ink)}
  .email-preview-body{
    flex:1 1 auto;
    max-height:none;
    min-height:0;
    overflow:auto;
    font-size:.66rem;
    line-height:1.32;
  }
  .email-best-practices{
    padding:.32rem;
    gap:.3rem;
  }
  .email-best-practices ul{margin:.18rem 0 0}
  .email-best-practices li{
    margin:.04rem 0;
    color:var(--email-ink);
    font-size:.66rem;
    font-weight:400;
  }
  .email-actions-bar{
    position:static;
    margin:0;
    padding:.34rem;
    gap:.45rem;
    border-radius:7px;
    overflow:visible;
  }
  .email-actions-left,
  .email-actions-right{gap:.35rem}
  .email-actions-right{
    flex-wrap:nowrap;
    margin-left:auto;
    min-width:0;
  }
  .email-actions-right button{
    white-space:nowrap;
    flex:0 0 auto;
    width:auto !important;
  }
  .email-actions-right button.primary{
    min-width:0;
    padding-inline:.5rem;
  }
  .email-actions-bar button{
    min-height:28px;
    padding:.22rem .45rem;
    font-size:.66rem;
  }
  .email-actions-bar button svg{width:12px;height:12px}
}

/* Live tables polish: keep filters compact and table headers link-like. */
.invoice-workspace .invoice-toolbar,
.clients-workspace .clients-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,420px) minmax(150px,190px) minmax(145px,175px) auto max-content;
  gap:.58rem;
  align-items:center;
}
.invoice-workspace [data-testid="invoices-paid-section"] .invoice-toolbar{
  grid-template-columns:minmax(260px,420px) minmax(150px,190px) auto 1fr max-content;
}
.invoice-workspace [data-testid="invoices-paid-section"] .invoice-reset-link{
  grid-column:5;
}
.invoice-workspace .invoice-search-field,
.clients-workspace .clients-search-field{
  width:100%;
  min-width:0;
  max-width:420px;
  flex:0 1 420px;
}
.invoice-workspace .invoice-select-field,
.clients-workspace .clients-select-field{
  min-width:0;
}
.invoice-workspace .invoice-select-field select,
.clients-workspace .clients-select-field select{
  min-width:0;
}
.invoice-workspace .invoice-reset-link,
.clients-workspace .clients-reset-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.28rem;
  align-self:center;
  justify-self:end;
  width:auto !important;
  height:34px;
  min-height:34px;
  margin:0 !important;
  padding:.25rem .55rem !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--invoice-blue) !important;
  font-weight:600;
  white-space:nowrap;
}
.invoice-workspace .invoice-reset-link svg,
.clients-workspace .clients-reset-link svg{
  width:15px;
  height:15px;
}
.invoice-workspace .table-sort-link,
.clients-workspace .table-sort-link{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--invoice-ink) !important;
  font:inherit;
  font-weight:600;
  line-height:1.2;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.invoice-workspace .table-sort-link:hover,
.invoice-workspace .table-sort-link.is-active,
.clients-workspace .table-sort-link:hover,
.clients-workspace .table-sort-link.is-active{
  background:transparent !important;
  color:var(--invoice-blue);
}
.invoice-workspace .table-sort-link span,
.clients-workspace .table-sort-link span{
  display:inline-flex;
  min-width:.7rem;
  margin-left:.2rem;
  color:var(--invoice-muted);
  font-size:.78rem;
}

@media (max-width:1100px){
  .invoice-workspace .invoice-toolbar,
  .clients-workspace .clients-toolbar{
    grid-template-columns:minmax(220px,1fr) minmax(145px,180px) minmax(140px,170px) auto max-content;
  }
  .invoice-workspace [data-testid="invoices-paid-section"] .invoice-toolbar{
    grid-template-columns:minmax(220px,1fr) minmax(145px,180px) auto 1fr max-content;
  }
}
@media (max-width:760px){
  .invoice-workspace .invoice-mobile-tabs{
    flex-wrap:nowrap;
    padding:0 .45rem;
  }
  .invoice-workspace .invoice-mobile-tabs .tab-btn{
    flex:1 1 0;
    width:auto;
    max-width:none;
    justify-content:center;
    white-space:nowrap;
  }
  .invoice-workspace .invoice-status-legend{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.45rem .55rem;
  }
  .invoice-workspace .invoice-status-legend > span{
    padding:0;
  }
  .invoice-workspace .invoice-status-legend > span:not(:last-child)::after{
    content:none;
  }
  .invoice-workspace .invoice-toolbar,
  .clients-workspace .clients-toolbar,
  .invoice-workspace [data-testid="invoices-paid-section"] .invoice-toolbar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .invoice-workspace .invoice-search-field,
  .clients-workspace .clients-search-field{
    grid-column:1 / -1;
    max-width:none;
  }
  .invoice-workspace [data-testid="invoices-paid-section"] .invoice-select-field{
    grid-column:1 / -1;
  }
  .invoice-workspace .invoice-reset-link,
  .clients-workspace .clients-reset-link{
    justify-self:end;
    grid-column:1 / -1;
  }
  .invoice-workspace [data-testid="invoices-paid-section"] .invoice-reset-link{
    grid-column:1 / -1;
  }
  .app-shell:not(:has(.email-workspace)) .invoice-workspace [data-testid="invoices-follow-table"],
  .app-shell:not(:has(.email-workspace)) .invoice-workspace [data-testid="invoices-paid-table"]{
    border:0;
    background:transparent;
  }
  .app-shell:not(:has(.email-workspace)) .clients-workspace .clients-table{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .invoice-workspace [data-testid="invoices-follow-table"],
  .invoice-workspace [data-testid="invoices-paid-table"]{
    border-collapse:separate;
    border-spacing:0 .55rem;
  }
  .clients-workspace .clients-table{
    width:100%;
    border-collapse:separate;
    border-spacing:.55rem .55rem;
  }
  .clients-workspace .clients-table tbody tr{
    margin-right:0;
    margin-left:0;
    padding:0;
    border-color:var(--clients-border);
    border-radius:14px;
    background:var(--clients-surface);
    box-shadow:0 8px 22px rgba(15,23,42,.06);
  }
  .clients-workspace tr[data-client-id]{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "client type"
      "invoices late"
      "recover activity"
      "actions actions";
    gap:0;
    overflow:hidden;
  }
  .clients-workspace tr[data-client-id] td{
    display:block;
    min-width:0;
    padding:.42rem .72rem;
    border-bottom:0 !important;
  }
  .clients-workspace tr[data-client-id] td::before{
    display:block;
    margin:0 0 .12rem;
    color:var(--clients-muted);
    font-size:.72rem;
    font-weight:500;
  }
  .clients-workspace tr[data-client-id] td:nth-child(1){
    grid-area:client;
    padding:.72rem .72rem .62rem;
  }
  .clients-workspace tr[data-client-id] td:nth-child(1)::before,
  .clients-workspace tr[data-client-id] td:nth-child(2)::before,
  .clients-workspace tr[data-client-id] td:last-child::before{
    content:none;
  }
  .clients-workspace tr[data-client-id] td:nth-child(2){
    grid-area:type;
    align-self:start;
    justify-self:end;
    padding:.74rem .72rem .62rem .35rem;
    text-align:right;
  }
  .clients-workspace tr[data-client-id] td:nth-child(2) > span:first-child{
    display:none;
  }
  .clients-workspace tr[data-client-id] td:nth-child(3){
    display:none;
  }
  .clients-workspace tr[data-client-id] td:nth-child(4){
    display:none;
  }
  .clients-workspace tr[data-client-id] td:nth-child(5){
    grid-area:invoices;
    border-top:1px solid var(--clients-border);
  }
  .clients-workspace tr[data-client-id] td:nth-child(6){
    grid-area:late;
    border-top:1px solid var(--clients-border);
  }
  .clients-workspace tr[data-client-id] td:nth-child(7){
    grid-area:recover;
  }
  .clients-workspace tr[data-client-id] td:nth-child(8){
    grid-area:activity;
  }
  .clients-workspace tr[data-client-id] td:nth-child(5),
  .clients-workspace tr[data-client-id] td:nth-child(6),
  .clients-workspace tr[data-client-id] td:nth-child(7),
  .clients-workspace tr[data-client-id] td:nth-child(8){
    display:grid;
    gap:.12rem;
    align-content:start;
  }
  .clients-workspace tr[data-client-id] td:nth-child(6),
  .clients-workspace tr[data-client-id] td:nth-child(8){
    border-left:1px solid var(--clients-border);
    text-align:right;
    justify-items:end;
  }
  .clients-workspace tr[data-client-id] td:nth-child(9){
    grid-area:actions;
    padding:.48rem .72rem .62rem;
    border-top:1px solid var(--clients-border);
  }
  .clients-workspace tr[data-client-id] .client-table-identity{
    min-width:0;
    align-items:flex-start;
    gap:.58rem;
  }
  .clients-workspace tr[data-client-id] .client-avatar{
    width:34px;
    height:34px;
    flex-basis:34px;
    font-size:.82rem;
  }
  .clients-workspace tr[data-client-id] .client-table-identity strong{
    font-size:.9rem;
    line-height:1.2;
  }
  .clients-workspace tr[data-client-id] .client-table-identity small{
    margin-top:.06rem;
    font-size:.72rem;
  }
  .clients-workspace tr[data-client-id] .client-table-identity .client-mobile-email{
    display:block;
    color:var(--clients-muted);
    font-size:.78rem;
    overflow-wrap:anywhere;
  }
  .clients-workspace tr[data-client-id] .client-table-actions,
  .clients-workspace tr[data-client-id] td:nth-child(9){
    display:flex;
    justify-content:space-between;
    gap:.7rem;
  }
  .clients-workspace tr[data-client-id] .client-table-actions{
    flex:1 1 auto;
  }
  .clients-workspace tr[data-client-id] .client-table-actions form{
    flex:1 1 0;
  }
  .clients-workspace tr[data-client-id] .icon-button,
  .clients-workspace tr[data-client-id] .client-table-actions button.icon-button{
    flex:1 1 0;
    width:100% !important;
    min-width:0;
    height:32px;
    min-height:32px !important;
    border-radius:8px;
  }
  .invoice-workspace tr[data-invoice-id]{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "client status"
      "invoice amount"
      "date delay"
      "automation automation"
      "actions actions";
    gap:0;
    padding:0;
    overflow:hidden;
    border-color:var(--invoice-border);
    border-radius:14px;
    background:var(--invoice-surface);
    box-shadow:0 8px 22px rgba(15,23,42,.06);
  }
  .invoice-workspace tr[data-invoice-id] td{
    display:block;
    min-width:0;
    padding:.42rem .72rem;
    border-bottom:0 !important;
  }
  .invoice-workspace tr[data-invoice-id] td::before{
    color:var(--invoice-muted);
    font-size:.72rem;
    font-weight:500;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(1){
    grid-area:client;
    display:block;
    padding:.72rem .72rem .62rem;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(1)::before,
  .invoice-workspace tr[data-invoice-id] td:nth-child(6)::before,
  .invoice-workspace [data-testid="invoices-paid-row"] td:nth-child(5)::before,
  .invoice-workspace tr[data-invoice-id] td:last-child::before{
    content:none;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(6){
    grid-area:status;
    align-self:start;
    justify-self:end;
    padding:.74rem .72rem .62rem .35rem;
  }
  .invoice-workspace tr[data-invoice-id] .invoice-client-cell{
    min-width:0;
    align-items:flex-start;
    gap:.58rem;
  }
  .invoice-workspace tr[data-invoice-id] .invoice-avatar{
    width:34px;
    height:34px;
    flex-basis:34px;
    font-size:.82rem;
  }
  .invoice-workspace tr[data-invoice-id] .invoice-client-cell strong{
    font-size:.9rem;
    line-height:1.2;
  }
  .invoice-workspace tr[data-invoice-id] .invoice-client-cell small{
    margin-top:.06rem;
    font-size:.72rem;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(2){
    grid-area:invoice;
    border-top:1px solid var(--invoice-border);
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(2) small{
    display:none;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(3){
    grid-area:amount;
    border-top:1px solid var(--invoice-border);
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(4){
    grid-area:date;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(5){
    grid-area:delay;
  }
  .invoice-workspace [data-testid="invoices-follow-row"] td:nth-child(5)::before{
    content:"Retard";
  }
  .invoice-workspace [data-testid="invoices-paid-row"] td:nth-child(4){
    grid-area:delay;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(2),
  .invoice-workspace tr[data-invoice-id] td:nth-child(3),
  .invoice-workspace tr[data-invoice-id] td:nth-child(4),
  .invoice-workspace tr[data-invoice-id] td:nth-child(5){
    display:grid;
    gap:.12rem;
    align-content:start;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(3),
  .invoice-workspace tr[data-invoice-id] td:nth-child(5),
  .invoice-workspace [data-testid="invoices-paid-row"] td:nth-child(4){
    border-left:1px solid var(--invoice-border);
    text-align:right;
    justify-items:end;
  }
  .invoice-workspace [data-testid="invoices-paid-row"] td:nth-child(4){
    grid-area:delay;
  }
  .invoice-workspace [data-testid="invoices-paid-row"] td:nth-child(5){
    grid-area:status;
    align-self:start;
    justify-self:end;
    padding:.74rem .72rem .62rem .35rem;
    border-left:0;
    text-align:left;
    justify-items:start;
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(7),
  .invoice-workspace [data-testid="invoices-paid-row"] td:nth-child(6){
    grid-area:automation;
    display:flex;
    align-items:center;
    gap:.35rem;
    padding:.52rem .72rem;
    border-top:1px solid var(--invoice-border);
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(7)::before,
  .invoice-workspace [data-testid="invoices-paid-row"] td:nth-child(6)::before{
    content:"Automatisation :";
  }
  .invoice-workspace tr[data-invoice-id] td:nth-child(7) small,
  .invoice-workspace [data-testid="invoices-paid-row"] td:nth-child(6) small{
    margin-left:.4rem;
  }
  .invoice-workspace tr[data-invoice-id] td:last-child{
    grid-area:actions;
    padding:.48rem .72rem .62rem;
    border-top:1px solid var(--invoice-border);
  }
  .invoice-workspace tr[data-invoice-id] .table-actions,
  .invoice-workspace tr[data-invoice-id] td:last-child{
    display:flex;
    justify-content:space-between;
    gap:.7rem;
  }
  .invoice-workspace tr[data-invoice-id] .table-actions{
    flex:1 1 auto;
  }
  .invoice-workspace tr[data-invoice-id] .icon-button{
    flex:1 1 0;
    height:32px;
    min-width:0;
    border-radius:8px;
  }
  .clients-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.38rem;
    margin:.45rem 0;
  }
  .clients-summary-card{
    min-height:82px;
    gap:.5rem;
    padding:.5rem .58rem;
  }
  .clients-summary-icon{
    width:30px;
    height:30px;
    border-radius:9px;
  }
  .clients-summary-icon svg{
    width:17px;
    height:17px;
  }
  .clients-summary-card span:not(.clients-summary-icon){
    font-size:.7rem;
  }
  .clients-summary-card strong{
    font-size:1.04rem;
  }
  .clients-summary-card small{
    font-size:.66rem;
    line-height:1.2;
  }
  .invoice-workspace .pagination,
  .clients-workspace .pagination{
    display:grid;
    grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);
    gap:.55rem;
    padding:.2rem .35rem 0;
  }
  .invoice-workspace .pagination-btn,
  .clients-workspace .pagination-btn{
    flex:initial;
    width:100% !important;
    min-width:48px;
    height:40px !important;
    min-height:40px !important;
    margin:0 0 3px;
    border-radius:10px;
    color:var(--invoice-blue);
    font-size:1.1rem;
    font-weight:700;
  }
  .invoice-workspace .pagination-range,
  .clients-workspace .pagination-range{
    min-height:40px;
    padding:0 .2rem;
    line-height:1.2;
    font-size:.78rem;
    white-space:nowrap;
  }
}

@media (max-width:1000px){
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-layout{
    grid-template-columns:1fr;
    gap:.4rem;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-main,
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-side{
    grid-template-rows:auto;
    height:auto;
    gap:.4rem;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-side{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-header h2{
    font-size:1.45rem;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-header > p:last-child{
    font-size:.82rem;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-card,
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-danger-card{
    padding:.62rem;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-actions{
    flex-wrap:wrap;
    align-items:stretch;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-submit,
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-cancel{
    width:100% !important;
  }
}

@media (max-width:520px){
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-danger-card,
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-help{
    grid-template-columns:auto minmax(0,1fr);
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-danger-icon{
    width:42px;
    height:42px;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-danger-icon svg{
    width:26px;
    height:26px;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-consequences > li > span,
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-help-icon{
    width:38px;
    height:38px;
  }
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-consequences svg,
  .app-shell:not(:has(.email-workspace)) .account-delete-workspace .account-delete-help-icon svg{
    width:24px;
    height:24px;
  }
}

.app-shell{
  --app-page-title-size:1.42rem;
}
.app-shell .app-main > h2,
.app-shell .app-main > section:first-child > h2,
.app-shell .app-main .section-header h2,
.app-shell .billing-header h2,
.app-shell .invoice-header h2,
.app-shell .invoice-new-header h2,
.app-shell .client-new-header h2,
.app-shell .profile-new-header h2,
.app-shell .account-delete-header h2,
.app-shell .email-page-header h2{
  font-size:var(--app-page-title-size);
  line-height:1.15;
  font-weight:600;
}

@media (max-width:768px){
  .app-shell{
    --app-page-title-size:1.2rem;
  }
}