:root {
  --saif-green-950:#0d2b21;
  --saif-green-900:#143f30;
  --saif-green-800:#1d5541;
  --saif-gold-500:#c69a46;
  --saif-gold-300:#e2c47e;
  --saif-cream:#fffdf7;
  --saif-focus:rgba(198,154,70,.38);
  --saif-shadow-sm:0 5px 16px rgba(13,43,33,.08);
  --saif-shadow-md:0 14px 36px rgba(13,43,33,.13);
  --saif-radius:12px;
}

/* A single, consistent interaction language across the authenticated app. */
:where(button,[role="button"],a[href],input,select,textarea){-webkit-tap-highlight-color:transparent}
:where(button,[role="button"],a[href]){transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,opacity .18s ease}
:where(button,[role="button"],a[href]):focus-visible,
:where(input,select,textarea):focus-visible{outline:3px solid var(--saif-focus)!important;outline-offset:2px!important}
:where(input,select,textarea):focus{border-color:var(--saif-gold-500)!important;box-shadow:0 0 0 3px rgba(198,154,70,.12)!important}
:where(button,[role="button"]):active:not(:disabled){transform:translateY(0) scale(.985)}
:where(button,[role="button"]):disabled,
:where(button,[role="button"])[aria-disabled="true"]{cursor:not-allowed!important;opacity:.58!important;transform:none!important;box-shadow:none!important}

@media (hover:hover) {
  :where(.btn,.new,.action,.tab,.nav,.logout-btn,.internal-back,.expense-trigger,.support-ticket-row):hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--saif-shadow-sm)}
  :where(.btn,.new):hover:not(:disabled){filter:saturate(1.08) brightness(1.035)}
  :where(.action,.tab,.internal-back):hover:not(:disabled){border-color:rgba(198,154,70,.68)!important;color:var(--saif-green-900)}
  :where(.card,.stat,.product,.finance-card,.public-profit-result,.public-demo-stat,.support-list):hover{border-color:rgba(198,154,70,.38);box-shadow:var(--saif-shadow-md);transform:translateY(-3px)}
  tbody tr:hover td{background:#fbf8ef}
}

:where(.card,.stat,.product,.finance-card,.public-profit-result,.public-demo-stat,.support-list){transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.action.delete:hover,.btn.danger:hover,.danger:hover{box-shadow:0 7px 18px rgba(186,83,77,.18)!important}
.nav{position:relative;isolation:isolate}
.nav::after{content:"";position:absolute;inset-inline-start:9px;bottom:5px;width:0;height:2px;border-radius:9px;background:var(--saif-gold-300);transition:width .18s ease}
.nav:hover::after,.nav.active::after{width:calc(100% - 18px)}
.nav i{display:grid!important;place-items:center;width:22px!important;height:22px;flex:0 0 22px}
.nav i svg,.mobile-menu svg,.saif-button-icon svg,.close-modal svg,.public-demo-close svg{display:block;width:100%;height:100%}
.nav[aria-current="page"]{color:#fff}

.saif-button-icon{display:inline-grid;place-items:center;width:16px;height:16px;flex:0 0 16px;margin-inline-end:6px;color:currentColor}
.btn .saif-button-icon{width:17px;height:17px;flex-basis:17px}
.close-modal,.public-demo-close{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border-radius:10px!important}
.close-modal svg,.public-demo-close svg{width:19px;height:19px}
.product-pic .saif-product-placeholder{width:28px;height:28px}
.mobile-menu{place-items:center}.mobile-menu svg{width:21px;height:21px}

/* Clear feedback for long-running actions. */
.is-pending,[aria-busy="true"]{position:relative;pointer-events:none}
button.is-pending,button[aria-busy="true"]{padding-inline-end:40px!important}
button.is-pending::after,button[aria-busy="true"]::after{content:"";position:absolute;inset-inline-end:14px;top:50%;width:14px;height:14px;margin-top:-8px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:saif-spin .7s linear infinite}
@keyframes saif-spin{to{transform:rotate(360deg)}}

/* Accessible, reusable dialogs replace browser alerts and prompts. */
.saif-dialog-layer{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:rgba(6,30,22,.68);backdrop-filter:blur(7px);animation:saif-fade .16s ease}
.saif-dialog{width:min(460px,100%);max-height:min(680px,90dvh);overflow:auto;background:var(--saif-cream);color:var(--text,#19352b);border:1px solid rgba(198,154,70,.34);border-radius:20px;padding:24px;box-shadow:0 28px 80px rgba(4,26,18,.32);animation:saif-dialog-in .2s ease}
.saif-dialog__eyebrow{display:block;color:#9a742f;font-size:11px;font-weight:700;letter-spacing:.02em;margin-bottom:8px}
.saif-dialog h2{margin:0;font-size:21px;line-height:1.45;color:var(--saif-green-900)}
.saif-dialog p{margin:10px 0 0;color:#66756e;line-height:1.8;white-space:pre-line}
.saif-dialog label{display:grid;gap:7px;margin-top:17px;color:#52645b;font-size:12px;font-weight:700}
.saif-dialog input,.saif-dialog textarea{width:100%;min-height:46px;border:1px solid #d8ded9;border-radius:11px;background:#fff;padding:11px 13px;color:var(--saif-green-950);font:inherit}
.saif-dialog textarea{min-height:100px;resize:vertical}
.saif-dialog__error{min-height:18px;margin-top:8px!important;color:#b23e37!important;font-size:12px}
.saif-dialog__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.saif-dialog__actions button{min-width:112px;min-height:44px;border-radius:10px;border:1px solid #d7ddd8;background:#fff;color:var(--saif-green-900);font:inherit;font-weight:700;cursor:pointer;padding:9px 15px}
.saif-dialog__actions .saif-dialog__primary{border-color:var(--saif-green-900);background:var(--saif-green-900);color:#fff}
.saif-dialog--danger .saif-dialog__primary{border-color:#a83f39;background:#a83f39}
@media (hover:hover){.saif-dialog__actions button:hover{transform:translateY(-2px);box-shadow:var(--saif-shadow-sm)}.saif-dialog__actions .saif-dialog__primary:hover{background:var(--saif-green-800)}}
@keyframes saif-fade{from{opacity:0}}
@keyframes saif-dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* Existing modal foundations receive the same focus and spacing treatment. */
#modal-backdrop,.public-demo-modal,.public-profit-modal{backdrop-filter:blur(5px)}
#modal,.public-demo-box,.public-profit-box,.forgot-password-dialog{box-shadow:0 24px 70px rgba(7,35,26,.24)!important}
#modal :where(input,select,textarea),.support-page :where(input,select,textarea){min-height:44px}
.auth-error:empty,#account-settings-error:empty,#support-form-error:empty{display:none}
.auth-error:not(:empty),#account-settings-error:not(:empty),#support-form-error:not(:empty){border-radius:9px;padding:9px 11px;background:#fff3f1;color:#a43d36}
#account-settings-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;align-items:start}
#account-settings-form .field:has([name="logoFile"]),#account-settings-form .actions,#account-settings-error{grid-column:1/-1}
#account-settings-form input[type="file"]{padding:7px;background:#fbfcfa}
#account-logo-preview{display:block;width:120px;height:80px;object-fit:contain;margin-top:10px;padding:8px;border:1px solid var(--line,#e1e7e1);border-radius:10px;background:#fff;box-shadow:var(--saif-shadow-sm)}
#account-logo-preview[hidden]{display:block!important;visibility:hidden}
#account-settings-form .actions{justify-content:flex-start;margin-top:2px}
#account-settings-form .actions .btn{min-width:160px}

@media (max-width:700px){
  :where(button,.btn,.action,.tab,.nav,[role="button"]){min-height:44px}
  .actions{width:100%}.actions>.btn{flex:1 1 150px}
  .card,.form{border-radius:14px}
  .scroll{margin-inline:-2px;padding-bottom:4px}
  .saif-dialog{padding:20px;border-radius:17px}
  #account-settings-form{grid-template-columns:1fr;gap:14px}
  #account-settings-form .field:has([name="logoFile"]),#account-settings-form .actions,#account-settings-error{grid-column:auto}
  .saif-dialog__actions{display:grid;grid-template-columns:1fr 1fr}
  .saif-dialog__actions button{min-width:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  :where(button,[role="button"],.card,.stat,.product):hover{transform:none!important}
}