:root { --ink:#182333; --muted:#667085; --line:#e7eaf0; --blue:#2367d1; --green:#16803c; --amber:#b54708; --red:#b42318; --paper:#f7f9fc; }
button:disabled { cursor:wait; opacity:.55; } .syncbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0; } #sync-status { margin-right:auto; font-size:14px; color:var(--green); } #sync-status[data-state="warning"] { color:var(--amber); } .conflict { padding:16px; background:#fffaeb; border:1px solid #fedf89; border-radius:10px; margin:12px 0; } .conflict p { margin:6px 0 12px; } main.login { max-width:480px; margin:12vh auto; padding:32px; background:white; border:1px solid var(--line); border-radius:16px; } .login h1 { font-size:30px; } .eyebrow { color:var(--blue); font-weight:600; } .login label,.login input,.login button { display:block; width:100%; } .login input { margin:8px 0 16px; padding:12px; font:inherit; border:1px solid #cbd5e1; border-radius:8px; } .login button { padding:12px; } #login-message { color:var(--red); min-height:24px; } .muted { color:var(--muted); font-size:13px; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
main { max-width:1280px; margin:auto; padding:28px 20px 64px; } h1 { margin:0; font-size:28px; } h2 { margin:0; font-size:20px; } .intro { margin:5px 0 22px; color:var(--muted); }
.toolbar,.summary,.selected { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 10px #172b4d0a; } .toolbar { display:flex; flex-wrap:wrap; gap:10px; padding:14px; margin:18px 0; }
button { border:1px solid #cbd5e1; border-radius:8px; padding:8px 13px; color:var(--ink); background:#fff; font:inherit; cursor:pointer; } button:hover { border-color:var(--blue); color:var(--blue); } button.primary { color:#fff; background:var(--blue); border-color:var(--blue); } button.danger { color:var(--red); }
.summary { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:0; overflow:hidden; } .metric { padding:17px 20px; border-right:1px solid var(--line); } .metric:last-child { border:0; } .metric span { display:block; color:var(--muted); font-size:13px; } .metric strong { display:block; margin-top:4px; font-size:24px; }
.notice { margin:12px 2px 18px; color:var(--amber); font-size:13px; } .source { margin:18px 0; } details { background:#fff; border:1px solid var(--line); border-radius:12px; margin:10px 0; overflow:hidden; } summary { padding:14px 16px; cursor:pointer; font-weight:700; } .items { padding:0 14px 14px; display:grid; gap:10px; }
.item { border:1px solid var(--line); border-radius:10px; padding:15px; } .item-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .name { font-weight:700; font-size:16px; } .tag { color:var(--muted); font-size:13px; } .price { white-space:pre-line; color:var(--amber); font-weight:600; text-align:right; } .details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px 16px; margin:12px 0; color:#475467; font-size:13px; } .details div { white-space:pre-line; } .details b { color:#344054; }
.choices { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .choice.active[data-status="购买"] { color:#fff; background:var(--green); border-color:var(--green); } .choice.active[data-status="待定"] { color:#fff; background:var(--amber); border-color:var(--amber); } .choice.active[data-status="不购买"] { color:#fff; background:var(--red); border-color:var(--red); } .link { margin-left:auto; color:var(--blue); text-decoration:none; font-size:13px; }
.selected { margin-top:28px; padding:20px; } .selected ul { margin:12px 0 0; padding-left:20px; } .empty { color:var(--muted); } @media (max-width:700px) { main{padding:20px 12px 42px}.summary{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.details{grid-template-columns:1fr}.item-top{display:block}.price{text-align:left;margin-top:6px}.link{margin-left:0}.item-top,.choices{gap:8px} }

.item-content { display:flex; align-items:flex-start; gap:20px; margin:14px 0; } .item-content .details { flex:1; margin:0; } .product-image { display:block; flex:0 0 200px; width:200px; overflow:hidden; border:1px solid var(--line); border-radius:10px; color:var(--blue); text-decoration:none; background:#f8fafc; } .product-image img { display:block; width:100%; height:180px; object-fit:contain; background:white; } .product-image span { display:block; padding:8px; text-align:center; font-size:12px; } .product-image:focus-visible { outline:3px solid var(--blue); outline-offset:3px; } .image-missing { margin:0; flex:0 0 200px; color:var(--muted); font-size:13px; } @media(max-width:700px) { .item-content { flex-direction:column; gap:12px; } .product-image { width:100%; flex:auto; } .product-image img { height:220px; } .image-missing { flex:auto; } .item-content .details { width:100%; } }