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

.app-header{
display:flex;
align-items:center;
justify-content:center;
margin:0 0 18px;
}

.brand-logo{
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:94px;
height:66px;
background:#050505;
color:#fff;
border:3px solid #22c55e;
border-radius:8px;
font-weight:900;
font-size:20px;
line-height:.92;
letter-spacing:0;
box-shadow:0 12px 28px rgba(0,0,0,.3);
}

.brand-logo span{
display:block;
color:#22c55e;
}

.brand-logo-large{
width:118px;
height:82px;
font-size:25px;
margin:0 auto 18px;
}

.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;
}

.invoice-print-page{
background:#fff;
color:#000;
padding:10px;
margin:20px auto;
max-width:1720px;
overflow-x:auto;
border-radius:6px;
box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.proforma-sheet{
width:100%;
min-width:1320px;
border-collapse:collapse;
table-layout:fixed;
font-family:Arial, sans-serif;
font-size:14px;
font-weight:700;
background:#fff;
color:#000;
border:3px solid #000;
}

.proforma-sheet col:nth-child(1){width:70px;}
.proforma-sheet col:nth-child(2){width:190px;}
.proforma-sheet col:nth-child(3){width:70px;}
.proforma-sheet col:nth-child(n+4){width:78px;}

.proforma-sheet th,
.proforma-sheet td{
border:2px solid #000;
height:26px;
padding:2px 5px;
text-align:center;
vertical-align:middle;
overflow:hidden;
white-space:nowrap;
text-overflow:clip;
}

.proforma-sheet .pi-brand-row td{
height:92px;
background:#a8cf91;
}

.proforma-sheet .pi-logo{
background:#050505 !important;
color:#fff;
padding:2px;
}

.proforma-sheet .pi-brand-logo{
width:100%;
height:72px;
border:0;
border-radius:0;
font-size:13px;
box-shadow:none;
}

.proforma-sheet .pi-title{
font-size:58px;
letter-spacing:0;
}

.proforma-sheet .pi-top-labels td,
.proforma-sheet .pi-top-values td{
font-family:Georgia, "Times New Roman", serif;
font-size:26px;
height:28px;
}

.proforma-sheet .pi-top-values td{
background:#90acd9;
}

.proforma-sheet .pi-head-main th,
.proforma-sheet .pi-head-sub th{
background:#fff;
font-size:13px;
}

.proforma-sheet tbody tr:nth-child(n+6):nth-child(-n+29) td{
background:#dcebf7;
font-size:24px;
}

.proforma-sheet .pi-desc{
text-align:right;
font-family:Georgia, "Times New Roman", serif;
font-size:24px;
}

.proforma-sheet .pi-bank-title{
background:#000 !important;
color:#fff;
font-size:20px;
}

.proforma-sheet .pi-bank-line{
background:#bfbfbf !important;
font-size:18px;
}

.proforma-sheet .pi-holl-label,
.proforma-sheet .pi-summary-label{
background:#b5c9e9 !important;
font-size:16px;
}

.proforma-sheet .pi-holl-qty{
background:#92d050 !important;
}

.proforma-sheet .pi-holl-rate{
background:#ffff00 !important;
}

.proforma-sheet .pi-note td{
background:#f8cbad !important;
font-size:14px;
height:24px;
}

.print-clone-root{
display:none;
}

.print-frame{
position:fixed;
right:0;
bottom:0;
width:1px;
height:1px;
border:0;
opacity:0;
pointer-events:none;
}

@media print{
@page{
size:landscape;
margin:6mm;
}

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

.print-document{
padding:0 !important;
}

.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-clone-root){
display:none !important;
}

.printing-region .print-clone-root{
display:block !important;
background:#fff !important;
color:#000 !important;
}

.invoice-card,
.invoice-print-page,
.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;
}

.invoice-print-page{
max-width:none !important;
width:100% !important;
padding:0 !important;
margin:0 !important;
overflow:visible !important;
border-radius:0 !important;
box-shadow:none !important;
}

.proforma-sheet{
min-width:0 !important;
width:100% !important;
font-size:9px !important;
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
page-break-inside:avoid;
}

.proforma-sheet th,
.proforma-sheet td{
border:1.4px solid #000 !important;
height:18px;
padding:1px 3px;
}

.proforma-sheet .pi-brand-row td{
height:56px;
}

.proforma-sheet .pi-brand-logo{
height:48px;
font-size:9px;
}

.proforma-sheet .pi-title{
font-size:34px;
}

.proforma-sheet .pi-top-labels td,
.proforma-sheet .pi-top-values td{
font-size:17px;
height:20px;
}

.proforma-sheet tbody tr:nth-child(n+6):nth-child(-n+29) td,
.proforma-sheet .pi-desc{
font-size:14px;
}

.proforma-sheet .pi-bank-title,
.proforma-sheet .pi-bank-line{
font-size:12px;
}

.proforma-sheet .pi-holl-label,
.proforma-sheet .pi-summary-label,
.proforma-sheet .pi-note td{
font-size:10px;
}
}