:root { color-scheme: light; --ink:#17211b; --muted:#66736b; --line:#dfe7e1; --surface:#fff; --bg:#f3f6f3; --green:#16784b; --green-dark:#0d5836; --yellow:#ffd900; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1080px)/2)); background:#102219; color:#fff; }
.topbar>div { display:flex; align-items:center; gap:10px; }
.brand-small,.brand-mark { display:grid; place-items:center; background:var(--yellow); color:#17211b; font-weight:900; border-radius:10px; }
.brand-small { width:30px; height:30px; }
.brand-mark { width:52px; height:52px; margin-bottom:22px; font-size:24px; }
.shell { max-width:1080px; margin:0 auto; padding:52px 24px 72px; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; }
h1 { margin:2px 0 8px; font-size:38px; line-height:1.15; letter-spacing:-1px; }
h2 { margin:2px 0 0; font-size:22px; }
.eyebrow { margin:0; color:var(--green); font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.muted,small { color:var(--muted); }
.status-card { display:flex; align-items:center; gap:12px; min-width:275px; padding:16px 18px; border:1px solid var(--line); background:var(--surface); border-radius:14px; box-shadow:0 8px 24px rgba(20,43,30,.06); cursor:pointer; transition:.15s; }
.status-card:hover { border-color:var(--green); transform:translateY(-1px); }
.status-card:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.hero-right { display:flex; align-items:stretch; gap:12px; }
.toggle-stop,.toggle-start { border:0; border-radius:14px; padding:0 20px; font-weight:700; }
.toggle-stop { color:#b42318; background:#fdebe9; }
.toggle-stop:hover { background:#f9d7d3; }
.toggle-start { color:var(--green-dark); background:#e7f3ec; }
.toggle-start:hover { background:#d6ebe0; }
.status-card div { display:flex; flex-direction:column; }
.status-card small { margin-top:2px; }
.dot { width:11px; height:11px; border-radius:50%; background:#d92d20; box-shadow:0 0 0 5px #fee4e2; }
.dot.ok { background:#12a267; box-shadow:0 0 0 5px #daf5e8; }
.panel { padding:30px; margin-bottom:20px; border:1px solid var(--line); background:var(--surface); border-radius:18px; box-shadow:0 12px 34px rgba(20,43,30,.05); }
.panel.compact { display:grid; grid-template-columns:1fr 2fr; gap:26px; align-items:center; }
.grid { display:grid; gap:20px; margin-bottom:22px; }
.grid.two { grid-template-columns:repeat(2,1fr); }
.grid.three { grid-template-columns:repeat(3,1fr); }
.grid.four { grid-template-columns:repeat(4,1fr); }
label { display:flex; flex-direction:column; gap:7px; font-weight:650; }
label small { font-weight:400; min-height:20px; }
input,textarea { width:100%; padding:12px 13px; border:1px solid #cad6cd; border-radius:10px; color:var(--ink); background:#fbfcfb; outline:none; transition:.15s; }
input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(22,120,75,.12); background:#fff; }
textarea { resize:vertical; }
.check { flex-direction:row; align-items:center; min-height:78px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.check input { width:18px; height:18px; accent-color:var(--green); }
.check span { display:flex; flex-direction:column; }
.actions { display:flex; align-items:center; justify-content:flex-end; gap:18px; padding-top:8px; }
.primary,.secondary,.ghost { border:0; border-radius:10px; font-weight:700; }
.primary { padding:13px 22px; color:#fff; background:var(--green); }
.primary:hover { background:var(--green-dark); }
.secondary { padding:12px 17px; color:var(--green-dark); background:#e7f3ec; }
.ghost { padding:8px 12px; color:#dce7df; background:transparent; }
button:disabled { opacity:.55; cursor:wait; }
.message { margin:0; color:var(--muted); }
.message.error { color:var(--danger); }
.message.success { color:var(--green); }
.message.progress { color:var(--green-dark); }
.dots { display:inline-flex; align-items:center; margin-left:5px; }
.dots i { width:5px; height:5px; margin:0 2.5px; border-radius:50%; background:var(--green); opacity:.2; animation:dotPulse 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay:.2s; }
.dots i:nth-child(3) { animation-delay:.4s; }
@keyframes dotPulse { 0%,60%,100% { opacity:.2; transform:scale(1); } 30% { opacity:1; transform:scale(1.3); } }
.password-form { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 0,#e4f0e9 0,transparent 42%),var(--bg); }
.login-card { width:min(430px,100%); padding:42px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 70px rgba(20,43,30,.13); }
.login-card h1 { font-size:30px; margin:2px 0 8px; }
.login-card form { display:grid; gap:18px; margin-top:28px; }
.login-card .primary { width:100%; }
.login-card .message { margin-top:14px; }
.login-warn { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px; margin-bottom:22px; border:1px solid #f0c36b; background:#fdf6e7; border-radius:14px; }
.login-warn-text { display:flex; flex-direction:column; gap:3px; }
.login-warn small { color:#8a6d3b; }
.login-warn .primary { padding:11px 18px; white-space:nowrap; }
.qr-card { width:min(430px,100%); padding:32px; background:var(--surface); border-radius:18px; box-shadow:0 30px 80px rgba(10,25,16,.35); }
.qr-holder { display:flex; flex-direction:column; align-items:center; gap:12px; margin:18px 0; }
.qr-holder img { width:280px; height:auto; border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px; }
.qr-card .secondary { width:100%; padding:12px; }
.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; background:rgba(12,25,18,.45); }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(720px,100%); max-height:min(84vh,820px); overflow:auto; background:var(--surface); border-radius:18px; padding:28px; box-shadow:0 30px 80px rgba(10,25,16,.35); }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
.modal-head h2 { font-size:24px; }
.ghost-dark { border:0; border-radius:10px; padding:9px 13px; background:#e7f3ec; color:var(--green-dark); font-weight:700; }
.ghost-dark:hover { background:#d6ebe0; }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 22px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fbfcfb; margin-bottom:22px; }
.detail-grid div { display:flex; flex-direction:column; gap:2px; }
.detail-grid strong { font-weight:650; }
.modal h3 { margin:0 0 12px; font-size:17px; }
.item-row-wrap { display:flex; align-items:stretch; gap:10px; margin-bottom:10px; }
.item-row-wrap .item-row { flex:1; margin-bottom:0; }
.push-btn { border:0; border-radius:12px; padding:0 16px; font-weight:700; color:var(--green-dark); background:#e7f3ec; cursor:pointer; white-space:nowrap; }
.push-btn:hover { background:#d6ebe0; }
.push-btn:disabled { opacity:.55; cursor:wait; }
.item-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); margin-bottom:10px; background:#fff; transition:.15s; }
.item-row.is-new { border-color:#8ed4b3; background:#f6fcf9; }
.item-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.badge { font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.badge.new { color:#0d5836; background:#d9f2e5; }
.badge.seen { color:var(--muted); background:#eef2ef; }
.item-row:hover { border-color:var(--green); background:#f4faf6; }
.item-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.item-main strong { font-weight:650; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.item-price { font-weight:800; color:var(--green-dark); white-space:nowrap; }
@media (max-width:760px) { .shell{padding-top:32px}.hero{align-items:stretch;flex-direction:column}.status-card{min-width:0}.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}.panel{padding:22px}.panel.compact{grid-template-columns:1fr}.password-form{grid-template-columns:1fr}.actions{align-items:stretch;flex-direction:column}.primary{width:100%}h1{font-size:32px}.detail-grid{grid-template-columns:1fr}.modal{padding:20px} }