html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing:border-box; }
body { font-family: system-ui, Arial; margin:0; background:#f6f7fb; color:#111; }
.topbar {
  background:#111;
  color:#fff;
  padding:12px 16px;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.brand { font-weight:700; white-space:nowrap; }
.topbar nav {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin;
}
.topbar a {
  color:#fff;
  text-decoration:none;
  opacity:.9;
  padding:8px 10px;
  border-radius:8px;
  white-space:nowrap;
}
.topbar a:hover { opacity:1; }

.container {
  max-width: 1100px;
  margin: 18px auto;
  padding: 0 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
.card { background:#fff; border-radius:12px; padding:16px; box-shadow: 0 6px 16px rgba(0,0,0,.06); margin: 12px 0; }

label { display:block; margin-top:10px; font-weight:600; }
input, select, textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; margin-top:6px; }
textarea { min-height: 90px; }
.filter-row input { padding:6px 8px; font-size: 13px; margin: 4px 0; }
.export-label { font-size: 13px; opacity: .7; }
#exportStatus { width: 200px; }

.btn { display:inline-block; background:#111; color:#fff; padding:10px 12px; border-radius:10px; border:none; cursor:pointer; text-decoration:none; }
.btn.ghost { background:transparent; border:1px solid #111; color:#111; }
.btn.danger { background:#b00020; }
.btn.active { outline: 3px solid #111; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.inline-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.inline-form { display:inline-flex; align-items:center; gap:8px; }
.form-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding:10px; border-bottom:1px solid #eee; }
tr.warn { background: #fff3cd; }
tr.danger { background: #ffe3e3; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 640px; }
.category-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-top:10px; }
.category-card { display:block; background:#fff; border-radius:12px; padding:14px; text-decoration:none; color:#111; box-shadow: 0 6px 16px rgba(0,0,0,.06); border:1px solid #eee; }
.category-card:hover { border-color:#bbb; transform: translateY(-1px); }
.category-title { font-weight:700; margin-bottom:6px; }
.category-meta { font-size:13px; opacity:.8; }
.pecas-toolbar { width:100%; display:flex; flex-wrap:wrap; gap:10px; }
.pecas-actions-main { display:flex; flex-wrap:wrap; gap:8px; }
.pecas-actions-export { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pecas-actions-export .export-label { margin:0; }
.pecas-actions-export #exportStatus { width:180px; }
.pecas-search-form { justify-content:flex-start; }
.pecas-search-form input { flex:1 1 360px; }
.mobile-nav { display:none; }
.structure-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 10px; }
.structure-tab {
  border:1px solid #cfd3dd;
  background:#f2f4f9;
  color:#111;
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:600;
}
.structure-tab.active { background:#111; color:#fff; border-color:#111; }
.structure-panel { display:none; }
.structure-panel.active { display:block; }

.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 820px){ .grid { grid-template-columns: 1fr; } }

.flash { margin: 10px 0; }
.flash-item { background:#ffe3e3; padding:10px; border-radius:10px; margin:6px 0; }

.stat { background:#fff; border-radius:12px; padding:16px; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.stat-num { font-size: 34px; font-weight: 800; }
.stat-label { opacity:.75; margin-top:6px; }

.badge-ok { padding:6px 10px; border-radius:999px; background:#e7ffe7; }
.badge-warn { padding:6px 10px; border-radius:999px; background:#fff3cd; }
.badge-danger { padding:6px 10px; border-radius:999px; background:#ffd6d6; }
.muted { opacity:.7; font-size: 13px; }
.muted.small { font-size: 12px; }
.touch { -webkit-tap-highlight-color: transparent; }

/* Auth */
.auth-shell { min-height: calc(100vh - 150px); display:flex; align-items:center; justify-content:center; }
.auth-card { width:min(100%, 460px); margin:0; }
.auth-form { display:flex; flex-direction:column; gap:8px; }
.auth-form label { margin-top:0; }
.auth-form .btn { width:100%; margin-top:8px; }
.auth-help { margin-top:12px; }

/* Scan */
.scan-card { display:flex; flex-direction:column; gap:14px; }
.scan-body { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px; }
.scan-video { position:relative; background:#000; border-radius:14px; overflow:hidden; min-height:260px; }
.scan-video video { width:100%; height:100%; object-fit:cover; }
.scan-status { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff; padding:8px 10px; border-radius:10px; font-size:13px; }
.scan-manual { display:flex; flex-direction:column; gap:8px; }

/* Quick */
.quick-card { display:flex; flex-direction:column; gap:16px; }
.quick-header { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.quick-actions { display:flex; gap:8px; flex-wrap:wrap; }
.quick-form { display:flex; flex-direction:column; gap:12px; }
.mode-toggle { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.qty-display { font-size:48px; font-weight:800; text-align:center; background:#f0f0f0; padding:14px; border-radius:14px; }
.keypad { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.key { padding:16px; font-size:20px; border-radius:12px; border:1px solid #ddd; background:#fff; }
.key:active { transform: scale(0.98); }
.key-wide { grid-column: span 1; font-size:16px; }
.ok-btn { font-size:20px; padding:14px; border-radius:14px; }

/* Peça foto */
.peca-info { display:flex; gap:16px; align-items:flex-start; }
.peca-meta { flex: 1 1 auto; }
.peca-foto { flex: 0 0 220px; }
.peca-img { width:100%; height:200px; object-fit:cover; border-radius:12px; border:1px solid #eee; background:#fafafa; }
.photo-placeholder { width:100%; height:200px; border:2px dashed #ddd; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#777; font-size:14px; background:#fafafa; }
.photo-preview img { width:160px; height:120px; object-fit:cover; border-radius:10px; border:1px solid #eee; margin-top:6px; }
.photo-actions { display:flex; align-items:center; gap:10px; margin: 6px 0; }
.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.camera-modal.open { display: flex; }
.camera-modal-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
}
.camera-stage {
  position: relative;
  margin-top: 8px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.camera-stage video { width:100%; height:100%; object-fit:cover; display:block; }
.camera-frame {
  position: absolute;
  left: 12%;
  top: 12%;
  width: 76%;
  height: 76%;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.28);
  pointer-events: none;
}
.camera-canvas { display:none; }
.camera-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; justify-content:flex-end; }
.print-sheet { display:flex; justify-content:center; padding: 10px 0; }
.batch-pages { display:flex; flex-direction:column; gap:8mm; align-items:center; }
.batch-page {
  background:#fff;
  border:1px dashed #bbb;
  box-sizing:border-box;
  padding: 2mm;
  break-after: page;
  page-break-after: always;
}
.batch-page:last-child {
  break-after: auto;
  page-break-after: auto;
}
.batch-grid {
  display:grid;
  align-content:start;
  justify-content:start;
}
.batch-label {
  page-break-inside: avoid;
  break-inside: avoid;
  overflow: hidden;
}
.print-label { position: relative; border:1px solid #222; border-radius:6px; padding:0; box-sizing:border-box; background:#fff; }
.print-label .label-el { position:absolute; box-sizing:border-box; }
.print-label .label-text { font-size: 12px; }
.print-label .label-name { font-weight:700; }
.print-label img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
.label-qr img { object-fit:contain; }
.photo-placeholder { width:100%; height:100%; border:2px dashed #ddd; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#777; font-size:12px; background:#fafafa; }

.print-label.editor { border:1px dashed #999; background:#fff; }
.print-label.editor.grid-on {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
}
.safe-area {
  position:absolute;
  border:1px dashed #e57373;
  pointer-events:none;
  box-sizing:border-box;
  z-index: 1;
}
.editable { border:1px solid #bbb; background:rgba(0,0,0,0.03); display:flex; align-items:center; justify-content:center; font-size:12px; }
.resize-handle { position:absolute; width:10px; height:10px; right:2px; bottom:2px; background:#111; cursor:nwse-resize; }

@media print {
  header, nav, .no-print { display:none !important; }
  body { background:#fff; }
  .container { max-width: none; margin:0; padding:0; }
  .print-label { border:1px solid #222; }
  .batch-pages { gap:0; }
  .batch-page { border:none; margin:0; }
}

@media (max-width: 820px){
  html, body { max-width:100%; overflow-x:hidden; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .brand { font-size: 19px; letter-spacing:.2px; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top:12px;
    padding-bottom:12px;
  }
  .topbar nav { display:none; }
  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(12, 12, 12, 0.98);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-sizing: border-box;
  }
  .mobile-nav a {
    text-decoration:none;
    color:#d7d7d7;
    background:#1d1f25;
    border:1px solid #2a2d36;
    border-radius:10px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:600;
    text-align:center;
    padding: 6px 4px;
    line-height:1.1;
  }
  .mobile-nav a.active {
    color:#fff;
    background:#2f3748;
    border-color:#4f607f;
  }
  .auth-shell { min-height: calc(100vh - 120px); align-items:flex-start; padding-top: 6px; }
  .auth-card { width:100%; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .inline-actions { width:100%; }
  .inline-form { width:100%; display:flex; }
  .inline-form select { min-width: 0 !important; width:100% !important; }
  .scan-body { grid-template-columns: 1fr; }
  .peca-info { flex-direction: column; }
  .peca-foto { width: 100%; }
  .peca-img, .photo-placeholder { height: 220px; }
  .camera-modal { padding: 10px; align-items: flex-end; }
  .camera-modal-card { width:100%; max-height: 92vh; border-radius:14px 14px 0 0; }
  .camera-actions .btn { flex: 1 1 32%; min-width: 0; }
  .container { margin: 12px auto; }
  .btn { padding: 12px 14px; font-size: 15px; min-height: 44px; display:inline-flex; align-items:center; justify-content:center; }
  input, select, textarea { font-size: 16px; }
  input, select, textarea { min-height: 44px; }
  textarea { min-height: 100px; }
  .row { gap: 10px; }
  .card { padding: 14px; }
  table th, table td { padding: 8px; font-size: 13px; }
  .filter-row input { font-size: 12px; padding: 6px; }
  .pecas-toolbar {
    display:flex;
    flex-direction:column;
    gap:12px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    padding:12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
  }
  .pecas-actions-main { display:flex; flex-direction:column; gap:8px; width:100%; }
  .pecas-actions-main .btn { width:100%; min-height:46px; padding:10px 12px; font-size:15px; }
  .pecas-actions-export { margin-left:0; display:flex; flex-direction:column; gap:8px; width:100%; align-items:stretch; }
  .pecas-actions-export .export-label { font-size:13px; opacity:.85; margin:0; }
  .pecas-actions-export #exportStatus,
  .pecas-actions-export #exportBtn { width:100%; }
  .pecas-search-form { display:grid; grid-template-columns:1fr; align-items:center; gap:8px; width:100%; }
  .pecas-search-form input { min-width:0; }
  .pecas-search-form .btn { width:100%; min-width:0; }
  .structure-tabs { display:grid; grid-template-columns:1fr; gap:8px; }
  .structure-tab { width:100%; min-height:44px; }

  table.mobile-cards thead,
  table.mobile-cards tr:first-child th { display:none; }
  table.mobile-cards tr {
    display:block;
    border:1px solid #eee;
    border-radius:10px;
    padding:8px;
    margin:10px 0;
    background:#fff;
  }
  table.mobile-cards td {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid #f0f0f0;
    padding:8px 4px;
    font-size:14px;
  }
  table.mobile-cards td:last-child { border-bottom:none; }
  table.mobile-cards td::before {
    content: attr(data-label);
    font-weight:700;
    opacity:.75;
    min-width:110px;
  }
  .users-actions {
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px;
    flex-wrap:wrap;
  }
  .users-actions::before { content: ""; min-width:0; }
}