body{font-family:Arial,sans-serif;margin:0;background:#f6f7f9;color:#222}.wrap{max-width:1180px;margin:auto;padding:24px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:18px;margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}label{font-weight:700;font-size:13px}input,select,textarea{width:100%;box-sizing:border-box;padding:9px;margin-top:5px;border:1px solid #bbb;border-radius:5px}button,.btn{display:inline-block;background:#1a73e8;color:#fff;border:0;border-radius:5px;padding:9px 14px;text-decoration:none;cursor:pointer}.btn.secondary{background:#666}.btn.danger{background:#b3261e}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:9px;border-bottom:1px solid #e5e5e5;text-align:left}th{background:#f1f3f4}.money{text-align:right}.ok{color:#137333;font-weight:700}.bad{color:#b3261e;font-weight:700}.muted{color:#666;font-size:13px}.kpi{font-size:24px;font-weight:700}.right{text-align:right}@media(max-width:800px){.grid,.grid4{grid-template-columns:1fr}.wrap{padding:12px}table{font-size:12px}}

.paid-top-row{
display:grid;
grid-template-columns:280px 180px 180px;
gap:14px;
align-items:end;
margin-top:12px;
}

.paid-top-row label,
.paid-reference-row label{
display:block;
}

.paid-other-row{
display:block;
}

.paid-other-row[hidden]{
display:none !important;
}

.paid-top-row input,
.paid-top-row select,
.paid-reference-row input,
.paid-other-row input{
width:100%;
box-sizing:border-box;
}

.paid-reference-row{
margin-top:14px;
width:100%;
}

.paid-other-row{
margin-top:14px;
max-width:480px;
}

@media(max-width:800px){
.paid-top-row{
grid-template-columns:1fr;
}
.paid-other-row{
max-width:none;
}
}

@media(max-width:800px){

body{
font-size:16px;
}

.wrap{
padding:10px;
max-width:100%;
}

.top{
flex-direction:column;
align-items:flex-start;
gap:8px;
}

.card{
padding:14px;
margin-bottom:12px;
border-radius:7px;
}

.grid,
.grid4{
grid-template-columns:1fr;
gap:12px;
}

input,
select,
textarea,
button,
.btn{
font-size:16px;
min-height:44px;
}

input,
select,
textarea{
padding:10px;
}

button,
.btn{
padding:10px 14px;
}

h1{
font-size:24px;
}

h2{
font-size:22px;
line-height:1.25;
}

h3{
font-size:19px;
}

.kpi{
font-size:22px;
}

.paid-top-row{
grid-template-columns:1fr;
gap:12px;
}

.paid-other-row{
max-width:none;
}

.paid-reference-row{
margin-top:12px;
}

table{
font-size:13px;
min-width:700px;
}

.card:has(table){
overflow-x:auto;
}

table th,
table td{
white-space:nowrap;
padding:8px;
}

form > div[style*="display:flex"]{
align-items:stretch !important;
}

form > div[style*="display:flex"] select{
max-width:none !important;
width:100%;
}

form > div[style*="display:flex"] button{
width:auto;
}

input[type="file"]{
padding:8px;
min-height:44px;
}

}

@media(max-width:430px){

.wrap{
padding:8px;
}

.card{
padding:12px;
}

h2{
font-size:20px;
}

.kpi{
font-size:20px;
}

button,
.btn{
width:auto;
}

}

@media(max-width:360px){

.wrap{
padding:6px;
}

.card{
padding:10px;
}

h2{
font-size:19px;
}

}

@media(max-width:800px){

body{
font-size:16px;
}

.wrap{
padding:10px;
max-width:100%;
}

.top{
flex-direction:column;
align-items:flex-start;
gap:8px;
}

.card{
padding:14px;
margin-bottom:12px;
border-radius:7px;
}

.grid,
.grid4{
grid-template-columns:1fr;
gap:12px;
}

input,
select,
textarea,
button,
.btn{
font-size:16px;
min-height:44px;
}

input,
select,
textarea{
padding:10px;
}

button,
.btn{
padding:10px 14px;
}

h1{
font-size:24px;
}

h2{
font-size:22px;
line-height:1.25;
}

h3{
font-size:19px;
}

.kpi{
font-size:22px;
}

.paid-top-row{
grid-template-columns:1fr;
gap:12px;
}

.paid-other-row{
max-width:none;
}

.paid-reference-row{
margin-top:12px;
}

table{
font-size:13px;
min-width:700px;
}

.card:has(table){
overflow-x:auto;
}

table th,
table td{
white-space:nowrap;
padding:8px;
}

form > div[style*="display:flex"]{
align-items:stretch !important;
}

form > div[style*="display:flex"] select{
max-width:none !important;
width:100%;
}

form > div[style*="display:flex"] button{
width:auto;
}

input[type="file"]{
padding:8px;
min-height:44px;
}

}

@media(max-width:430px){

.wrap{
padding:8px;
}

.card{
padding:12px;
}

h2{
font-size:20px;
}

.kpi{
font-size:20px;
}

button,
.btn{
width:auto;
}

}

@media(max-width:360px){

.wrap{
padding:6px;
}

.card{
padding:10px;
}

h2{
font-size:19px;
}

}