
:root{
  --bg:#f3f6f5;--card:#ffffff;--ink:#18312c;--muted:#6c7c78;--line:#dfe8e5;
  --brand:#0d5b4d;--brand-2:#174b41;--brand-soft:#e8f3f0;--accent:#c58c2b;
  --danger:#b43b3b;--warn:#a46c13;--shadow:0 12px 34px rgba(20,55,47,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(340px,1.05fr) minmax(380px,.95fr)}
.auth-brand{background:linear-gradient(145deg,#0b3d34,#0d5b4d 70%,#1d7565);color:#fff;padding:8vw;display:flex;flex-direction:column;justify-content:center}
.auth-brand h1{font-size:clamp(2.2rem,4vw,4.5rem);line-height:1.02;margin:24px 0 14px;max-width:780px}
.auth-brand p{font-size:1.15rem;opacity:.82;margin:0}
.brand-mark{display:grid;place-items:center;width:86px;height:86px;border-radius:22px;background:#fff;color:var(--brand);font-weight:900;letter-spacing:.08em;box-shadow:0 16px 36px rgba(0,0,0,.15)}
.brand-mark.small{width:46px;height:46px;border-radius:12px;font-size:.8rem;box-shadow:none}
.auth-feature-list{display:grid;gap:10px;margin-top:42px;max-width:560px}
.auth-feature-list span{padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.07)}
.auth-card{display:grid;place-items:center;padding:40px;background:#f7faf9}
.auth-panel{width:min(100%,500px);background:#fff;padding:38px;border-radius:22px;box-shadow:var(--shadow)}
.auth-panel h2{font-size:2rem;margin:8px 0 8px}
.auth-panel p{color:var(--muted);line-height:1.6}
.auth-panel label,.dialog-card label,.form-card label,.card form label{display:grid;gap:7px;font-weight:650;color:#31524b;margin:16px 0}
.auth-panel input,.dialog-card input,.dialog-card select,.form-card input,.form-card select,.form-card textarea,.card input,.card select,.card textarea{
  width:100%;border:1px solid #cfdeda;background:#fff;border-radius:10px;padding:11px 12px;color:var(--ink);outline:none;transition:.15s
}
input:focus,select:focus,textarea:focus{border-color:#5a9b8d;box-shadow:0 0 0 3px rgba(13,91,77,.10)}
input[readonly]{background:#f4f7f6;color:#54716a}
textarea{resize:vertical}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;font-weight:800;color:#6f9088}
.btn{border:0;border-radius:10px;padding:10px 15px;font-weight:750;transition:.15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand);color:#fff}
.btn.secondary{background:var(--brand-soft);color:var(--brand)}
.btn.ghost{background:#f4f7f6;color:#45635c}
.btn.wide{width:100%}
.link-btn{background:transparent;border:0;color:var(--brand);font-weight:750;padding:3px}
.danger-text{color:var(--danger)}
.form-note{font-size:.85rem}
.steps{padding-left:22px;color:#4e6a64;line-height:1.7}
.status-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.3rem}
.status-icon.warn{background:#fff1d4;color:var(--warn)}
.spinner{width:42px;height:42px;border:4px solid #d8e8e4;border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.app-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:#103e36;color:#e9f6f2;padding:18px 14px;display:flex;flex-direction:column}
.side-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 24px}
.side-brand strong{display:block}
.side-brand span{display:block;font-size:.8rem;opacity:.68;margin-top:2px}
.sidebar nav{display:grid;gap:5px}
.nav-btn{border:0;background:transparent;color:#cce1dc;padding:11px 12px;border-radius:10px;text-align:left;font-weight:700;display:flex;gap:10px;align-items:center}
.nav-btn:hover,.nav-btn.active{background:rgba(255,255,255,.11);color:#fff}
.side-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.13);padding:16px 8px 4px;display:grid;gap:8px}
.side-footer .link-btn{color:#d6ebe6;text-align:left}
.side-footer .danger-text{color:#ffb5b5}
.user-badge{font-size:.9rem}
.user-badge strong{display:block;color:#fff}
.user-badge span{opacity:.7;font-size:.78rem}

.main-area{min-width:0}
.topbar{height:86px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:14px 28px;position:sticky;top:0;z-index:10}
.topbar h2{margin:2px 0 0;font-size:1.55rem}
.top-actions{display:flex;gap:8px;align-items:center}
.content{padding:24px;max-width:1700px;margin:auto}
.view{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 20px rgba(19,57,49,.04);padding:20px}
.card.compact{padding:14px 16px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.card-head.wrap{flex-wrap:wrap}
.card-head h3{margin:0 0 4px;font-size:1.1rem}
.card-head p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 3px 16px rgba(0,0,0,.03)}
.kpi span{display:block;color:#668078;font-size:.82rem;font-weight:700}
.kpi strong{display:block;font-size:1.65rem;margin:8px 0 4px}
.kpi small{color:#8b9c97}
.grid-2{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}
.grid-admin{display:grid;grid-template-columns:390px 1fr;gap:16px}
.filter-bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.filter-bar label{display:grid;gap:5px;color:#57736c;font-size:.8rem;font-weight:750;min-width:140px}
.filter-bar input,.filter-bar select{border:1px solid #d0dfdb;border-radius:9px;padding:9px 10px;background:#fff}
.filter-bar .grow{flex:1;min-width:220px}
.no-card{padding:0;margin:8px 0 16px}
.table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:11px}
.table-wrap.tall{max-height:650px}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:10px 11px;border-bottom:1px solid #e8efed;text-align:left;vertical-align:top}
th{position:sticky;top:0;background:#f7faf9;color:#57736c;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;z-index:1}
td.num,th.num{text-align:right}
tbody tr:hover{background:#fbfdfc}
tfoot td{font-weight:800;background:#f7faf9}
.empty-row{text-align:center;color:#8a9a96;padding:28px}
.rule-list{display:grid;gap:12px}
.rule-list div{padding:12px;border:1px solid var(--line);border-radius:10px;background:#fbfdfc}
.rule-list strong{display:block;margin-bottom:4px}
.rule-list span{font-size:.88rem;color:var(--muted);line-height:1.45}

.form-card{padding:24px}
.section-title{margin:22px 0 8px;padding-top:14px;border-top:1px solid var(--line);font-weight:850;color:#365b52}
.form-grid{display:grid;gap:12px}
.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-grid label{margin:0}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
label em{color:var(--danger);font-style:normal}
.field-hint{min-height:17px;color:var(--muted);font-weight:600}
.field-hint.error{color:var(--danger)}
.field-hint.ok{color:var(--brand)}
.calc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:14px}
.calc-grid div{padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fbfa}
.calc-grid span{display:block;color:#6f8580;font-size:.75rem;font-weight:700}
.calc-grid strong{display:block;margin-top:5px;font-size:1rem}
.calc-grid .primary-calc{background:var(--brand);color:#fff;border-color:var(--brand)}
.calc-grid .primary-calc span{color:#d5ece7}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.switch-row{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px}
.switch-row input{width:auto!important}
.small-search{max-width:240px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:#fff;color:#55716a;padding:9px 13px;border-radius:10px;font-weight:800}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

.cash-grid{grid-template-columns:1fr 1fr}
.cash-sections{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.cash-sections>div{border:1px solid var(--line);border-radius:12px;padding:12px}
.cash-sections h4{margin:0 0 10px}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-line{display:grid;grid-template-columns:1fr 90px;align-items:center;gap:6px}
.mini-line span{font-size:.82rem;color:#5d7670}
.mini-line input{padding:7px 8px!important}
.cash-total-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.cash-total-row div{background:#edf6f3;border-radius:10px;padding:12px}
.cash-total-row span{font-size:.8rem;color:#58746d;display:block}
.cash-total-row strong{font-size:1.2rem;display:block;margin-top:4px}

.badge{display:inline-block;padding:4px 7px;border-radius:999px;font-size:.72rem;font-weight:800}
.badge.green{background:#e5f3ee;color:#16644f}
.badge.gray{background:#edf0ef;color:#677570}
.badge.gold{background:#fff2d6;color:#8d6416}
.row-actions{display:flex;gap:5px}
.icon-btn{border:0;background:#edf5f2;color:#22584c;border-radius:8px;padding:6px 8px;font-weight:800}
.icon-btn.danger{background:#faeaea;color:#9a3838}

.toast-wrap{position:fixed;right:18px;top:18px;z-index:1000;display:grid;gap:8px;max-width:380px}
.toast{background:#173e36;color:#fff;padding:12px 14px;border-radius:11px;box-shadow:var(--shadow);animation:toastin .18s ease-out}
.toast.error{background:#8f3434}
.toast.warn{background:#86611d}
@keyframes toastin{from{transform:translateY(-5px);opacity:0}}

dialog{border:0;border-radius:18px;padding:0;box-shadow:0 25px 70px rgba(0,0,0,.25);max-width:min(94vw,520px)}
dialog::backdrop{background:rgba(9,30,25,.45)}
.dialog-card{padding:24px;min-width:min(90vw,460px)}
.wide-dialog{min-width:min(92vw,720px)}
.mobile-only{display:none}

@media(max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2,.cash-grid{grid-template-columns:1fr}
  .grid-admin{grid-template-columns:1fr}
  .form-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .calc-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{padding:44px 28px}
  .auth-brand h1{font-size:2.5rem}
  .auth-card{padding:22px}
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-280px;z-index:50;width:260px;transition:.2s;box-shadow:10px 0 30px rgba(0,0,0,.2)}
  .sidebar.open{left:0}
  .mobile-only{display:inline-block}
  .topbar{padding:12px 16px}
  .content{padding:14px}
  .top-actions .secondary{display:none}
  .form-grid.cols-3,.form-grid.cols-4,.form-grid.cols-2{grid-template-columns:1fr}
  .span-2,.span-3{grid-column:auto}
  .calc-grid{grid-template-columns:repeat(2,1fr)}
  .cash-sections{grid-template-columns:1fr}
}
@media(max-width:520px){
  .kpi-grid{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:1fr}
  .top-actions .primary{display:none}
}

/* ---------- v2 visual refresh ---------- */
:root{
  --bg:#f4f7f5;
  --card:#ffffff;
  --ink:#132a25;
  --muted:#6a7f79;
  --line:#dce7e3;
  --brand:#0b6755;
  --brand-2:#08483d;
  --brand-3:#16836d;
  --brand-soft:#e8f4f0;
  --accent:#c89948;
  --accent-soft:#fbf3e3;
  --danger:#b34242;
  --warn:#9c6919;
  --shadow:0 12px 32px rgba(14,52,44,.075);
  --shadow-lg:0 24px 64px rgba(8,45,37,.14);
  --radius:18px;
}
body{background:
  radial-gradient(circle at 88% 0%,rgba(11,103,85,.055),transparent 28rem),
  linear-gradient(180deg,#f7faf8 0,#f3f6f5 100%);}

.auth-brand{position:relative;overflow:hidden;background:linear-gradient(145deg,#073f35 0%,#0a5e4e 56%,#157b67 100%)}
.auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.auth-brand::before{width:420px;height:420px;right:-170px;top:-130px;background:rgba(255,255,255,.055)}
.auth-brand::after{width:280px;height:280px;left:-100px;bottom:-105px;border:1px solid rgba(255,255,255,.12)}
.auth-brand>*{position:relative;z-index:1}
.brand-mark{border:1px solid rgba(255,255,255,.42);box-shadow:0 18px 45px rgba(0,0,0,.18)}
.auth-feature-list span{backdrop-filter:blur(4px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.075)}
.auth-card{background:linear-gradient(135deg,#f8fbfa,#edf4f1)}
.auth-panel{border:1px solid rgba(11,103,85,.09);box-shadow:var(--shadow-lg);border-radius:26px}

.app-shell{grid-template-columns:272px minmax(0,1fr)}
.sidebar{width:272px;padding:20px 14px 16px;background:linear-gradient(180deg,#083f35 0%,#0a5144 58%,#073b32 100%);box-shadow:12px 0 36px rgba(8,54,45,.09);border-right:1px solid rgba(255,255,255,.055)}
.side-brand{padding:6px 10px 27px}
.side-brand .brand-mark.small{background:linear-gradient(145deg,#fff,#eef8f5);color:#075444}
.side-brand strong{font-size:1.02rem;letter-spacing:.01em}
.side-brand span{opacity:.72}
.sidebar nav{gap:6px}
.nav-btn{position:relative;padding:12px 13px;border-radius:12px;color:#cbe2dc;font-weight:720;transition:background .16s ease,color .16s ease,transform .16s ease}
.nav-btn span{width:22px;text-align:center;font-weight:900;opacity:.82}
.nav-btn:hover{background:rgba(255,255,255,.08);transform:translateX(2px)}
.nav-btn.active{background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.085));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.nav-btn.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:#e6bd72}
.side-footer{border-top-color:rgba(255,255,255,.12);padding-top:18px}

.topbar{height:88px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(188,210,203,.75);box-shadow:0 3px 14px rgba(23,62,53,.025)}
.topbar h2{font-size:1.62rem;letter-spacing:-.025em}
.eyebrow{color:#789089;font-size:.71rem;letter-spacing:.14em}
.content{padding:28px 30px 40px;max-width:1760px}

.card{border-color:#dce7e3;border-radius:20px;box-shadow:0 8px 28px rgba(19,57,49,.052);padding:22px;transition:box-shadow .18s ease,border-color .18s ease}
.card:hover{border-color:#d2e1dc;box-shadow:0 10px 32px rgba(19,57,49,.065)}
.card-head{margin-bottom:20px}
.card-head h3{font-size:1.14rem;letter-spacing:-.01em}
.kpi-grid{gap:16px;margin:18px 0}
.kpi{position:relative;overflow:hidden;border-radius:18px;border-color:#dfe9e6;padding:20px;box-shadow:0 7px 24px rgba(15,57,48,.048)}
.kpi::after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;right:-30px;top:-30px;background:rgba(11,103,85,.055)}
.kpi strong{font-size:1.72rem;letter-spacing:-.02em;color:#123b32}

.btn{border-radius:11px;padding:10px 16px;font-weight:760;box-shadow:none}
.btn.primary{background:linear-gradient(135deg,var(--brand),#0c735f);box-shadow:0 7px 16px rgba(11,103,85,.16)}
.btn.primary:hover{box-shadow:0 9px 22px rgba(11,103,85,.22)}
.btn.secondary{background:#e9f5f1;color:#075c4c;border:1px solid #d8ebe5}
.btn.ghost{background:#f5f8f7;border:1px solid #e2ebe8;color:#435f58}
.link-btn{color:#0a6b58}

.auth-panel input,.dialog-card input,.dialog-card select,.form-card input,.form-card select,.form-card textarea,.card input,.card select,.card textarea{
  border-color:#ccdcd7;border-radius:11px;padding:11px 12px;background:#fff;box-shadow:0 1px 0 rgba(10,60,50,.02)
}
input:focus,select:focus,textarea:focus{border-color:#64a999;box-shadow:0 0 0 4px rgba(11,103,85,.09)}
input[readonly]{background:#f4f8f6;border-color:#dbe6e2;color:#54726a}
label small{font-weight:550;color:#82928e;line-height:1.35}
.section-title{margin-top:26px;padding-top:17px;font-size:.96rem;color:#315d52}

.filter-bar{background:#fff;border:1px solid #e0e9e6;padding:14px;border-radius:15px;box-shadow:0 5px 18px rgba(20,55,47,.035)}
.filter-bar input,.filter-bar select{border-color:#d4e1dd;border-radius:10px}
.table-wrap{border-color:#dce6e3;border-radius:14px;background:#fff}
th,td{padding:11px 12px}
th{background:#f4f8f6;color:#57746c;border-bottom:1px solid #dbe6e2}
tbody tr:nth-child(even){background:#fcfdfd}
tbody tr:hover{background:#f4faf7}
.icon-btn{border:1px solid #dbe9e4;background:#edf6f3;color:#145c4e;border-radius:9px}
.icon-btn:hover{background:#e4f1ed}
.icon-btn.danger{border-color:#f1d9d9;background:#faeeee;color:#a13f3f}
.badge{padding:5px 8px}
.badge.green{background:#e1f3ec;color:#11634e}
.badge.gold{background:#fbf0d8;color:#8a6118}

.tabs{padding:5px;border:1px solid #dce7e3;border-radius:13px;background:#f5f8f7;width:max-content;max-width:100%}
.tab{border:0;background:transparent;padding:9px 14px}
.tab.active{background:#fff;color:#0a6755;box-shadow:0 3px 10px rgba(20,55,47,.08);border:1px solid #d8e5e0}

.page-note{margin-bottom:16px;padding:15px 18px;border:1px solid #d9e8e3;border-radius:16px;background:linear-gradient(120deg,#eef8f5,#f8fbfa);box-shadow:0 5px 18px rgba(20,55,47,.035)}
.page-note strong{display:block;color:#164f42;margin-bottom:4px}
.page-note span{display:block;color:#647c75;line-height:1.5;font-size:.9rem}

.fsa-grid{grid-template-columns:minmax(330px,.76fr) minmax(0,1.24fr)}
.fsa-transaction{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:18px;align-items:center;margin:18px 0 3px;padding:17px 18px;border:1px solid #d4e7e0;border-radius:16px;background:linear-gradient(135deg,#eef8f5,#fbfdfc);box-shadow:inset 4px 0 0 #199177}
.fsa-transaction.missing-rate{border-color:#ead6aa;background:linear-gradient(135deg,#fff9ed,#fffdf8);box-shadow:inset 4px 0 0 #c89135}
.fsa-copy h4{margin:7px 0 4px;font-size:1.03rem}
.fsa-copy p{margin:0;color:#667d76;font-size:.87rem;line-height:1.48}
.soft-badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:#dff1eb;color:#0b6956;font-size:.71rem;font-weight:850;text-transform:uppercase;letter-spacing:.055em}
.fsa-switch{display:flex!important;align-items:center!important;gap:11px!important;margin:0!important;padding:11px 12px;border:1px solid #d9e8e3;border-radius:12px;background:#fff}
.fsa-switch input{width:18px!important;height:18px!important;accent-color:var(--brand)}
.fsa-switch span{display:block}
.fsa-switch strong{display:block;color:#234b41;font-size:.89rem}
.fsa-switch small{display:block;margin-top:2px;font-size:.76rem;color:#7c8f89;line-height:1.35}
.fsa-preview{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(140px,1fr)) auto;gap:10px;padding-top:3px}
.fsa-preview>div{padding:11px 13px;border:1px solid #dce8e4;border-radius:11px;background:#fff}
.fsa-preview span{display:block;color:#738982;font-size:.74rem;font-weight:720}
.fsa-preview strong{display:block;margin-top:4px;color:#153e34}
.fsa-preview .btn{align-self:stretch}

.cash-sections.single{grid-template-columns:1fr}
.cash-sections.single>div{padding:15px;border-color:#dbe7e3;background:#fbfdfc}
.section-mini-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-mini-head h4{margin:0}
.section-mini-head span{font-size:.76rem;color:#80928d}
.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
.mini-line{grid-template-columns:minmax(0,1fr) 88px;padding:8px 9px;border:1px solid #e2ebe8;border-radius:10px;background:#fff}
.mini-line span{font-size:.8rem}
.mini-line input{border:0!important;background:#f3f7f5!important;text-align:right;padding:7px 8px!important}
.payment-counts{margin:14px 0 16px}
.recon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 0 12px}
.recon-grid>div{padding:13px;border:1px solid #dce7e3;border-radius:12px;background:#f8fbfa}
.recon-grid span{display:block;color:#71857f;font-size:.75rem;font-weight:730}
.recon-grid strong{display:block;margin-top:5px;font-size:1.05rem;color:#173e35}
.recon-grid .emphasis{background:linear-gradient(135deg,#0b6755,#0d7661);border-color:#0b6755}
.recon-grid .emphasis span{color:#cfe8e1}
.recon-grid .emphasis strong{color:#fff}
#cashDifferenceCard.balanced{background:#e7f5ee;border-color:#c4e7d8}
#cashDifferenceCard.balanced strong{color:#17634f}
#cashDifferenceCard.over{background:#fff6e4;border-color:#ecd6aa}
#cashDifferenceCard.over strong{color:#8b6117}
#cashDifferenceCard.short{background:#fcecec;border-color:#efd0d0}
#cashDifferenceCard.short strong{color:#a23d3d}

.calc-grid{gap:11px}
.calc-grid div{border-radius:12px;background:#f7faf9}
.calc-grid .primary-calc{background:linear-gradient(135deg,#0a604f,#0d7561)}

.toast{border-radius:13px;box-shadow:0 16px 36px rgba(7,43,36,.18)}
dialog{border-radius:22px;box-shadow:0 28px 74px rgba(0,0,0,.27)}

@media(max-width:1250px){
  .fsa-grid{grid-template-columns:1fr}
  .fsa-transaction{grid-template-columns:1fr}
  .fsa-preview{grid-column:auto}
}
@media(max-width:800px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{width:272px;left:-292px}
  .content{padding:16px 14px 28px}
  .topbar{height:78px}
  .page-note{padding:14px}
  .fsa-preview{grid-template-columns:1fr 1fr}
  .fsa-preview .btn{grid-column:1/-1}
  .recon-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .mini-grid,.recon-grid,.fsa-preview{grid-template-columns:1fr}
  .fsa-preview .btn{grid-column:auto}
  .card{padding:17px}
}
