/* 视觉主题：深绿导航 + 白色数据工作台。改颜色优先修改这里的变量。 */
:root { --nav:#183632; --accent:#087f73; --line:#dbe8e4; --muted:#627873; --bg:#f2f7f5; font:16px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif; color:#203c36; background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; } [hidden] { display:none!important; }
button,input { font:inherit; } button { padding:9px 15px; border:1px solid var(--line); border-radius:7px; color:inherit; background:white; cursor:pointer; white-space:nowrap; } button:hover { background:#e7f5f0; } button:disabled { opacity:.48; cursor:default; } .primary { color:white; background:var(--accent); border-color:var(--accent); } .primary:hover { background:#07685f; }
input { width:100%; min-width:0; padding:10px 12px; border:1px solid #cbded6; border-radius:7px; background:white; color:inherit; } input:focus,button:focus-visible,summary:focus-visible { outline:2px solid #62bdac; outline-offset:2px; } input:disabled { background:#f2f4f8; color:var(--muted); } label { display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:600; } small { font-size:13px; color:var(--muted); } code { font-size:13px; overflow-wrap:anywhere; } h1 { font-size:27px; margin:3px 0 0; } h2 { font-size:18px; margin:0 0 16px; } p { margin:12px 0; } a { color:var(--accent); }
.sidebar { position:fixed; inset:0 auto 0 0; width:232px; background:var(--nav); color:white; padding:30px 18px; display:flex; flex-direction:column; } .brand { display:flex; align-items:center; gap:12px; padding:0 8px 36px; font-weight:600; font-size:19px; } .brand small { display:block; color:#9ac3b8; font-size:12px; font-weight:400; } .brand-icon { background:#119887; border-radius:9px; padding:7px 13px; font-size:23px; } nav { display:grid; gap:12px; } .nav { background:transparent; border:0; color:#bdd8d0; text-align:left; padding:15px; font-size:16px; } .nav span { font-size:12px; margin-right:13px; color:#8eb3a9; } .nav.active { background:#087f73; color:white; } .nav.active span { color:#c4eee3; } .nav:hover { background:#285349; } .sidebar-bottom { margin-top:auto; padding:20px 12px 0; color:#c4dcd4; font-size:14px; } .sidebar-bottom small { display:block; color:#8eb3a9; margin-top:9px; }
main { margin-left:232px; padding:28px 34px; max-width:1850px; } .topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; } .eyebrow { font-size:12px; color:var(--muted); letter-spacing:1px; } .card { padding:24px; background:white; border:1px solid var(--line); border-radius:12px; margin-bottom:22px; } .section-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:17px; } .section-title h2 { margin:0; } .row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .end { justify-content:flex-end; margin-top:16px; } .muted { color:var(--muted); font-size:14px; } .badge { background:#e6f4ef; color:#286d5f; border-radius:5px; padding:5px 9px; font-size:13px; } .form-grid { display:grid; gap:16px; align-items:end; } .connect { grid-template-columns:1fr 1fr auto; } .five { grid-template-columns:repeat(5,minmax(130px,1fr)); } .three { grid-template-columns:repeat(3,minmax(130px,1fr)); } .search { grid-template-columns:2fr 1fr 1fr auto auto; margin:16px 0; } .note { background:#edf7f3; border-left:3px solid var(--accent); padding:13px 17px; font-size:14px; margin:17px 0; line-height:1.8; } details { font-size:14px; } summary { color:var(--accent); cursor:pointer; margin:12px 0; }
.table-wrap { overflow:auto; margin-top:18px; } table { border-collapse:collapse; width:100%; font-size:14px; } th { background:#f5f9f7; color:var(--muted); font-weight:500; white-space:nowrap; } th,td { border-bottom:1px solid #e9eef5; padding:13px 11px; text-align:left; vertical-align:top; } td { max-width:320px; overflow-wrap:anywhere; } td small { display:block; margin-top:3px; } td button { padding:5px 10px; margin:3px 3px 3px 0; font-size:14px; } .link-value { display:block; min-width:160px; max-width:310px; font:12px/1.5 ui-monospace,monospace; color:var(--muted); overflow-wrap:anywhere; margin-bottom:6px; } .empty { text-align:center; color:var(--muted); padding:30px 12px; font-size:14px; } .chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { font-size:14px; border-radius:7px; } .chip.active { background:#e2f4ed; color:#086d60; border-color:#8acaba; } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; } .stat { border:1px solid var(--line); background:white; border-radius:10px; padding:18px 22px; } .stat strong { display:block; margin-top:8px; font-size:27px; } .event-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:18px 0 22px; } .event-choice { white-space:normal; padding:17px 12px; text-align:left; border:1px solid var(--line); } .event-choice strong,.event-choice small,.event-choice em { display:block; } .event-choice strong { font-size:17px; } .event-choice em { font-style:normal; color:#086d60; font-size:12px; margin-top:8px; } .event-choice code { display:block; color:var(--muted); font-size:12px; margin:5px 0; } .event-choice.active { background:#e6f4ef; border:2px solid var(--accent); padding:16px 11px; } .status { display:inline-block; border-radius:5px; padding:4px 8px; font-size:13px; background:#eef1f6; white-space:nowrap; } .success,.accepted { color:#087452; background:#e4f5ed; } .failed,.rejected { color:#b3263a; background:#ffedf0; } .unknown,.sending,.incomplete,.restricted { color:#946113; background:#fff3db; } .pagination { display:flex; justify-content:flex-end; gap:10px; align-items:center; padding-top:18px; font-size:14px; color:var(--muted); } .pagination span { margin-right:auto; } #notice { position:sticky; top:10px; z-index:3; padding:13px 18px; background:#fff3db; border:1px solid #f2d69c; border-radius:8px; margin-bottom:20px; } #historySearch input { max-width:380px; } #detail { width:min(850px,94vw); max-height:85vh; border:1px solid var(--line); border-radius:12px; padding:24px; color:inherit; } #detail::backdrop { background:#07172d80; } pre { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.7 ui-monospace,monospace; background:#f1f7f4; padding:18px; border-radius:8px; } footer { text-align:center; padding:15px; font-size:12px; color:var(--muted); }
/* 小屏幕将导航放在顶部；表格保留横向滚动，不挤压数据字段。 */
.app-picker { width:360px; max-width:100%; }
select { -webkit-appearance:none; appearance:none; font:400 16px/24px -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif; color:inherit; background-color:white; border:1px solid #cbded6; padding:10px 38px 10px 12px; border-radius:7px; min-width:180px; max-width:100%; height:48px; background-image:linear-gradient(45deg,transparent 50%,#627873 50%),linear-gradient(135deg,#627873 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px; background-size:5px 5px; background-repeat:no-repeat; }
select:focus-visible { outline:2px solid #62bdac; outline-offset:2px; }
select:disabled { color:var(--muted); background-color:#f2f4f8; }
input:not([type=checkbox]) { min-height:48px; font-size:16px; font-weight:400; }
.history-filters button,.search button,.import-upload button,.import-batch-heading button { min-height:48px; }
.apps-search { max-width:520px; }
.search-select { position:relative; width:100%; min-width:0; font-weight:400; }
.search-select.is-open { z-index:10; }
.search-select::after { content:''; position:absolute; right:17px; top:19px; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); pointer-events:none; }
.search-select input { height:48px; padding-right:38px; text-overflow:ellipsis; }
.search-select .select-source { position:absolute; width:1px!important; min-width:0!important; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
.select-popup { position:absolute; top:calc(100% + 6px); left:0; width:100%; max-height:min(320px,45vh); overflow:auto; overscroll-behavior:contain; background:white; border:1px solid #adcec2; border-radius:7px; box-shadow:0 6px 20px #203c3620; }
.search-select.opens-up .select-popup { top:auto; bottom:calc(100% + 6px); }
.select-option { min-height:48px; padding:10px 12px; font-size:16px; line-height:24px; cursor:pointer; overflow-wrap:anywhere; border-bottom:1px solid #edf1f6; }
.select-option:last-child { border-bottom:0; }
.select-option small { display:block; font-size:12px; line-height:19px; font-weight:400; }
.select-option[aria-selected=true] { color:#07685f; font-weight:600; }
.select-option.is-active,.select-option:hover { background:#e7f5f0; }
.select-empty { padding:16px 12px; color:var(--muted); font-size:14px; }
input[type=checkbox] { width:18px; height:18px; flex:none; accent-color:var(--accent); }
.check-label { flex-direction:row; align-items:center; font-weight:400; }
#selectionTools { margin-top:18px; }
#batchPreview { width:min(700px,94vw); max-height:85vh; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:24px; color:inherit; }
#batchPreview::backdrop { background:#07172d80; }
#batchDevices { max-height:260px; margin:20px 0; }
#batchMessage { font-size:14px; line-height:1.6; color:var(--muted); }
.link-value { max-height:108px; overflow:auto; }
.queued { color:#946113; background:#fff3db; }
.eyebrow { letter-spacing:0; }
.section-title,.form-grid,.row { min-width:0; }
.form-grid > label { min-width:0; }
.history-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:14px; }
.history-filters label,.history-filters select { min-width:0; width:100%; }
.history-filters input { max-width:100%!important; }
.import-section { padding:22px 0; margin-bottom:24px; border-block:1px solid var(--line); }
.import-upload { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; }
.import-upload input { background:white; }
.import-batch-heading { margin-top:22px; }
.import-batch-heading label { flex:1; min-width:0; max-width:720px; }
.import-batch-heading select { width:100%; min-width:0; }
.import-confirm { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:22px; }
#importMessage { font-size:14px; overflow-wrap:anywhere; }
#importCounts { margin:18px 0; }
#importRows td { min-width:100px; }
#impDaily td:nth-child(3) { color:var(--accent); font-weight:600; }
.imp-card { border-top:3px solid var(--accent); }
#importRows td:nth-child(2),#importRows td:nth-child(3) { min-width:180px; }
@media(max-width:760px) { .import-upload { grid-template-columns:minmax(0,1fr); } .import-confirm button { width:100%; } }
@media(max-width:760px) { .history-filters { grid-template-columns:minmax(0,1fr); } }
@media(max-width:1150px) { .five { grid-template-columns:repeat(3,1fr); } .search { grid-template-columns:1fr 1fr; } .event-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px) { .sidebar { position:static; width:100%; padding:16px; } .brand { padding-bottom:16px; } nav { grid-template-columns:repeat(3,1fr); gap:5px; } .nav { padding:10px 5px; text-align:center; font-size:14px; } .nav span,.sidebar-bottom { display:none; } main { margin:0; padding:20px 14px; } .topbar { align-items:start; flex-wrap:wrap; } .card { padding:18px; } .connect,.five,.three { grid-template-columns:1fr; } .section-title { flex-wrap:wrap; } .event-grid { grid-template-columns:1fr 1fr; } .stats { gap:8px; } .stat { padding:12px; } .stat strong { font-size:22px; } }
@media(max-width:760px) { .search { grid-template-columns:minmax(0,1fr); } .stats { grid-template-columns:repeat(3,minmax(0,1fr)); } .event-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pagination { flex-wrap:wrap; } .pagination span { flex-basis:100%; } }