body { font-family: Inter, "Segoe UI", Arial, sans-serif; margin: 0; background: #070b12; color: #e6edf3; }
header { background: rgba(5, 7, 11, 0.96); color: #f8fafc; padding: 12px 18px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #1f2937; position: sticky; top: 0; z-index: 20; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: white; font-weight: 900; }
main { padding: 24px; }
h1 { margin-top: 0; }
.section { background: #0f172a; border: 1px solid #263244; border-radius: 8px; padding: 14px; margin: 14px 0; }
.compact { padding: 10px; margin: 10px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; }
table { border-collapse: collapse; width: 100%; background: #0f172a; font-size: 14px; color: #e5e7eb; }
th, td { border: 1px solid #263244; padding: 7px; vertical-align: top; }
th { background: #1f2a3a; color: #f8fafc; }
input, textarea, select { width: 100%; box-sizing: border-box; padding: 7px; border: 1px solid #334155; border-radius: 4px; background: #0b1220; color: #e5e7eb; }
input:disabled, select:disabled, .disabled-field { background: #1f2937; color: #94a3b8; border-color: #334155; cursor: not-allowed; }
button, .btn { background: #2563eb; color: white; border: 0; border-radius: 6px; padding: 8px 12px; text-decoration: none; cursor: pointer; }
.secondary { background: #475569; }
.secondary:hover { background: #334155; }
.danger { background: #991b1b; }
.hidden { display: none !important; }
.inline-control { display: grid; grid-template-columns: minmax(140px, 1fr) auto; gap: 8px; align-items: center; }
.field-help { display: block; margin-top: 6px; color: #94a3b8; font-size: 13px; }
.paypal-pay-help { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-mini { padding: 3px 7px; border-radius: 5px; font-size: 12px; line-height: 1.2; background: #1d4ed8; }
.copy-mini:hover { background: #2563eb; }
.muted { color: #94a3b8; }
.warn { color: #f87171; }
a { color: #60a5fa; }
.table-scroll { max-height: 360px; overflow: auto; border: 1px solid #263244; border-radius: 6px; }
.table-scroll.wide { max-height: calc(100vh - 170px); }
.pedido-add { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; align-items: center; }
.pedido-web-table select, .pedido-web-table input { min-width: 110px; padding: 6px; }
.pedido-thumb-wrap { display: inline-flex; align-items: center; justify-content: center; width: 62px; min-height: 62px; }
.pedido-thumb { width: 58px; height: 58px; object-fit: cover; border-radius: 7px; border: 1px solid #334155; background: #020617; }
.pedido-no-thumb { display: none; width: 58px; height: 58px; align-items: center; justify-content: center; border: 1px dashed #334155; border-radius: 7px; color: #94a3b8; font-size: 11px; text-align: center; }
.pedido-web-table td:last-child { min-width: 148px; }
.pedido-web-table td:last-child button { margin: 2px; }
@media (max-width: 760px) {
  main { padding: 12px; }
  .pedido-add { grid-template-columns: 1fr; }
  .inline-control { grid-template-columns: 1fr; }
  input, textarea, select, button, .btn { font-size: 16px; min-height: 42px; }
  .table-scroll.wide { max-height: none; overflow: visible; border: 0; }
  .table-scroll.wide table { display: block; background: transparent; }
  .table-scroll.wide thead { display: none; }
  .table-scroll.wide tbody { display: grid; gap: 10px; }
  .table-scroll.wide tr { display: block; background: #0f172a; border: 1px solid #263244; border-radius: 10px; padding: 10px; }
  .table-scroll.wide td { display: grid; grid-template-columns: 105px 1fr; gap: 10px; border: 0; border-bottom: 1px solid #1f2a3a; padding: 8px 0; background: transparent !important; word-break: break-word; }
  .table-scroll.wide td:last-child { border-bottom: 0; }
  .table-scroll.wide td::before { content: attr(data-label); color: #94a3b8; font-weight: 700; }
  .pedido-web-table select, .pedido-web-table input { width: 100%; min-width: 0; }
}