:root { font-family: Inter, "Microsoft YaHei", sans-serif; color: #172033; background: #f5f7fb; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 980px; margin: 0 auto; padding: 48px 20px; }
header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 28px; } h1 { margin: 4px 0 8px; } h2 { font-size: 18px; margin: 0; } p { margin: 0; color: #687386; } .eyebrow { color: #3974e9; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.header-actions { display: flex; gap: 8px; align-items: center; }.badge { padding: 7px 10px; border-radius: 999px; background: #e8efff; color: #2457b8; font-size: 13px; white-space: nowrap; text-decoration: none; } .admin-entry { background:#1e4fae; color:white; }.button-link { display:inline-block; margin-top:16px; background:#2864d7; border-radius:8px; color:white; text-decoration:none; padding:10px 14px; }.panel { background: white; border: 1px solid #e8ebf1; border-radius: 14px; padding: 20px; margin-bottom: 18px; box-shadow: 0 8px 24px #1b31520a; }
form { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; gap: 10px; margin-top: 15px; } input, select, button { min-height: 38px; border-radius: 8px; font: inherit; } input, select { border: 1px solid #dce1ea; padding: 0 10px; background: white; } button { background: #2864d7; color: white; border: 0; padding: 0 13px; cursor: pointer; } button.secondary { background: #eff3fa; color: #30405c; } .section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }.scan-field { display: flex; gap: 6px; }.scan-field input { width: 100%; }.employee-lookup { margin-top: 16px; max-width: 480px; }.employee-lookup > label { display:block; margin-bottom:6px; color:#30405c; font-size:14px; }.employee-lookup > div { display:flex; gap:8px; }.employee-lookup input { flex:1; }.employee-results { display:grid !important; gap:6px; margin-top:8px; }.employee-result { text-align:left; color:#30405c; background:#f5f7fb; }.scanner-modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:#17203399; }.scanner-panel { width:min(520px, 100%); background:white; padding:20px; border-radius:14px; }.scanner-panel #reader { width:100%; overflow:hidden; border-radius:10px; }
.shipment { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid #edf0f5; } .shipment:last-child { border-bottom: 0; } .tracking { font-size: 16px; } .meta, .recipient { font-size: 13px; margin-top: 5px; } .actions { display: flex; gap: 8px; align-items: center; } .actions button { font-size: 13px; }
.status-tag { padding:5px 8px; border-radius:999px; color:#2457b8; background:#e8efff; font-size:12px; white-space:nowrap; }.empty-state { color:#687386; padding:18px 0; }.admin-form { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:680px; }.admin-form label { display:grid; gap:6px; color:#30405c; font-size:14px; }.inline-field { display:flex; gap:8px; }.inline-field input { width:100%; }.admin-form .employee-results, .admin-form .form-message { grid-column:1 / -1; }
.narrow { max-width: 640px; }.stacked-form { display: grid; grid-template-columns: 1fr; max-width: 440px; }.stacked-form label { display: grid; gap: 6px; color: #30405c; font-size: 14px; }.form-message { margin-top: 14px; color: #2457b8; }
@media (max-width: 700px) { main { padding-top: 28px; } header, .shipment { flex-direction: column; } form, .admin-form { grid-template-columns: 1fr; } .actions { flex-wrap: wrap; } }