* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f0f2f5;
    color: #333;
    padding: 16px;
    min-width: 1400px;
}

.container { max-width: 100%; }
.page-title {
    font-size: 22px;
    margin-bottom: 14px;
    color: #1f2d3d;
    border-bottom: 2px solid #409eff;
    padding-bottom: 8px;
}

.main { display: flex; gap: 16px; align-items: flex-start; }

.form-panel { flex: 0 0 520px; background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); padding: 16px; }
.list-panel { flex: 1; background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); padding: 16px; min-width: 0; }

.panel-title {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 16px; font-weight: 600; padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid #e8eaec; color: #1f2d3d;
}
.count { color: #409eff; font-size: 14px; margin-left: 4px; }

.form-panel .row { display: flex; gap: 10px; margin-bottom: 10px; }
.form-panel .col { flex: 1; min-width: 0; }
.form-panel .col-full { flex: 1 1 100%; }
.form-panel .checkbox-col { display: flex; flex-direction: column; gap: 6px; justify-content: center; }

.form-panel label {
    display: block; font-size: 13px; color: #606266; margin-bottom: 4px;
    white-space: nowrap;
}
.form-panel .hint { color: #909399; font-size: 12px; font-weight: normal; }
.form-panel input[type="text"], .form-panel input[type="number"],
.form-panel input[type="date"], .form-panel select, .form-panel textarea {
    width: 100%; padding: 7px 10px; border: 1px solid #dcdfe6; border-radius: 4px;
    font-size: 13px; outline: none; transition: border-color 0.2s;
}
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus {
    border-color: #409eff;
}
.form-panel input[type="file"] { padding: 4px; font-size: 12px; }

.form-panel .chk {
    display: inline-flex; align-items: center; font-size: 13px; color: #606266;
    cursor: pointer;
}
.form-panel .chk input { margin-right: 6px; }

.sub-title {
    margin: 14px 0 8px; padding: 6px 10px; background: #ecf5ff;
    color: #409eff; font-size: 14px; font-weight: 600; border-left: 3px solid #409eff;
    border-radius: 0 4px 4px 0;
}

.btn-row { margin-top: 16px; }

.btn {
    padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;
    font-size: 14px; transition: all 0.2s;
}
.btn:hover { opacity: 0.85; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-primary { background: #409eff; color: #fff; }
.btn-success { background: #67c23a; color: #fff; }
.btn-warning { background: #e6a23c; color: #fff; }
.btn-danger  { background: #f56c6c; color: #fff; }
.btn-default { background: #f4f4f5; color: #606266; border: 1px solid #dcdfe6; }

.search-bar {
    display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.search-bar input, .search-bar select {
    padding: 7px 10px; border: 1px solid #dcdfe6; border-radius: 4px;
    font-size: 13px; outline: none;
}
.search-bar input { flex: 1; min-width: 200px; }

.table-wrap {
    max-height: 75vh; overflow: auto; border: 1px solid #ebeef5; border-radius: 4px;
}
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead {
    position: sticky; top: 0; background: #f5f7fa; z-index: 2;
}
th, td {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid #ebeef5;
    white-space: nowrap;
}
th { color: #606266; font-weight: 600; background: #f5f7fa; }
tbody tr:hover { background: #fafcff; }

.tag {
    display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px;
}
.tag-status-normal { background: #f0f9eb; color: #67c23a; }
.tag-status-stop   { background: #fef0f0; color: #f56c6c; }
.tag-status-norenew{ background: #fdf6ec; color: #e6a23c; }
.tag-status-suspend{ background: #f4f4f5; color: #909399; }

.tag-pkg-std  { background: #ecf5ff; color: #409eff; }
.tag-pkg-flag { background: #f9f0ff; color: #8e44ad; }
.tag-pkg-sole { background: #fff3e0; color: #e67e22; }
.tag-pkg-in   { background: #e8f5e9; color: #27ae60; }

.qr-preview {
    width: 36px; height: 36px; border: 1px solid #e4e7ed; border-radius: 3px;
    cursor: pointer; background: #fafafa; display: block;
}
.qr-preview.no-qr { color: #c0c4cc; font-size: 11px; line-height: 36px; text-align: center; }

.action-btn {
    padding: 3px 8px; margin-right: 4px; font-size: 11px;
    border: 1px solid #dcdfe6; background: #fff; color: #606266;
    border-radius: 3px; cursor: pointer;
}
.action-btn.edit { color: #409eff; border-color: #a0cfff; }
.action-btn.del  { color: #f56c6c; border-color: #fbc4c4; }
.action-btn:hover { opacity: 0.75; }

.yes-badge { color: #67c23a; font-weight: 600; }
.no-badge  { color: #c0c4cc; }

.empty-row td {
    text-align: center; padding: 40px; color: #909399; font-size: 14px;
}

.modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55); z-index: 999; align-items: center; justify-content: center;
}
.modal-content {
    background: #fff; border-radius: 6px; padding: 20px; min-width: 320px;
    text-align: center;
}
.modal-title { font-size: 16px; margin-bottom: 12px; color: #1f2d3d; font-weight: 600; }
.modal-content img { max-width: 300px; max-height: 300px; margin: 12px 0; border: 1px solid #eee; border-radius: 4px; }

.toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(50,50,50,0.92); color: #fff; padding: 10px 22px;
    border-radius: 4px; font-size: 14px; z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.toast.show { opacity: 1; }
.toast.success { background: #67c23a; }
.toast.error   { background: #f56c6c; }