body{
margin:0;
padding:20px;
font-family:Arial;
background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);
color:white;
}

.login-card,
.menu-card,
.invoice-card{

background:
rgba(255,255,255,.08);

backdrop-filter:
blur(20px);

border-radius:20px;

padding:20px;

margin:20px;

box-shadow:
0 20px 50px
rgba(0,0,0,.4);

}

input{

width:100%;

padding:12px;

margin:10px 0;

border-radius:10px;

border:none;

}

button{

padding:12px 20px;

background:#22c55e;

border:none;

color:white;

border-radius:10px;

cursor:pointer;

}

.menu-card{

display:block;

text-decoration:none;

color:white;

font-size:22px;

}

.invoice-card:hover{

transform:
translateY(-5px);

transition:.3s;

}
.menu-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:20px;

}

.title{

text-align:center;

font-size:40px;

margin-bottom:30px;

}

.menu-card{

text-align:center;

padding:50px;

font-size:24px;

font-weight:bold;

}

.menu-card:hover{

transform:
translateY(-10px)
scale(1.05);

}
.invoice-card{
background:#ffffff15;
padding:20px;
border-radius:15px;
margin-top:20px;
border:1px solid #ffffff20;
}

.invoice-card h2{
color:#22c55e;
}

.invoice-card h3{
color:#60a5fa;
}

.page-hint{
max-width:900px;
margin:0 auto 20px;
opacity:.85;
line-height:1.5;
}

.back-link{
display:inline-block;
margin-left:12px;
color:#93c5fd;
text-decoration:none;
}

.back-link:hover{
text-decoration:underline;
}

.table-wrap{
overflow-x:auto;
margin:12px 0 20px;
}

.invoice-table{
width:100%;
border-collapse:collapse;
font-size:14px;
background:rgba(0,0,0,.2);
}

.invoice-table th,
.invoice-table td{
border:1px solid rgba(255,255,255,.15);
padding:8px 10px;
text-align:left;
}

.invoice-table th{
background:rgba(34,197,94,.2);
color:#bbf7d0;
}

.invoice-table.compact{
max-width:420px;
}

.invoice-meta p{
margin:6px 0;
}

.invoice-sections{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
margin-top:20px;
}

.detail-list{
margin:0;
padding-left:20px;
line-height:1.6;
}

.load-error{
background:rgba(239,68,68,.15);
border:1px solid rgba(239,68,68,.35);
border-radius:12px;
padding:16px;
margin-top:20px;
}

.add-data-form{
max-width:1400px;
margin:0 auto;
}

.form-section{
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
border-radius:20px;
padding:20px;
margin:20px 0;
border:1px solid rgba(255,255,255,.12);
}

.form-section h2{
color:#22c55e;
margin-top:0;
}

.form-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
}

.form-section label{
display:block;
font-size:14px;
opacity:.9;
}

.form-section label input{
width:100%;
box-sizing:border-box;
}

.section-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}

.form-split{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:24px;
}

.form-table input{
width:72px;
min-width:56px;
padding:6px 8px;
margin:0;
font-size:13px;
}

.form-table .field-desc{
width:140px;
}

.form-table .btn-remove{
padding:4px 10px;
background:#ef4444;
font-size:16px;
line-height:1;
}

.summary-row{
display:flex;
gap:24px;
flex-wrap:wrap;
margin-top:12px;
font-size:15px;
}

.charges-table input{
width:100px;
margin:0;
}

.form-actions{
text-align:center;
margin:24px 0 40px;
}

.form-actions button{
font-size:16px;
padding:14px 28px;
}

.form-status{
max-width:1400px;
margin:16px auto;
padding:12px 16px;
border-radius:10px;
display:none;
}

.form-status.info,
.form-status.success,
.form-status.warning,
.form-status.error{
display:block;
}

.form-status.info{
background:rgba(96,165,250,.15);
border:1px solid rgba(96,165,250,.35);
}

.form-status.success{
background:rgba(34,197,94,.15);
border:1px solid rgba(34,197,94,.35);
}

.form-status.warning{
background:rgba(234,179,8,.15);
border:1px solid rgba(234,179,8,.35);
}

.form-status.error{
background:rgba(239,68,68,.15);
border:1px solid rgba(239,68,68,.35);
}

.toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
margin:12px 0 20px;
}

.toolbar input{
width:auto;
min-width:220px;
margin:0;
}

.results-toolbar,
.invoice-card-toolbar{
display:flex;
justify-content:flex-end;
margin-bottom:12px;
}

.invoice-card-toolbar button,
.results-toolbar button{
background:#3b82f6;
}

@media print{
@page{
margin:12mm;
}

body{
background:#fff !important;
color:#000 !important;
padding:0;
}

.no-print,
.back-link,
.page-hint,
.form-status,
.btn-remove,
.toolbar button,
.toolbar input,
.toolbar a,
.results-toolbar,
.invoice-card-toolbar{
display:none !important;
}

.printing-region > *:not(.print-target){
display:none !important;
}

.printing-region .print-target{
display:block !important;
}

.invoice-card,
.printable-block,
.form-section,
.invoice-table,
.menu-grid{
background:#fff !important;
color:#000 !important;
box-shadow:none !important;
border-color:#ccc !important;
backdrop-filter:none !important;
}

.invoice-card h2,
.invoice-card h3,
.form-section h2,
.title{
color:#000 !important;
}

.invoice-table th{
background:#eee !important;
color:#000 !important;
}

.invoice-table th,
.invoice-table td{
border:1px solid #999 !important;
color:#000 !important;
}

.menu-card{
display:none !important;
}

.form-table input,
.charges-table input,
.form-section label input{
border:1px solid #999;
background:#fff;
color:#000;
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}

.add-data-form .form-section{
break-inside:avoid;
page-break-inside:avoid;
}

.invoice-card{
break-inside:avoid-page;
page-break-inside:avoid;
margin-top:0;
border:1px solid #ccc;
}
}