/* Material 3 Expressive adaptation across FMS. Existing data and control behavior are unchanged. */
body.app-expressive{--bg:#f3f6f0;--card:#fcfdf7;--ink:#18251e;--muted:#516358;--line:#d9e2d6;--primary:#166746;--primary2:#397f60;--shadow:none;--md-primary-container:#c7efce;--md-secondary-container:#dce5d8;--md-tertiary-container:#e7dff8;--md-error-container:#ffdad6;--md-motion:cubic-bezier(.2,.8,.2,1);background:var(--bg);line-height:1.6}
.app-expressive .topbar{background:#f3f6f0;border:0;height:76px;box-shadow:none;padding:0 28px}.app-expressive .role-badge{background:#c7efce;color:#124e35}.app-expressive .user-menu a{border-radius:24px;background:#e5ebe1;padding:10px 18px;color:#374e40}.app-expressive .sidebar{top:76px;background:var(--bg);padding:12px 12px 24px;border-right:1px solid #e0e7db;overflow-y:auto}.app-expressive .sidebar a{color:#43564a;border-radius:28px;min-height:48px;padding:12px 16px;transition:background 180ms var(--md-motion),border-radius 180ms var(--md-motion)}.app-expressive .sidebar a.active{background:#c7efce;color:#123e28;border-radius:18px;font-weight:800}.app-expressive .sidebar a:hover{background:#e0e9da;color:#18251e}.app-expressive .content{padding-top:104px;max-width:1800px}.app-expressive .page-head{align-items:center;gap:20px;margin-bottom:24px}.app-expressive .page-head h1{font-size:clamp(30px,3vw,44px);line-height:1.2;letter-spacing:-.8px;font-weight:850}.app-expressive .eyebrow{font-size:12px;letter-spacing:.5px;margin-bottom:8px}.app-expressive .period-control{background:#e5ebdf;border:0;border-radius:30px;padding:5px;gap:4px}.app-expressive .period-month,.app-expressive .all-period{border:0;box-shadow:none;border-radius:24px;min-height:48px;color:#405345}.app-expressive .all-period.active,.app-expressive .period-month{background:#fff;color:#214c34}.app-expressive .period-control input{border:0;background:#fff;border-radius:24px;color:#214c34}.app-expressive .month-filter{width:auto}.app-expressive .expressive-intro{position:relative;isolation:isolate;overflow:hidden;background:#d8ebd4;border-radius:32px 32px 12px 32px;padding:26px 32px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:24px}.expressive-intro h2{font-size:24px;line-height:1.5;margin:0 0 4px;color:#143b24}.expressive-intro p{margin:0;max-width:650px;color:#355741}.expressive-intro-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}.app-expressive .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:24px;padding:12px 22px;font-size:14px;line-height:1.4;text-decoration:none;border:1px solid #788d7b;background:transparent;color:#244d33;transition:background 180ms var(--md-motion),border-radius 180ms var(--md-motion),transform 180ms var(--md-motion)}.app-expressive .btn.primary{background:#166746;color:#fff;border-color:transparent}.app-expressive .btn:hover{background:#dae8d5;border-radius:16px}.app-expressive .btn.primary:hover{background:#0c5236}.app-expressive .btn:active{transform:scale(.98)}.app-expressive .btn.mini{min-height:40px;padding:9px 16px}.app-expressive .panel{border:1px solid #e0e7db;border-radius:28px;background:#fcfdf7;padding:26px;margin-bottom:20px;box-shadow:none}.app-expressive .panel h2{font-size:20px;font-weight:750;line-height:1.5}.app-expressive .dashboard-range{background:#eaf0e4;border:0;border-radius:28px;padding:24px}.dashboard-range .range-caption{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:750;margin:0 0 16px}.app-expressive .dashboard-range .account-forms{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:16px}.app-expressive .dashboard-range .btn{background:#166746;color:white;border:0;min-height:56px}.app-expressive label{font-size:13px;color:#425849}.app-expressive input,.app-expressive select{background:#fcfdf7;border:1px solid #8a9c88;border-radius:16px;padding:14px 16px;min-height:52px;color:#18251e;font-size:15px}.app-expressive input[type=checkbox]{min-height:22px;width:22px;accent-color:#166746}.app-expressive :is(input,select):focus{border-color:#166746;box-shadow:0 0 0 3px #c7efce}.app-expressive :is(a,button,summary):focus-visible{outline:3px solid #256f49;outline-offset:4px}.app-expressive .cards{gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0}.app-expressive .metric{border:0;border-radius:28px;padding:24px;box-shadow:none;min-width:0;overflow:visible;transition:transform 200ms var(--md-motion)}.app-expressive .metric:before{display:none}.app-expressive .metric.green{background:#c7efce}.app-expressive .metric.red{background:#ffded7}.app-expressive .metric.blue{background:#dce5ff}.app-expressive .metric.amber{background:#ede0b9;border-radius:28px 12px 28px 28px}.app-expressive .metric span{color:#34463b;font-weight:700;font-size:14px}.app-expressive .metric strong{font-size:clamp(22px,2.05vw,34px);font-weight:850;letter-spacing:-.65px;line-height:1.4;margin:16px 0 10px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.app-expressive .metric small{display:block!important;color:#34463b;font-size:12px;line-height:1.7;margin-top:5px}.app-expressive .metric a{border-radius:12px}.app-expressive .metric>a:hover strong,.app-expressive .metric>a:focus-visible strong{color:#075235}.app-expressive .metric details{margin-top:16px;padding-top:12px;border-top:1px solid #52694830;font-size:12px}.app-expressive summary{cursor:pointer;color:#31553e;line-height:1.7;padding:6px 0;font-weight:650}.app-expressive details>p{margin:8px 0;line-height:1.8}.app-expressive .metric details p{font-weight:700;font-size:18px}.app-expressive .account-settings{background:#eaf0e4}.app-expressive .account-settings>summary{font-size:16px;padding:0}.app-expressive .account-settings[open]>summary{margin-bottom:20px}.app-expressive .account-settings .btn.warning{background:#ffdad6;color:#71362e;border:0}.app-expressive .table-wrap{border:1px solid #e0e7db;border-radius:18px;margin:0;overflow:auto}.app-expressive th{background:#eaf0e4;color:#405245;font-size:12px;padding:16px;text-transform:none;letter-spacing:0}.app-expressive td{padding:16px;border-color:#e0e7db}.app-expressive tr:last-child td{border-bottom:0}.app-expressive tbody tr:hover{background:#f0f5e9}.app-expressive .grid-2{gap:20px}.app-expressive .tag{padding:6px 12px}.app-expressive .icon-btn{min-width:40px;min-height:40px;border-radius:50%}.app-expressive #account-ledger,.app-expressive #entry-details{scroll-margin-top:96px}.app-expressive .panel p{max-width:100%;overflow-wrap:anywhere}
@media(min-width:1500px){.app-expressive .metric strong{font-size:34px}}
@media(max-width:1200px){.app-expressive .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.app-expressive .metric strong{font-size:30px}.app-expressive .expressive-intro{align-items:flex-start;flex-direction:column}.app-expressive .page-head{align-items:flex-start;flex-wrap:wrap}.app-expressive .dashboard-range .account-forms{grid-template-columns:1fr 1fr}.dashboard-range .account-forms>.btn{grid-column:1/-1}}
@media(max-width:720px){.app-expressive .topbar{height:64px;padding:0 14px}.app-expressive .sidebar{top:64px}.app-expressive .content{padding:86px 16px 32px;margin-left:0}.app-expressive.menu-open:after{top:64px}.app-expressive .page-head{gap:16px}.app-expressive .month-filter{width:100%}.app-expressive .period-control{flex-direction:row;flex-wrap:wrap;width:100%;align-items:center}.app-expressive .period-control>*{flex:1}.app-expressive .panel,.app-expressive .dashboard-range{padding:20px;border-radius:24px}.app-expressive .expressive-intro{padding:24px;border-radius:28px 28px 12px 28px}.expressive-intro h2{font-size:22px}.expressive-intro-actions{width:100%;flex-shrink:1}.expressive-intro-actions .btn{flex:1}.app-expressive .metric{padding:20px;border-radius:24px}.app-expressive .metric strong{font-size:26px}.app-expressive .cards{gap:12px}.app-expressive .grid-2{grid-template-columns:minmax(0,1fr)}.app-expressive .user-menu{gap:8px}.app-expressive .user-menu a{padding:8px 12px}}
@media(max-width:460px){.app-expressive .cards{grid-template-columns:minmax(0,1fr)}.app-expressive .metric strong{font-size:32px}.app-expressive .dashboard-range .account-forms{grid-template-columns:minmax(0,1fr)}.app-expressive .period-control{border-radius:22px}.app-expressive .period-control input{min-width:0;width:100%}.app-expressive .expressive-intro-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.app-expressive *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.app-expressive .expressive-intro,.app-expressive .dashboard-range,.app-expressive .account-settings{display:none}.app-expressive .metric,.app-expressive .panel{background:white;border:1px solid #999;break-inside:avoid}.app-expressive .content{padding:0;margin:0}.app-expressive .cards{grid-template-columns:repeat(2,1fr)}}

/* Shared page surfaces and interactions */
.app-expressive{--md-on-surface:#18251e;--md-surface-container:#fcfdf7;--md-outline:#788d7b;--md-error:#ae3f35;font-size:14px}
.app-expressive .content{width:auto;min-width:0;max-width:none;padding-right:clamp(18px,2.5vw,48px);padding-left:clamp(18px,2.5vw,48px)}
.app-expressive .page-head{min-width:0;flex-wrap:wrap;align-items:center}
.app-expressive .page-head>div{min-width:0}
.app-expressive .page-head h1{overflow-wrap:anywhere}
.app-expressive .eyebrow{text-transform:none;color:#36634a}
.app-expressive .month-filter{min-width:0;flex-wrap:wrap}
.app-expressive .filter-label{color:#3f5949;font-size:13px}
.app-expressive .period-control{display:flex;align-items:center;flex-wrap:wrap;min-width:0}
.app-expressive .period-control input{width:auto;min-width:180px;margin:0;min-height:48px}
.app-expressive .period-control a{font-weight:700}
.app-expressive .panel{min-width:0}
.app-expressive .panel-head{gap:14px;flex-wrap:wrap}
.app-expressive .panel-head>div{min-width:0}
.app-expressive .panel h2,.app-expressive .panel-head h2{color:#20382a}
.app-expressive .panel h3{color:#264332}
.app-expressive a{color:#185d3d}
.app-expressive .sidebar a{display:flex;align-items:center;gap:12px}
.app-expressive .sidebar a .svg-icon{flex:none}
.app-expressive .sidebar nav{padding-bottom:20px}
.app-expressive .metric{min-width:0}
.app-expressive .metric strong{overflow-wrap:anywhere}
.app-expressive .metric.green{color:#186c38}
.app-expressive .metric.red{color:#a5372c}
.app-expressive .metric.blue{color:#315ca8}
.app-expressive .metric.amber{color:#79510a}
.app-expressive .metric small{overflow-wrap:anywhere}
.app-expressive .metric a{text-decoration:none}
.app-expressive .form-grid,.app-expressive .grid-2,.app-expressive .grid-form-table{min-width:0}
.app-expressive label{line-height:1.5;font-weight:700}
.app-expressive :is(input,select,textarea){font:inherit}
.app-expressive textarea{width:100%;max-width:100%;min-height:96px;background:#fcfdf7;border:1px solid #8a9c88;border-radius:16px;padding:14px 16px;color:#18251e}
.app-expressive :is(input,select,textarea):disabled{opacity:.58;cursor:not-allowed}
.app-expressive :is(input,select,textarea):focus-visible{outline:3px solid #84c8a0;outline-offset:2px}
.app-expressive :is(input[type=checkbox],input[type=radio]){width:22px;height:22px;min-height:22px;padding:0;margin:0;flex:none;border-radius:6px;accent-color:#166746}
.app-expressive input[type=file]{padding:12px;max-width:100%;height:auto}
.app-expressive input[type=file]::file-selector-button{border:0;border-radius:16px;background:#dce5d8;color:#284c34;font:inherit;font-weight:700;padding:10px 14px;margin-right:12px;cursor:pointer}
.app-expressive input[type=number]{font-variant-numeric:tabular-nums}
.app-expressive .btn.warning{background:#ffdad6;border-color:transparent;color:#71362e}
.app-expressive .btn.warning:hover{background:#f7c8c0}
.app-expressive .btn:disabled,.app-expressive button[disabled]{cursor:progress;opacity:.55;transform:none}
.app-expressive .icon-btn{border-radius:50%;width:42px;height:42px;min-height:42px;background:#ffdad6;color:#913a32}
.app-expressive .icon-btn:hover{background:#f6beb7}
.app-expressive .row-actions{align-items:center;flex-wrap:wrap}
.app-expressive .tag,.app-expressive .paid-label,.app-expressive .role-badge,.app-expressive .status-tag{border-radius:999px;padding:6px 12px;line-height:1.35}
.app-expressive .tag.income,.app-expressive .paid-label{background:#c7efce;color:#14512e}
.app-expressive .tag.expense{background:#ffdad6;color:#85362e}
.app-expressive .alert{border-radius:18px;padding:16px 18px}
.app-expressive .alert.success{background:#c7efce;color:#174d30}
.app-expressive .alert.error{background:#ffdad6;color:#80372f}
.app-expressive .alert-close{width:36px;height:36px;min-height:36px;border-radius:50%}
.app-expressive .empty{background:#f1f5ed;border-radius:16px;color:#4b6150}
.app-expressive .table-wrap{max-width:100%;overscroll-behavior-x:contain}
.app-expressive table{width:100%;min-width:max-content}
.app-expressive table th,.app-expressive table td{vertical-align:top}
.app-expressive td b{color:#1a2d21}
.app-expressive tr.total,.app-expressive tr.grand{background:#e4efe1;color:#183b27;font-weight:800}
.app-expressive .panel details>summary,.app-expressive .metric details>summary{cursor:pointer}
.app-expressive :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid #356f4f;outline-offset:3px}
.app-expressive .sticky{top:92px}
.app-expressive .attachment-chip{border-radius:16px;background:#e5ebe1;color:#285036}
.app-expressive .attachment-chip:hover{background:#d5e7d2}
.app-expressive .pagination,.app-expressive .ledger-pagination{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}

/* Page-specific components keep their useful layout while sharing the same tokens. */
.app-expressive .loan-card,.app-expressive .fo-permission-card,.app-expressive .budget-history a,.app-expressive .budget-edit-row{background:#f0f5ed;border:1px solid #dbe5d8;border-radius:24px;box-shadow:none}
.app-expressive .loan-card{border-left:6px solid #8d6b25;padding:22px}
.app-expressive .loan-card.settled{border-left-color:#327a4b;background:#e6f3e4}
.app-expressive .loan-facts span{border-radius:16px;background:#e6eee3;padding:13px}
.app-expressive .loan-facts b{overflow-wrap:anywhere}
.app-expressive .loan-payment-form{gap:12px}
.app-expressive .budget-month-banner,.app-expressive .access-intro{border-radius:28px 28px 12px 28px;background:#d8ebd4;color:#173c27;box-shadow:none}
.app-expressive .budget-month-banner input{background:#fcfdf7;color:#172f20}
.app-expressive .budget-history a{color:#243a2b;transition:background 180ms cubic-bezier(.2,.8,.2,1),border-radius 180ms cubic-bezier(.2,.8,.2,1)}
.app-expressive .budget-history a:hover{background:#dcebd8;border-radius:16px}
.app-expressive .budget-progress{background:#dce5d8;height:12px}
.app-expressive .budget-progress i{background:#28734b}
.app-expressive .budget-progress.over i{background:#ae3f35}
.app-expressive .access-intro>div:first-child{background:#bfe2c1;border-radius:20px}
.app-expressive .access-intro p{opacity:1}
.app-expressive .fo-permission-card{padding:20px}
.app-expressive .permission-item{border-radius:16px;background:#fcfdf7;min-height:48px;align-items:center}
.app-expressive .permission-item:has(input:checked){background:#c7efce;border-color:#83c49a;color:#164930}
.app-expressive .permission-item input{flex:none}
.app-expressive .activity-action,.app-expressive .status-tag{border-radius:999px}
.app-expressive .report-bars .bar,.app-expressive .bar{border-radius:999px;background:#e5ebdf}
.app-expressive .bar i.income{background:#28734b}
.app-expressive .bar i.expense{background:#ae564e}
.app-expressive .ledger-overview .ledger-totals>div{border-radius:24px;background:#eaf0e4;border:0}
.app-expressive .ledger-overview .ledger-totals>div:first-child{background:#c7efce}
.app-expressive .ledger-overview .ledger-totals>div:last-child{background:#e7dff8;border:0}
.app-expressive .ledger-groups>div{border-color:#dbe5d8}
.app-expressive .ledger-overview .ledger-table{min-width:740px}
.app-expressive .account-settings{background:#eaf0e4}
.app-expressive .payment-box :is(input,select){min-height:44px;padding:8px 10px;margin:0}

/* Standalone login, setup and import screens. */
.app-expressive.auth-body{min-height:100vh;background:radial-gradient(circle at 85% 5%,#d7edda 0,transparent 36%),radial-gradient(circle at 0 100%,#e7dff8 0,transparent 30%),#f3f6f0;padding:24px;display:grid;place-items:center}
.app-expressive .auth-card{width:min(100%,540px);background:#fcfdf7;border:1px solid #dbe5d8;border-radius:32px;padding:clamp(24px,4vw,40px);box-shadow:0 18px 42px #143b2414}
.app-expressive .auth-card h1{font-size:clamp(24px,3vw,34px);line-height:1.3;color:#183b28}
.app-expressive .auth-card .btn.wide{width:100%;margin-top:20px}
.app-expressive .auth-card label{margin-top:16px}
.app-expressive .auth-card .confirm-check{color:#365542;align-items:center}
.app-expressive .auth-card .confirm-check input{margin:0}
.app-expressive.page-bank-import main{background:#fcfdf7;border-radius:28px;border:1px solid #dbe5d8}

@media(max-width:1200px){
  .app-expressive .content{padding-left:22px;padding-right:22px}
  .app-expressive .grid-2,.app-expressive .grid-form-table{grid-template-columns:minmax(0,1fr)}
  .app-expressive .sticky{position:static}
  .app-expressive .loan-payment-form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-expressive .loan-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .app-expressive .content{padding:86px 14px 34px;margin-left:0;max-width:100%;overflow-x:hidden}
  .app-expressive .sidebar{visibility:hidden;transition:transform .24s ease,visibility 0s linear .24s}
  .app-expressive.menu-open .sidebar{visibility:visible;transition:transform .24s ease,visibility 0s linear}
  .app-expressive .page-head{align-items:flex-start;gap:14px}
  .app-expressive .page-head h1{font-size:clamp(26px,7vw,34px)}
  .app-expressive .month-filter{width:100%;display:flex;flex-direction:column;align-items:stretch}
  .app-expressive .period-control{width:100%;display:flex;flex-wrap:wrap}
  .app-expressive .period-control>a,.app-expressive .period-control>input{min-width:0;flex:1 1 170px}
  .app-expressive .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-expressive .metric{min-width:0}
  .app-expressive .grid-2,.app-expressive .grid-form-table{grid-template-columns:minmax(0,1fr)}
  .app-expressive .panel{padding:18px}
  .app-expressive .loan-form,.app-expressive .loan-payment-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-expressive .loan-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-expressive .fo-create-form,.app-expressive .permission-grid{grid-template-columns:minmax(0,1fr)}
  .app-expressive .budget-history{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-expressive .table-wrap{margin:0;overflow-x:auto}
  .app-expressive table{min-width:max-content}
  .app-expressive .auth-card{border-radius:28px;padding:24px}
}
@media(max-width:460px){
  .app-expressive .cards{grid-template-columns:minmax(0,1fr)}
  .app-expressive .period-control>a,.app-expressive .period-control>input{flex-basis:100%}
  .app-expressive .loan-form,.app-expressive .loan-payment-form,.app-expressive .loan-facts,.app-expressive .budget-history{grid-template-columns:minmax(0,1fr)}
  .app-expressive .ledger-overview .ledger-totals{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.app-expressive *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.app-expressive .sidebar,.app-expressive .topbar,.app-expressive .month-filter,.app-expressive .btn{display:none!important}.app-expressive .content{padding:0;margin:0}.app-expressive .panel,.app-expressive .metric{background:white;border:1px solid #999;box-shadow:none}.app-expressive table{min-width:0}}