*{box-sizing:border-box}
body{
    margin:0;
    font-family:"Microsoft JhengHei",Arial,sans-serif;
    background:#f4f6fb;
    color:#1f2937;
}
a{color:#b91c1c;text-decoration:none}
.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
      radial-gradient(circle at top left, rgba(185,28,28,.18), transparent 35%),
      linear-gradient(135deg,#fff 0%,#f3f4f6 100%);
}
.login-card{
    width:420px;
    background:white;
    border-radius:26px;
    box-shadow:0 24px 80px rgba(15,23,42,.16);
    overflow:hidden;
    border:1px solid rgba(229,231,235,.8);
}
.login-head{
    padding:34px;
    background:linear-gradient(135deg,#991b1b,#dc2626);
    color:white;
}
.login-head h1{margin:0;font-size:25px}
.login-head p{margin:10px 0 0;color:#fee2e2}
.login-body{padding:30px}
.input{
    width:100%;
    border:1px solid #d1d5db;
    border-radius:14px;
    padding:13px 14px;
    font-size:15px;
    margin-top:8px;
    background:#fff;
}
label{font-weight:700;font-size:14px;color:#374151}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    background:#b91c1c;
    color:#fff;
    border-radius:13px;
    padding:11px 16px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(185,28,28,.2);
}
.btn:hover{background:#991b1b}
.btn.gray{background:#4b5563;box-shadow:none}
.btn.green{background:#047857}
.btn.small{padding:7px 10px;border-radius:10px;font-size:13px}
.btn.outline{
    background:white;
    color:#991b1b;
    border:1px solid #fecaca;
    box-shadow:none;
}
.alert{
    padding:12px 14px;
    border-radius:14px;
    margin:12px 0;
}
.alert.red{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert.green{background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0}
.alert.yellow{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.topbar{
    background:white;
    border-bottom:1px solid #e5e7eb;
    position:sticky;
    top:0;
    z-index:10;
}
.topbar-inner{
    max-width:1180px;
    margin:auto;
    padding:16px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.brand{
    font-weight:900;
    color:#991b1b;
    font-size:20px;
}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{
    padding:9px 12px;
    border-radius:12px;
    background:#f9fafb;
    color:#374151;
    font-weight:700;
    font-size:14px;
}
.nav a:hover{background:#fee2e2;color:#991b1b}
.container{
    max-width:1180px;
    margin:auto;
    padding:24px 20px 60px;
}
.hero{
    background:linear-gradient(135deg,#7f1d1d,#dc2626);
    color:white;
    border-radius:26px;
    padding:28px;
    box-shadow:0 18px 40px rgba(185,28,28,.18);
    margin-bottom:20px;
}
.hero h1{margin:0;font-size:28px}
.hero p{margin:10px 0 0;color:#fee2e2}
.grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:18px;
}
.card{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:22px;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.card h2,.card h3{margin-top:0}
.table-wrap{overflow:auto}
table{
    width:100%;
    border-collapse:collapse;
    background:white;
}
th{
    background:#f9fafb;
    color:#374151;
    text-align:left;
    font-size:13px;
}
td,th{
    border-bottom:1px solid #e5e7eb;
    padding:12px;
    vertical-align:middle;
}
.badge{
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}
.badge.green{background:#dcfce7;color:#166534}
.badge.red{background:#fee2e2;color:#991b1b}
.badge.gray{background:#f3f4f6;color:#374151}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
}
.amount-row{
    display:grid;
    grid-template-columns:1.5fr .8fr 1fr;
    gap:10px;
    align-items:end;
    padding:10px;
    border:1px solid #f3f4f6;
    border-radius:16px;
    margin-bottom:10px;
}
.total-box{
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:18px;
    padding:18px;
    text-align:right;
}
.total-box strong{font-size:28px;color:#b91c1c}
.sign-card{
    max-width:820px;
    margin:24px auto;
}
.signature-pad{
    width:100%;
    height:240px;
    background:white;
    border:2px dashed #9ca3af;
    border-radius:18px;
    touch-action:none;
}
.receipt-paper{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:28px;
}
.receipt-title{
    text-align:center;
    font-size:28px;
    font-weight:900;
    letter-spacing:3px;
}
@media(max-width:800px){
    .grid{display:block}
    .card{margin-bottom:16px}
    .form-row{grid-template-columns:1fr}
    .amount-row{grid-template-columns:1fr}
    .topbar-inner{display:block}
    .nav{margin-top:12px}
}
@media print{
    .topbar,.no-print,.btn{display:none!important}
    body{background:white}
    .container{max-width:none;padding:0}
    .card,.receipt-paper{box-shadow:none;border:none}
}