:root { color-scheme: light; font-family: Inter, "Microsoft YaHei", sans-serif; color: #172033; background: #f4f7fb; }
dialog { width: min(900px, calc(100vw - 32px)); border: 0; border-radius: 12px; padding: 20px; box-shadow: 0 20px 60px #17203366; }
dialog::backdrop { background: #17203377; }
dialog form { margin: 0; }
dialog header { margin-bottom: 14px; }
dialog h2 { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.source-status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 8px 0; }
.source-status + .source-status { border-top: 1px solid #e8edf3; }
.source-status button { margin-left: 4px; }
.listing-active { color: #15803d; font-weight: 700; }
.listing-suspected { color: #b45309; font-weight: 700; }
.listing-offline { color: #64748b; font-weight: 700; }
.offline-row { color: #64748b; background: #f8fafc; }
#interval { min-width: 74px; width: 74px; }
#email { min-width: 150px; width: 180px; }
.controls { gap: 8px; }
.menu-actions { display: flex; gap: 8px; margin-left: auto; }
#remark-dialog label { display: grid; gap: 6px; }
#remark-manual { min-width: min(520px, calc(100vw - 72px)); width: 100%; resize: vertical; }
button.danger { background: #dc2626; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 1680px; margin: 0 auto; padding: 24px; } header, .controls, .source-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .manual-price-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .manual-price-form label { display: grid; gap: 5px; min-width: 0; } .manual-price-form input, .manual-price-form select, .manual-price-form textarea { min-width: 0; width: 100%; } .manual-price-form textarea { min-height: 76px; resize: vertical; } header { justify-content: space-between; } h1 { margin: 0 0 16px; } .card { background: #fff; border: 1px solid #e5eaf2; border-radius: 12px; padding: 16px; margin: 14px 0; box-shadow: 0 2px 8px #1c315008; } input, select, button, textarea { min-height: 36px; border-radius: 7px; border: 1px solid #cbd5e1; padding: 7px 10px; font: inherit; } input { min-width: 180px; } button { cursor: pointer; border: 0; background: #2563eb; color: #fff; } button.secondary { background: #64748b; } nav { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; } nav button.active { background: #0f766e; } .column-picker { position: relative; } .column-picker summary { cursor: pointer; min-height: 36px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; } .column-options { position: absolute; z-index: 2; top: 42px; right: 0; min-width: 220px; max-height: 300px; overflow: auto; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #1c315033; } .column-options label { display: flex; gap: 8px; align-items: center; padding: 5px 2px; white-space: nowrap; } .column-options input { min-width: auto; min-height: auto; } .scroll { overflow: auto; max-height: calc(100vh - 290px); } table { width: 100%; border-collapse: collapse; white-space: nowrap; } th, td { border-bottom: 1px solid #e8edf3; padding: 10px 8px; text-align: left; vertical-align: top; } th { position: sticky; top: 0; background: #f8fafc; } td.remark, .remark { white-space: pre-wrap; min-width: 180px; max-width: 360px; } .discount-low { color: #2563eb; font-weight: 700; } .discount-high { color: #b45309; font-weight: 700; } .discount-alert { color: #dc2626; font-weight: 700; } .error { color: #dc2626; } pre { white-space: pre-wrap; overflow: auto; max-height: 280px; } @media (max-width: 740px) { main { padding: 12px; } .menu-actions { margin-left: 0; } .scroll { max-height: 65vh; } .manual-price-form { grid-template-columns: 1fr; } }