body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 2rem; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
nav a { margin-right: 1rem; }
section { margin-top: 1.5rem; }
label { display: inline-block; margin-right: 1rem; }
input[type="text"], input[type="file"] { padding: 0.25rem 0.5rem; }
button { padding: 0.25rem 0.75rem; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 0.5rem; }
th { background: #f4f4f4; text-align: left; }

/* Hamburger and drawer */
.hamburger { font-size: 1.25rem; background: transparent; border: 1px solid #ccc; border-radius: 4px; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-height: 100vh; max-height: 100dvh; background: #fff; border-right: 1px solid #ddd; box-shadow: 2px 0 8px rgba(0,0,0,0.1); transform: translateX(-100%); transition: transform 0.2s ease-in-out; z-index: 1000; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
.drawer.open { transform: translateX(0); }
.drawer-header { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 0.35rem 0.35rem 0; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 1rem 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.drawer a { display: block; margin: 0.25rem 0; color: #0366d6; text-decoration: none; padding: 0.15rem 0.35rem; border-radius: 4px; }
.drawer a:hover { text-decoration: underline; background: rgba(3, 102, 214, 0.06); }
.drawer a.drawer-link-active { font-weight: 600; color: #0550ae; background: rgba(3, 102, 214, 0.1); }
.drawer a .nav-unread-badge {
  display: inline-block; margin-left: 0.35rem; min-width: 1.1rem; padding: 0 0.35rem;
  border-radius: 999px; background: #b42318; color: #fff; font-size: 0.72rem;
  font-weight: 700; line-height: 1.35rem; text-align: center; vertical-align: middle;
}

/* Page help (?) panel */
.page-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.page-title-row h2 { margin: 0; }
.help-details { position: relative; }
.help-details > summary { list-style: none; }
.help-details > summary::-webkit-details-marker { display: none; }
.help-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  border: 1px solid #cbd5e1; background: #fff; color: #475569;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; user-select: none;
}
.help-toggle:hover { background: #f1f5f9; border-color: #94a3b8; }
.help-panel {
  margin: 0.5rem 0 0.75rem; padding: 0.85rem 1rem;
  background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 0.5rem;
  font-size: 0.92rem; line-height: 1.55; max-width: 52rem;
}
.help-panel-title { margin: 0 0 0.75rem; font-size: 1rem; }
.help-section { margin-bottom: 0.85rem; }
.help-section:last-child { margin-bottom: 0; }
.help-section h4 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.help-section p { margin: 0.25rem 0; }
.help-section ul { margin: 0.35rem 0 0; padding-left: 1.25rem; }
.help-section li { margin-bottom: 0.2rem; }
.help-sheet-links { list-style: none; padding-left: 0; }
.help-sheet-links li { margin-bottom: 0.35rem; }
.drawer-title { font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.25rem; }
.drawer-section { margin-bottom: 1rem; }
.drawer-section:first-child { margin-top: 0.25rem; }
.drawer .close { background: #fff; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.35rem; border-radius: 4px; }
.drawer .close:hover { background: #f1f5f9; }

/* Backdrop */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; z-index: 950; }
.backdrop.open { opacity: 1; pointer-events: auto; }
body.drawer-open { overflow: hidden; }

/* Status badges */
.status-badge { display: inline-block; padding: 0.15rem 0.4rem; border-radius: 0.375rem; font-size: 0.85rem; border: 1px solid #ccc; }
.status-badge.-ready { background: #eef7ff; border-color: #b3d7ff; }
.status-badge.-shipment { background: #f3e8ff; border-color: #d8b4fe; }
.status-badge.-in { background: #fff7e6; border-color: #ffd591; }
.status-badge.-done { background: #f6ffed; border-color: #b7eb8f; }
.status-badge.-canceled { background: #f5f5f5; border-color: #d9d9d9; color: #666; }

@media (max-width: 820px) {
  body { margin: 1rem; }
  button { min-height: 2.2rem; }
  .drawer { width: min(88vw, 320px); }
  th, td { padding: 0.4rem; }
}