/* 发票管理工具-网络版 共享样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
       background: #F4F6F9; color: #2B2B2B; font-size: 14px; }
a { color: #4A6FA5; text-decoration: none; }

.topbar { background: #1F4E79; color: #fff; padding: 12px 18px;
          display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar h1 { font-size: 17px; font-weight: bold; }
.topbar .sub { color: #B8CCE4; font-size: 12px; }
.topbar .right { margin-left: auto; display: flex; gap: 10px;
                 align-items: center; font-size: 13px; }
.topbar a { color: #DDE5EA; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 14px; }
.card { background: #fff; border-radius: 6px; padding: 14px 16px;
        margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card h2 { font-size: 15px; color: #1F4E79; margin-bottom: 10px;
           padding-bottom: 8px; border-bottom: 1px solid #E5E7EB; }

.btn { display: inline-block; border: none; border-radius: 4px; cursor: pointer;
       background: #4A6FA5; color: #fff; padding: 8px 16px; font-size: 14px; }
.btn:hover { background: #3E5F8C; }
.btn.green { background: #2B7A3D; }
.btn.green:hover { background: #246832; }
.btn.red { background: #B03A2E; }
.btn.red:hover { background: #8F2D23; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { background: #9CA3AF; cursor: not-allowed; }

input[type=text], input[type=password], input[type=number], select, textarea {
  padding: 8px 10px; border: 1px solid #CBD5E1; border-radius: 4px;
  font-size: 14px; font-family: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #4A6FA5;
  outline-offset: -1px; }
label.fld { display: block; margin-bottom: 10px; font-size: 13px; }
label.fld span { display: block; color: #6B7280; margin-bottom: 4px; }
label.fld input, label.fld select, label.fld textarea { width: 100%; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { background: #EEF2F7; color: #1F4E79; text-align: left;
  padding: 8px; border-bottom: 2px solid #D7DEE8; white-space: nowrap; }
table.grid td { padding: 7px 8px; border-bottom: 1px solid #EDF0F4;
  vertical-align: middle; }
table.grid tr:hover td { background: #F8FAFC; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 0 0 auto; }
.row .grow { flex: 1 1 0; }
.muted { color: #6B7280; font-size: 12px; }
.mt { margin-top: 10px; } .mb { margin-bottom: 10px; }
.msg { padding: 8px 12px; border-radius: 4px; margin-bottom: 10px;
       display: none; }
.msg.ok { display: block; background: #E7F5E9; color: #2B7A3D; }
.msg.bad { display: block; background: #FDECEA; color: #B03A2E; }

.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { border: none; background: #E5E7EB; color: #374151;
  padding: 8px 18px; border-radius: 6px 6px 0 0; cursor: pointer;
  font-size: 14px; }
.tabs button.on { background: #fff; color: #1F4E79; font-weight: bold; }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.thumbs img, img.thumb { width: 72px; height: 72px; object-fit: cover;
  border-radius: 4px; border: 1px solid #D7DEE8; cursor: pointer; }

pre.preview { background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 4px;
  padding: 10px; font-size: 13px; white-space: pre-wrap; font-family: inherit;
  display: none; }

/* 手机端(发货 H5) */
@media (max-width: 640px) {
  .wrap { padding: 10px; }
  .card { padding: 12px; }
  table.grid { font-size: 12px; }
  table.grid th, table.grid td { padding: 5px 4px; }
  .btn { padding: 10px 18px; font-size: 15px; }
}