/* Invoiced interaction language: calm, tactile motion with intentional rhythm.
   Typography: Manrope for headings, DM Sans for long-form labels and data.
   Decorative motion is disabled for reduced-motion preferences and print. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-out:cubic-bezier(.2,.8,.2,1);--motion-fast:160ms;--motion-mid:280ms;--motion-slow:600ms}
html{scroll-behavior:smooth}
body,input,select,textarea,button{font-feature-settings:'kern' 1,'liga' 1}
body{font-kerning:normal;text-rendering:optimizeLegibility}
h1,h2,h3,.page-title,.auth-card h2,.studio-section-head h3{font-family:'Manrope','DM Sans',system-ui,sans-serif;letter-spacing:-.035em;text-wrap:balance}
p,.help-text,.studio-privacy,.auth-card>p{line-height:1.65}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,.nav-link:focus-visible{outline:3px solid #4c9b8a;outline-offset:3px}
@keyframes reveal-up{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes reveal-left{from{opacity:0;transform:translate3d(-18px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes reveal-soft{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes float-accent{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
@keyframes border-breathe{0%,100%{border-color:rgba(35,118,101,.18)}50%{border-color:rgba(35,118,101,.43)}}
@keyframes shimmer{from{background-position:200% center}to{background-position:-200% center}}
@keyframes small-pop{0%{transform:scale(.95)}70%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
/* View switch / content rhythm */
#pageContent>.page,#pageContent>.page-view,#pageContent>.dashboard-page,#pageContent>.studio-shell,#pageContent>.settings-page,#pageContent>section{animation:reveal-up var(--motion-slow) var(--motion-ease) both}
#pageContent .page-header,#pageContent .hero-card,#pageContent .studio-hero-card,#pageContent .studio-section-head{animation:reveal-up 430ms var(--motion-ease) both}
#pageContent .stat-card,#pageContent .metric-card,#pageContent .kpi-card,#pageContent .dashboard-stat{animation:reveal-up 510ms var(--motion-ease) both}
#pageContent .stat-card:nth-child(2),#pageContent .metric-card:nth-child(2),#pageContent .kpi-card:nth-child(2){animation-delay:65ms}
#pageContent .stat-card:nth-child(3),#pageContent .metric-card:nth-child(3),#pageContent .kpi-card:nth-child(3){animation-delay:115ms}
#pageContent .stat-card:nth-child(4),#pageContent .metric-card:nth-child(4),#pageContent .kpi-card:nth-child(4){animation-delay:165ms}
.studio-editor-group,.studio-template-grid,.studio-guided-nav,.studio-saved-list,.studio-quick-bill{animation:reveal-soft 380ms var(--motion-ease) both}
.studio-step-warning,.auth-error:not(:empty){animation:small-pop 290ms var(--motion-ease) both}
/* Navigation and controls */
.sidebar .nav-link,.sidebar .nav-more-toggle,.topbar button,.sidebar button{transition:background-color var(--motion-mid) ease,color var(--motion-fast) ease,transform var(--motion-mid) var(--motion-ease),border-color var(--motion-fast) ease}
.sidebar .nav-link:not(.active):hover{transform:translateX(4px)}
.sidebar .nav-link.active{transition:background-color var(--motion-mid) ease,box-shadow var(--motion-mid) ease}
.nav-count{transition:background var(--motion-fast) ease,transform var(--motion-mid) var(--motion-ease)}
.nav-link:hover .nav-count{transform:scale(1.07)}
.btn,.auth-primary,.studio-add-line,.studio-guided-footer button,.studio-template-card,.auth-business-choice,.auth-secondary{transition:transform var(--motion-mid) var(--motion-ease),box-shadow var(--motion-mid) var(--motion-ease),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease}
.btn:not(:disabled):active,.auth-primary:not(:disabled):active,.studio-add-line:active,.auth-business-choice:active{transform:scale(.975)}
.btn:not(:disabled):hover,.auth-primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(13,79,68,.16)}
.auth-secondary:hover{transform:translateY(-1px)}
input,textarea,select{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-mid) ease,background-color var(--motion-mid) ease}
input:not([type=checkbox]):focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(32,121,103,.13)}
.panel,.card,.studio-saved-card,.auth-business-choice,.studio-template-card,.profile-card{transition:border-color var(--motion-mid) ease,box-shadow var(--motion-mid) var(--motion-ease),transform var(--motion-mid) var(--motion-ease)}
.studio-saved-card:hover,.auth-business-choice:hover,.studio-template-card:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(13,65,56,.09)}
.studio-steps button,.studio-guided-nav button,.studio-filters button,.studio-view-switch button{transition:background var(--motion-mid) ease,border-color var(--motion-mid) ease,color var(--motion-fast) ease,transform var(--motion-mid) var(--motion-ease)}
.studio-guided-nav button:not([aria-current]):hover,.studio-filters button:hover{transform:translateY(-2px)}
.studio-guided-nav button[aria-current] span:first-child{animation:small-pop 400ms var(--motion-ease)}
details[open]>summary{transition:color var(--motion-fast) ease}
details>summary{cursor:pointer;transition:color var(--motion-fast) ease,transform var(--motion-fast) ease}
details>summary:hover{color:#176c5c}
/* Auth: alternate directions and low-key ambient backdrop */
.auth-showcase{animation:reveal-left 720ms var(--motion-ease) both}
.auth-showcase:after{animation:float-accent 13s ease-in-out infinite}
.auth-showcase h1{animation:reveal-up 760ms 140ms var(--motion-ease) both}
.auth-showcase p{animation:reveal-up 760ms 230ms var(--motion-ease) both}
.auth-points{animation:reveal-up 650ms 290ms var(--motion-ease) both}
.auth-points span{transition:transform var(--motion-mid) var(--motion-ease),background var(--motion-mid) ease}
.auth-points span:hover{transform:translateY(-3px);background:rgba(255,255,255,.1)}
.auth-card{animation:reveal-up 610ms 90ms var(--motion-ease) both;box-shadow:0 32px 65px rgba(12,51,45,.08)}
.auth-business-choice:hover .auth-business-icon{animation:small-pop 320ms var(--motion-ease)}
.auth-password-wrap{position:relative;display:flex;align-items:center}
.auth-password-wrap input{padding-right:78px}
.auth-password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);min-width:60px;min-height:34px;padding:6px 10px;border:1px solid transparent;border-radius:8px;background:#eaf3ef;color:#145c51;font:700 11px 'Manrope',sans-serif;cursor:pointer;transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease}
.auth-password-toggle:hover{background:#dcefe5;border-color:#bddbd0}
.auth-password-toggle:focus-visible{outline:2px solid #167e6f;outline-offset:2px}
.auth-otp{margin:14px 0;gap:8px}
.auth-otp small{font-size:11px;line-height:1.6;color:#658078}
.auth-otp input{letter-spacing:.22em;font-size:18px;font-variant-numeric:tabular-nums}
/* International invoice details */
.international-tax-panel{margin:22px 0 16px;padding:20px;border-radius:18px;border:1px solid #d8e8e1;background:linear-gradient(135deg,#f6fbf8,#fff);animation:reveal-up 430ms var(--motion-ease) both}
.international-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:11px;font-size:14px;color:#174e42}
.international-chip{padding:6px 10px;border-radius:99px;background:#deefe6;color:#0d5b4e;text-transform:uppercase;letter-spacing:.065em;font-size:10px;font-weight:800}
.international-tax-panel>p{font-size:12px;line-height:1.65;color:#55726a;margin:0 0 18px}
.international-tax-panel>small{display:block;color:#6d837c;font-size:11px;line-height:1.5;margin-top:15px}
.international-alert{margin:14px 0!important;padding:12px 14px;border-radius:10px;background:#fff5e5;border:1px solid #f1d4a7;color:#845a20!important}
.invoice-tax-statement{border-left:3px solid var(--invoice-accent,#155f52);padding:8px 12px;margin:12px 0;background:#f2f8f5;color:#18493e}
.invoice-tax-statement small{display:block;font-size:9px;letter-spacing:.09em;margin-bottom:3px}
.invoice-tax-statement p{font-size:11px;line-height:1.5;margin:0}
/* Layers should arrive in front of the app and remain legible */
.modal-layer:not([hidden]) .modal{animation:reveal-soft 290ms var(--motion-ease) both}
#toast:not(:empty){animation:toast-in 350ms var(--motion-ease) both}
.auth-error:not(:empty),.studio-step-warning{box-shadow:0 8px 25px rgba(151,42,34,.08)}
@media(max-width:700px){.auth-showcase:after{width:250px;height:250px;right:-90px;bottom:-95px}.international-tax-panel{padding:15px;border-radius:14px}.auth-card{animation-duration:390ms}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;box-shadow:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;transform:none!important}}