:root{
--bg:#f5f7fa;
--surface:#fff;
--text:#17212f;
--muted:#5c6878;
--line:#e4e9f0;
--blue:#2457d6;
--pale:#edf2ff;
--green:#187554;
--amber:#8a560c;
--red:#b02c37;
--radius:14px;
font-family:Inter,"Segoe UI",Arial,sans-serif;
color:var(--text);
font-size:15px;
line-height:1.5;
font-synthesis:none}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg)}
a{
color:var(--blue);
text-decoration:none}
a:hover{
text-decoration:underline}
button,input,select,textarea{
font:inherit}
button,a,input,select,textarea{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer}
button:disabled{
cursor:wait}
a,button{
touch-action:manipulation}
:focus-visible{
outline:3px solid #6d94ef;
outline-offset:3px}
h1,h2,h3,p{
margin:0}
h1{
font-size:30px;
letter-spacing:-.9px;
line-height:1.25;
overflow-wrap:anywhere}
h2{
font-size:17px;
letter-spacing:-.3px}
h3{
font-size:17px}
small{
font-size:12px}
input,select,textarea{
width:100%;
min-height:46px;
border:1px solid #cbd4e0;
border-radius:8px;
background:white;
padding:10px 12px;
color:var(--text)}
input[type=checkbox]{
width:22px;
height:22px;
min-height:22px;
accent-color:var(--blue);
display:block}
input[type=month]{
width:174px}
select[multiple]{
min-height:128px}
textarea{
resize:vertical}
input:focus,select:focus,textarea:focus{
border-color:var(--blue)}
label{
font-size:13px;
font-weight:600;
display:block;
margin-bottom:7px}
form{
margin:0}
.skip{
position:fixed;
top:-100px;
left:16px;
z-index:20;
background:white;
padding:12px}
.skip:focus{
top:12px}
.sidebar{
position:fixed;
inset:0 auto 0 0;
width:244px;
background:white;
border-right:1px solid var(--line);
padding:30px 20px;
display:flex;
flex-direction:column;
z-index:5}
.brand{
display:flex;
align-items:center;
gap:11px;
color:var(--text);
font-size:23px;
font-weight:750;
letter-spacing:-.7px}
.brand:hover{
text-decoration:none}
.brand small{
display:block;
font-size:11px;
font-weight:500;
color:var(--muted);
letter-spacing:.2px;
margin-top:-3px}
.workspace{
display:flex;
align-items:center;
gap:9px;
border:1px solid var(--line);
border-radius:10px;
padding:12px 9px;
margin:35px 0 29px;
color:var(--text);
font-size:12px;
font-weight:600}
.workspace>span:nth-child(2){
flex:1;
min-width:0;
overflow-wrap:anywhere}
.workspace small{
display:block;
color:var(--muted);
font-size:10px;
font-weight:400}
.workspace-icon{
border-radius:7px;
background:#eef2f7;
width:29px;
height:29px;
display:grid;
place-items:center;
flex-shrink:0}
.nav-label{
font-size:9px;
letter-spacing:1.5px;
color:#6a7584;
margin:0 10px 13px;
font-weight:650}
.sidebar nav{
display:flex;
flex-direction:column;
gap:6px}
.sidebar nav a{
display:flex;
align-items:center;
gap:13px;
color:var(--muted);
border-radius:9px;
padding:12px 13px;
font-size:13px;
font-weight:550;
min-height:46px}
.sidebar nav a>span{
font-size:21px;
width:23px;
line-height:1;
text-align:center}
.sidebar nav a:hover{
background:#f6f8fc;
text-decoration:none}
.sidebar nav a.active{
color:var(--blue);
background:var(--pale);
font-weight:650}
.sidebar-bottom{
margin-top:auto;
padding:22px 10px 0;
border-top:1px solid var(--line);
font-size:11px;
color:var(--muted)}
.sidebar-bottom p{
margin:8px 0 20px}
.sidebar-bottom>a{
display:inline-block;
padding:8px 0}
.release{
font-size:9px;
letter-spacing:1px;
border:1px solid #d4dce7;
padding:4px 6px;
border-radius:4px}
.app-shell{
margin-left:244px}
.topbar{
height:84px;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
padding:0 38px;
background:rgba(255,255,255,.8);
gap:16px}
.context-label{
display:block;
color:var(--muted);
font-size:10px;
margin-bottom:2px}
.context-name{
font-size:13px;
font-weight:600;
overflow-wrap:anywhere}
.account{
display:flex;
align-items:center;
gap:10px;
font-size:12px}
.account small{
display:block;
color:var(--muted);
font-size:10px}
.avatar{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:50%;
background:#e9edf6;
color:#465d8d;
font-weight:650;
font-size:14px;
flex-shrink:0}
.icon-button{
border:0;
background:transparent;
min-width:44px;
min-height:44px;
color:var(--muted);
font-size:22px}
.main{
max-width:1580px;
margin:0 auto;
padding:36px 38px 28px}
.page-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
margin-bottom:28px}
.page-heading>div{
min-width:0}
.eyebrow{
font-size:10px;
font-weight:700;
letter-spacing:1.7px;
color:var(--muted);
margin-bottom:10px}
.subtitle{
color:var(--muted);
font-size:13px;
margin-top:10px;
line-height:1.7}
.button{
min-height:44px;
border-radius:8px;
padding:11px 16px;
display:inline-flex;
justify-content:center;
align-items:center;
gap:6px;
font-size:13px;
font-weight:600;
border:1px solid transparent;
white-space:normal;
text-align:center;
line-height:1.45;
transition:background .15s}
.button:hover{
text-decoration:none}
.button.primary{
background:var(--blue);
color:white;
box-shadow:0 2px 3px #1b47b01a}
.button.primary:hover{
background:#1948bb}
.button.secondary{
border-color:#d2dbe8;
background:white;
color:var(--text)}
.button.secondary:hover{
background:#f4f7fb}
.button.subtle{
background:transparent;
color:var(--muted)}
.button.subtle:hover{
background:#edf1f7}
.button.danger{
color:var(--red);
background:#fff1f1}
.period-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:24px}
.inline-form{
display:flex;
align-items:center;
gap:12px}
.inline-form label{
margin:0;
color:var(--muted);
font-size:12px}
.inline-form input{
font-size:13px;
background:white}
.scope-pill{
font-size:11px;
color:var(--muted);
display:flex;
gap:7px;
align-items:center}
.dot{
width:6px;
height:6px;
display:inline-block;
background:#3b8b6b;
border-radius:50%;
flex-shrink:0}
.stats{
display:grid;
grid-template-columns:1.35fr 1fr 1.1fr 1fr;
gap:16px;
margin-bottom:24px}
.stat{
background:white;
border:1px solid var(--line);
border-radius:var(--radius);
padding:20px 21px;
min-height:158px;
display:flex;
flex-direction:column;
justify-content:space-between}
.stat.primary-stat{
border-top:3px solid var(--blue);
padding-top:18px}
.stat-label{
display:flex;
justify-content:space-between;
align-items:center;
font-size:11px;
color:var(--muted);
gap:8px}
.stat-label>span{
font-size:18px}
.stat>strong{
font-size:32px;
font-weight:650;
letter-spacing:-1px;
line-height:1.2;
margin:13px 0;
font-variant-numeric:tabular-nums;
overflow-wrap:anywhere}
.stat>strong.currency-total{
font-size:25px;
letter-spacing:-.6px}
.stat>strong em{
font-style:normal;
font-size:12px;
color:var(--muted);
letter-spacing:0;
font-weight:500}
.stat>small,.stat>a{
font-size:10px;
color:var(--muted)}
.stat>a{
color:var(--blue)}
.status-icon{
border-radius:7px;
width:27px;
height:27px;
display:grid;
place-items:center;
font-size:15px!important}
.amber{
background:#fff5df;
color:var(--amber)}
.blue{
background:#edf3ff;
color:var(--blue)}
.green{
background:#eaf7f0;
color:var(--green)}
.notice{
display:flex;
align-items:flex-start;
gap:13px;
background:#edf3fc;
border:1px solid #dde7f7;
border-radius:10px;
padding:15px 18px;
margin-bottom:26px;
font-size:12px;
color:#3e5476}
.notice strong{
font-size:12px;
font-weight:650}
.notice p{
margin-top:3px;
font-size:11px;
line-height:1.7}
.notice-symbol{
width:19px;
height:19px;
border:1.5px solid #6b85ae;
color:#4b6998;
border-radius:50%;
display:grid;
place-items:center;
font-family:Georgia,serif;
font-weight:bold;
flex-shrink:0;
line-height:1}
.dashboard-grid{
display:grid;
grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
gap:22px;
align-items:start}
.card{
background:white;
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
min-width:0}
.card-heading{
padding:23px 24px 20px;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px}
.card-heading p{
font-size:11px;
color:var(--muted);
margin-top:4px}
.text-link{
font-size:11px;
font-weight:600;
white-space:nowrap}
.table-scroll{
overflow-x:auto}
table{
width:100%;
border-collapse:collapse;
font-size:12px}
th{
font-size:10px;
color:var(--muted);
font-weight:550;
letter-spacing:.1px;
text-align:left;
background:#fafbfd;
padding:12px 20px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
td{
padding:18px 20px;
border-bottom:1px solid #eef1f5}
tr:last-child td{
border-bottom:0}
tbody tr:hover{
background:#fbfcfe}
.row-title{
color:var(--text);
font-weight:600;
display:block;
min-width:120px;
max-width:370px;
overflow-wrap:anywhere}
.cell-caption{
display:block;
font-size:10px;
color:var(--muted);
margin-top:4px;
max-width:300px}
.number{
text-align:right;
font-variant-numeric:tabular-nums}
.amount{
font-weight:650;
white-space:nowrap}
.amount small{
display:block;
font-size:10px;
font-weight:400;
color:var(--muted);
margin-top:3px}
.nowrap{
white-space:nowrap}
.muted{
color:var(--muted)}
.badge{
display:inline-flex;
align-items:center;
gap:5px;
border-radius:6px;
padding:4px 8px;
font-size:10px;
font-weight:550;
white-space:nowrap}
.badge:before{
content:'';
width:4px;
height:4px;
border-radius:50%;
background:currentColor}
.badge.draft{
background:#edf0f4;
color:#5b6471}
.badge.submitted{
background:#fff5df;
color:var(--amber)}
.badge.approved{
background:#eaf7f0;
color:var(--green)}
.badge.returned{
background:#edf2ff;
color:#355cb8}
.badge.rejected{
background:#ffedef;
color:#ab3746}
.empty{
padding:45px 24px;
text-align:center;
display:flex;
align-items:center;
flex-direction:column;
gap:10px;
min-height:260px;
justify-content:center}
.empty-icon{
width:48px;
height:48px;
background:#f0f4fb;
border-radius:14px;
display:grid;
place-items:center;
color:#7189ae;
font-size:26px;
margin-bottom:5px}
.empty h3{
font-size:15px;
font-weight:600}
.empty p{
font-size:12px;
color:var(--muted);
max-width:280px;
line-height:1.8}
.empty .button{
margin-top:8px}
.empty.compact{
min-height:242px;
padding:30px 24px}
.project-total{
display:flex;
gap:16px;
align-items:center;
justify-content:space-between;
padding:16px 24px;
border-top:1px solid var(--line);
font-size:12px}
.project-total>span{
min-width:0;
overflow-wrap:anywhere}
.project-total small{
display:block;
color:var(--muted);
font-size:10px;
margin-top:4px;
font-weight:400}
.project-total>strong{
text-align:right;
font-variant-numeric:tabular-nums;
font-size:13px}
.page-footer{
display:flex;
justify-content:space-between;
gap:20px;
color:#677587;
font-size:10px;
margin-top:30px}
.filters{
display:flex;
align-items:end;
gap:14px;
flex-wrap:wrap;
padding:22px}
.filters>div{
min-width:155px}
.filters .search{
flex:1}
.filters label{
font-size:11px;
color:var(--muted)}
.filters input,.filters select{
font-size:13px}
.pagination{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
padding:16px;
border-top:1px solid var(--line);
font-size:12px}
.back-link{
display:inline-flex;
align-items:center;
min-height:44px;
color:var(--muted);
font-size:12px;
margin-bottom:12px}
.form-intro{
max-width:760px}
.form-card{
max-width:850px}
.data-form{
padding:28px}
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px 24px}
.field{
min-width:0}
.field.full{
grid-column:1/-1}
.field input,.field select,.field textarea{
font-size:14px}
.required{
color:#657695;
margin-left:5px}
.help{
color:var(--muted);
font-size:11px;
line-height:1.8;
margin-top:7px}
.form-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-top:28px;
padding-top:22px;
border-top:1px solid var(--line)}
.errorlist{
list-style:none;
margin:8px 0;
padding:10px 14px;
background:#fff0f1;
color:#a92837;
border-radius:8px;
font-size:12px}
.messages{
margin-bottom:20px}
.message{
padding:13px 17px;
border-radius:9px;
font-size:13px;
margin-bottom:10px;
overflow-wrap:anywhere}
.message.success{
background:#e6f5ed;
color:#146143;
border:1px solid #c7e6d5}
.message.error{
background:#fff0f1;
color:#a92837;
border:1px solid #f2cdd1}
.tabs{
display:flex;
gap:4px;
flex-wrap:wrap;
border-bottom:1px solid #dce3ed;
margin-bottom:24px}
.tabs a{
padding:13px 20px;
color:var(--muted);
font-size:13px;
border-bottom:2px solid transparent;
min-height:48px}
.tabs a.active{
border-bottom-color:var(--blue);
color:var(--blue);
font-weight:600}
.list-row{
padding:20px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
border-bottom:1px solid var(--line);
font-size:13px}
.list-row:last-child{
border-bottom:0}
.list-row>div:first-child{
min-width:0;
overflow-wrap:anywhere}
.list-row small{
display:block;
font-size:11px;
color:var(--muted);
margin-top:5px}
.row-actions{
display:flex;
align-items:center;
gap:18px}
.history-card{
margin-top:26px;
max-width:1000px}
.scope-text{
font-size:11px;
color:var(--muted);
margin-top:8px}
.detail-grid{
display:grid;
grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
gap:24px;
align-items:start}
.detail-card{
padding:28px}
.detail-amount{
font-size:36px;
letter-spacing:-1px;
font-weight:650;
font-variant-numeric:tabular-nums;
overflow-wrap:anywhere}
.detail-amount>span{
font-size:18px;
font-weight:400;
color:var(--muted)}
.details{
margin:28px 0}
.details>div{
display:grid;
grid-template-columns:150px 1fr;
gap:20px;
margin:16px 0;
font-size:13px}
.details dt{
color:var(--muted)}
.details dd{
margin:0;
overflow-wrap:anywhere}
.review-form textarea{
font-size:13px}
.timeline{
list-style:none;
padding:0 26px;
margin:0 0 24px}
.timeline li{
border-left:2px solid #e7edf7;
padding:0 0 24px 18px;
position:relative;
font-size:12px}
.timeline li:before{
content:'';
position:absolute;
width:8px;
height:8px;
left:-5px;
top:5px;
background:#8ea8d9;
border:2px solid white;
box-sizing:content-box;
border-radius:50%}
.timeline li:first-child:before{
background:var(--blue)}
.timeline p{
color:var(--muted);
font-size:11px;
margin-top:4px}
.timeline time{
font-size:10px;
color:var(--muted)}
.card-bottom{
border-top:1px solid var(--line);
padding:16px 24px;
font-size:12px}
.audit-entry{
border-bottom:1px solid var(--line);
padding:0 24px}
.audit-entry:last-child{
border-bottom:0}
.audit-entry summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 0;
cursor:pointer;
font-size:13px}
.audit-entry small{
display:block;
font-size:11px;
color:var(--muted);
margin-top:5px}
.audit-entry pre{
background:#f6f8fb;
padding:16px;
border-radius:8px;
font-size:11px;
white-space:pre-wrap;
overflow-wrap:anywhere}
.steps{
padding:4px 26px 20px 48px;
color:var(--blue)}
.steps li{
font-size:12px;
padding:0 0 20px 3px}
.steps strong{
color:var(--text)}
.steps p{
font-size:11px;
color:var(--muted);
margin-top:5px}
.mobile-nav{
display:none}
.standalone-main{
min-height:100dvh;
padding:32px;
display:grid;
place-items:center}
.login-layout{
width:min(1100px,100%);
min-height:640px;
border-radius:24px;
background:white;
box-shadow:0 20px 80px #1735680c;
display:grid;
grid-template-columns:1.1fr 1fr;
overflow:hidden;
border:1px solid var(--line)}
.login-story{
background:#edf2fb;
padding:42px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:50px;
position:relative}
.login-story h1{
font-size:44px;
line-height:1.23;
margin:15px 0 24px;
letter-spacing:-1.5px}
.login-story h1>span{
color:var(--blue)}
.login-story p{
font-size:14px;
color:var(--muted);
line-height:1.8}
.login-caption{
font-size:11px;
color:var(--muted)}
.login-panel{
padding:60px;
display:flex;
align-items:center;
justify-content:center}
.login-panel>div{
width:100%}
.login-panel h2{
font-size:25px;
letter-spacing:-.7px}
.login-form{
margin:30px 0 22px}
.login-form .field{
margin-bottom:20px}
.login-form .button{
width:100%;
margin-top:7px}
.centered-card{
width:min(560px,100%);
padding:32px}
.centered-card .data-form{
padding:24px 0}
.centered-card .field{
margin-bottom:18px}
.centered-card>.button{
margin-top:22px}
.workspace-choice{
width:100%;
padding:16px;
text-align:left;
border:1px solid var(--line);
border-radius:8px;
background:white;
margin-top:16px;
font-size:15px}
.workspace-choice:hover{
background:var(--pale)}
.workspace-choice small{
display:block;
color:var(--muted);
margin-top:4px}
@media(min-width:1700px){
.main{
padding-top:46px}
.stat{
min-height:174px}
}
@media(max-width:1250px){
.sidebar{
width:220px;
padding:25px 14px}
.app-shell{
margin-left:220px}
.main{
padding:28px 24px}
.topbar{
padding:0 24px}
.stats{
gap:12px;
grid-template-columns:1fr 1fr}
.stat{
min-height:148px}
.dashboard-grid{
grid-template-columns:1fr}
.side-card .empty{
min-height:180px}
.login-panel{
padding:40px}
.detail-grid{
grid-template-columns:1.4fr 1fr}
}
@media(max-width:850px){
.sidebar{
width:190px;
padding:24px 10px}
.sidebar .brand{
padding:0 7px;
font-size:21px}
.sidebar nav a{
padding:12px 9px;
font-size:12px;
gap:8px}
.app-shell{
margin-left:190px}
.main{
padding:24px 20px}
.topbar{
padding:0 20px}
.page-heading{
align-items:flex-start;
flex-direction:column;
gap:16px}
.page-heading>.button{
align-self:flex-start}
.period-bar{
align-items:flex-start;
flex-direction:column;
gap:12px}
.detail-grid{
grid-template-columns:1fr}
.login-layout{
min-height:600px}
.login-story{
padding:30px}
.login-story h1{
font-size:34px}
.login-panel{
padding:28px}
.form-grid{
gap:20px 16px}
.data-form{
padding:22px}
.tabs a{
padding:12px 13px}
}
@media(max-width:650px){
.sidebar{
display:none}
.app-shell{
margin-left:0}
.topbar{
height:70px;
padding:0 18px}
.context-label{
font-size:9px}
.context-name{
font-size:11px}
.account{
gap:8px}
.account>span:nth-child(2){
display:none}
.main{
padding:25px 16px 104px}
h1{
font-size:27px;
letter-spacing:-.8px}
.page-heading{
margin-bottom:22px}
.page-heading .subtitle{
font-size:12px;
margin-top:8px}
.page-heading>.button{
width:100%}
.eyebrow{
font-size:9px}
.period-bar{
margin-bottom:20px}
.inline-form{
gap:9px;
width:100%}
.inline-form label{
font-size:11px}
.inline-form input{
flex:1;
min-width:0;
width:auto}
.inline-form .button{
padding:10px;
font-size:12px}
.stats{
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:18px}
.stat{
padding:16px 13px;
min-height:145px}
.stat.primary-stat{
padding-top:14px}
.stat-label{
font-size:10px;
align-items:flex-start}
.stat-label>span{
font-size:15px}
.stat>strong{
font-size:29px}
.stat>strong.currency-total{
font-size:23px}
.stat>small,.stat>a{
font-size:10px;
line-height:1.6}
.status-icon{
width:22px;
height:22px;
flex-shrink:0}
.notice{
padding:13px;
gap:10px;
margin-bottom:20px}
.notice p{
font-size:11px}
.card-heading{
padding:20px 16px;
gap:12px}
.card-heading h2{
font-size:16px}
.card-heading .text-link{
font-size:10px}
.card-heading p{
font-size:10px}
.dashboard-grid{
gap:18px}
.table-scroll{
overflow:visible}
table,tbody,tr,td{
display:block;
width:100%}
thead{
display:none}
tbody tr{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px 12px;
padding:16px;
border-bottom:1px solid var(--line)}
tbody tr:last-child{
border:0}
td{
padding:0;
border:0;
font-size:11px}
td:first-child{
grid-row:1;
grid-column:1}
td:nth-child(2){
grid-row:2;
grid-column:1;
font-size:10px}
td:nth-child(3){
grid-row:3;
grid-column:1}
td:last-child{
grid-row:1/4;
grid-column:2;
align-self:center}
.row-title{
min-width:0;
font-size:12px}
.cell-caption{
font-size:10px}
.amount{
font-size:12px;
max-width:150px;
white-space:normal;
overflow-wrap:anywhere}
.empty{
min-height:250px;
padding:30px 20px}
.empty.compact{
min-height:210px}
.page-footer{
font-size:9px;
flex-direction:column;
gap:6px;
margin-top:22px}
.mobile-nav{
display:flex;
position:fixed;
bottom:0;
left:0;
right:0;
border-top:1px solid #dbe3ef;
background:#fffffffa;
backdrop-filter:blur(12px);
padding:8px 6px max(10px,env(safe-area-inset-bottom));
z-index:10;
justify-content:space-around;
box-shadow:0 -4px 20px #17356806}
.mobile-nav a{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:3px;
min-width:54px;
min-height:48px;
color:#5c6878;
font-size:22px;
line-height:1}
.mobile-nav a>span{
font-size:9px;
font-weight:550;
line-height:1.5}
.mobile-nav a.active{
color:var(--blue)}
.mobile-nav a.mobile-add{
color:var(--blue)}
.filters{
padding:16px;
gap:12px}
.filters>div{
min-width:0;
flex:1 1 40%}
.filters input[type=month]{
width:100%}
.filters .search{
flex-basis:100%}
.filters .button{
width:100%}
.form-grid{
grid-template-columns:1fr;
gap:18px}
.data-form{
padding:20px 16px}
.field.full{
grid-column:auto}
.field input,.field select,.field textarea{
font-size:16px}
.form-actions{
gap:10px;
align-items:stretch}
.form-actions>*{
flex:1 1 auto}
.form-actions>form>.button{
width:100%}
.list-row{
padding:17px 16px;
align-items:flex-start;
flex-wrap:wrap;
gap:14px}
.row-actions{
width:100%;
justify-content:space-between}
.tabs{
gap:0;
margin-bottom:18px}
.tabs a{
padding:12px 10px;
font-size:12px}
.detail-card{
padding:22px 17px}
.detail-amount{
font-size:30px}
.details>div{
grid-template-columns:115px 1fr;
gap:12px;
font-size:12px}
.audit-entry{
padding:0 16px}
.audit-entry summary{
font-size:12px}
.audit-entry summary .text-link{
font-size:10px}
.audit-entry small{
font-size:10px}
.standalone-main{
padding:16px}
.login-layout{
grid-template-columns:1fr;
border-radius:18px;
min-height:auto}
.login-story{
padding:26px;
gap:25px}
.login-story h1{
font-size:31px;
margin:10px 0 0}
.login-story p,.login-story .login-caption{
display:none}
.login-story h1 br{
display:none}
.login-story h1 br:after{
content:' '}
.login-story .eyebrow{
font-size:8px}
.login-panel{
padding:30px 26px}
.login-panel h2{
font-size:23px}
.login-form input{
font-size:16px}
.centered-card{
padding:24px}
.centered-card h1{
font-size:25px}
.project-total{
padding:16px}
.project-total>strong{
font-size:12px}
.history-card .card-heading{
flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
*{
transition:none!important;
scroll-behavior:auto!important}
}
.sidebar { overflow-y: auto; }
.rate-field { margin-bottom: 20px; }
.allocation-parts { border: 1px solid var(--line); border-radius: 10px; margin-top: 20px; overflow: hidden; }
.allocation-parts .project-total:first-child { border-top: 0; }
.allocation-parts .project-total { padding: 16px; }
.run-snapshot { margin-top: 12px; font-size: 12px; }
.run-snapshot summary { cursor: pointer; color: var(--blue); min-height: 44px; display: flex; align-items: center; }
.run-snapshot pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; color: var(--muted); }
.review-form { margin-top: 24px; }
.report-table { overflow-x: auto; }
.report-table table { min-width: 780px; }
.report-table td, .report-table th { padding-left: 16px; padding-right: 16px; }
.report-checks { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.negative { color: var(--red); }
.dimension-json { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); }
.closing-checks { display: grid; gap: 16px; margin: 24px 0; }
.closing-checks label { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; }
.closing-checks input[type=checkbox] { flex-shrink: 0; }
.menu-card { max-width: 900px; }
.overview-actions { margin-bottom: 26px; }
.report-filter { flex-wrap: wrap; gap: 12px; }
.report-filter select { min-width: 150px; max-width: 240px; }
.snapshot-values { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; overflow-wrap: anywhere; }
@media (max-width:650px) {
  .period-bar .report-filter { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
.report-filter label { margin: 8px 0 0; }
  .period-bar .report-filter input, .period-bar .report-filter select, .period-bar .report-filter button { width: 100%; max-width: none; min-width: 0; flex: none; }
.snapshot-values { grid-template-columns: 1fr; }
}
.payroll-part h2 { margin-bottom: 22px; }
.menu-card a { display: flex; justify-content: space-between; gap: 16px; padding: 19px 22px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 14px; min-height: 58px; }
.menu-card a:last-child { border-bottom: 0; }
.menu-card a:hover { background: var(--pale); text-decoration: none; }
.report-stats .stat > strong { font-size: 25px; }
@media (max-width:650px) {
.report-table table { min-width: 0; }
.report-table tbody tr { display: flex; flex-direction: column; gap: 10px; }
.report-table td { display: flex; align-items: baseline; justify-content: space-between; text-align: right; font-size: 13px; gap: 16px; max-width: none; padding: 0; }
.report-table td:first-child { font-size: 15px; text-align: left; padding-bottom: 6px; }
.report-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left; }
.report-stats { grid-template-columns: 1fr; }
.report-stats .stat { min-height: 140px; }
.report-stats .stat > strong { font-size: 28px; }
.report-checks { flex-direction: column; }
}