* { box-sizing: border-box; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; background:#f4f6f8; color:#1f2937; }
.topbar { background:#111827; color:white; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:20px; font-weight:700; }
.user-area { display:flex; align-items:center; gap:15px; font-size:14px; }
.logout-btn { border:1px solid #6b7280; background:transparent; color:white; padding:8px 14px; border-radius:6px; cursor:pointer; }
.logout-btn:hover { background:#374151; }
.container { max-width:1200px; margin:30px auto; padding:0 20px; }
.page-header { margin-bottom:24px; }
.page-header h1 { margin:0 0 7px; font-size:28px; }
.page-header p { margin:0; color:#6b7280; }
.card { background:white; border-radius:10px; padding:24px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.card h2 { margin-top:0; margin-bottom:20px; font-size:19px; }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:13px; font-weight:600; color:#4b5563; }
.field input,.field textarea,.field select { width:100%; border:1px solid #d1d5db; border-radius:6px; padding:11px 12px; font-size:14px; outline:none; background:white; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,0.08); }
.readonly { background:#f3f4f6 !important; color:#374151; }
textarea { resize:vertical; min-height:90px; }
.table-wrapper { overflow-x:auto; }
.items-table { width:100%; border-collapse:collapse; min-width:850px; }
.items-table th { background:#f3f4f6; text-align:left; font-size:13px; padding:12px; border-bottom:1px solid #d1d5db; }
.items-table td { padding:8px; border-bottom:1px solid #e5e7eb; vertical-align:middle; }
.items-table input { width:100%; padding:9px; border:1px solid #d1d5db; border-radius:5px; font-size:13px; }
.number-cell { width:50px; text-align:center; font-weight:600; color:#6b7280; }
.qty-cell { width:130px; }
.unit-cell { width:130px; }
.remove-cell { width:80px; text-align:center; }
.remove-btn { border:none; background:#fee2e2; color:#b91c1c; padding:8px 10px; border-radius:5px; cursor:pointer; }
.remove-btn:hover { background:#fecaca; }
.add-item-btn { margin-top:15px; border:1px solid #2563eb; background:white; color:#2563eb; padding:10px 16px; border-radius:6px; cursor:pointer; font-weight:600; }
.add-item-btn:hover { background:#eff6ff; }
.actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.btn { border:none; padding:12px 20px; border-radius:6px; font-weight:600; cursor:pointer; font-size:14px; }
.btn-secondary { background:#e5e7eb; color:#374151; }
.btn-secondary:hover { background:#d1d5db; }
.btn-primary { background:#2563eb; color:white; }
.btn-primary:hover { background:#1d4ed8; }
.btn-success { background:#15803d; color:white; }
.btn-success:hover { background:#166534; }
.message { display:none; padding:13px 15px; border-radius:6px; margin-bottom:20px; font-size:14px; }
.message.success { display:block; background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.message.error { display:block; background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.loading { color:#6b7280; font-size:14px; }
@media (max-width:800px) {
    .info-grid { grid-template-columns:1fr; }
    .topbar { padding:14px 18px; }
    .user-area span { display:none; }
    .container { margin:20px auto; }
    .card { padding:18px; }
    .actions { flex-direction:column; }
    .actions .btn { width:100%; }
}