:root{--ink:#142033;--muted:#617086;--line:#dce3ea;--surface:#fff;--wash:#f4f7fa;--focus:#2457a7;--accent:#176b4b;--accent-wash:#eef8f3;--amber:#a96909;--amber-wash:#fff7e8;--danger:#a83938;--danger-wash:#fff2f1;--shadow:0 15px 40px rgba(25,42,65,.12)}*{box-sizing:border-box}html{scroll-padding-top:20px}body{margin:0;background:var(--wash);color:var(--ink);font:15px/1.5 Inter,"Microsoft YaHei",system-ui,-apple-system,sans-serif}.app-shell{max-width:1700px;margin:0 auto;padding:28px 32px 64px}.skip-link{position:fixed;z-index:80;left:12px;top:-56px;padding:10px 14px;border-radius:8px;background:#fff;color:var(--ink);box-shadow:var(--shadow);transition:top .15s}.skip-link:focus{top:12px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.eyebrow{margin:0 0 7px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em}.topbar h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:34px;letter-spacing:-.04em;line-height:1.15}.subtitle{max-width:760px;margin:10px 0 0;color:var(--muted);font-size:13px}.subtitle code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.button,.icon-button,select,input{font:inherit}.button{min-height:40px;padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;touch-action:manipulation;transition:background .16s,border-color .16s,color .16s,transform .16s}.button:hover{border-color:#8fa4bc;background:#f7faff}.button:active{transform:translateY(1px)}.button-dark{flex:none;border-color:var(--ink);background:var(--ink);color:#fff}.button-dark strong{display:inline-grid;min-width:22px;place-items:center;margin-left:7px;padding:1px 6px;border-radius:20px;background:#cbe9dc;color:#123927}.button-secondary{background:#fff}.button:disabled{cursor:not-allowed;opacity:.46}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:15px}.metrics article{min-height:97px;padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:0 4px 16px rgba(25,42,65,.04)}.metrics span,.metrics small{display:block;color:var(--muted);font-size:11px}.metrics strong{display:block;margin:7px 0 3px;font-size:26px;letter-spacing:-.045em}.metric-accent{border-color:#b6daca!important;background:var(--accent-wash)!important}.metric-danger{border-color:#efc4c1!important;background:var(--danger-wash)!important}.metric-danger strong{color:var(--danger)}.rule-note{display:flex;gap:8px;margin-bottom:16px;padding:12px 15px;border:1px solid #efd6a6;border-radius:12px;background:var(--amber-wash);color:#6a4b12;font-size:12px}.rule-note strong{white-space:nowrap}.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff}.toolbar>label:not(.visually-hidden){color:var(--muted);font-size:12px;font-weight:700}.toolbar select,.toolbar input{min-height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:0 11px}.toolbar input{min-width:300px;flex:1}.paging{display:flex;align-items:center;gap:7px;margin-left:auto}.paging span{min-width:146px;color:var(--muted);font-size:12px;text-align:right}.product-area{min-height:620px}.product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.product-card{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 4px 16px rgba(25,42,65,.05)}.product-image{display:block;width:100%;height:214px;padding:0;border:0;background:#e9eef3;cursor:zoom-in;overflow:hidden}.product-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .22s}.product-image:hover img{transform:scale(1.025)}.image-fallback{display:grid;height:100%;place-items:center;color:#728399;font-size:12px}.status-badge{position:absolute;z-index:1;top:9px;left:9px;padding:4px 8px;border-radius:20px;background:#34445a;color:#fff;font-size:10px;font-weight:800}.status-badge.valid{background:var(--accent)}.status-badge.invalid{background:var(--danger)}.status-badge.needs_review{background:var(--amber)}.image-status-badge{position:absolute;z-index:1;right:9px;top:9px;max-width:calc(100% - 82px);padding:4px 7px;border-radius:8px;background:var(--amber-wash);color:#76540c;font-size:10px;font-weight:800;line-height:1.25;box-shadow:0 2px 7px rgba(73,54,14,.14)}.image-status-badge.missing{border:1px solid #e8cf98}.card-body{padding:11px}.product-title{display:-webkit-box;min-height:42px;margin:0 0 9px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:13px;font-weight:800;line-height:1.55}.product-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.product-price{margin-top:6px;font-size:16px;font-weight:800}.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:11px}.card-actions button{min-height:34px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font:700 11px/1 Inter,"Microsoft YaHei",sans-serif;cursor:pointer;touch-action:manipulation}.card-actions button:hover{border-color:#8fa4bc;background:#f7faff}.card-actions .invalid-action{color:var(--danger)}.card-actions .review-action{color:var(--amber)}.card-actions .cart-action{color:#3d4f65}.state-panel{display:grid;min-height:410px;place-items:center;align-content:center;gap:7px;border:1px dashed #bdc9d7;border-radius:13px;background:rgba(255,255,255,.62);color:var(--muted);font-size:13px}.state-panel strong{color:var(--ink);font-size:17px}.modal{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:24px}.modal-backdrop{position:absolute;inset:0;background:rgba(10,22,36,.63)}.modal-card{position:relative;z-index:1;width:min(980px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:24px;border-radius:15px;background:#fff;box-shadow:0 24px 72px rgba(0,0,0,.3)}.icon-button{min-height:38px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;cursor:pointer}.modal-card>.icon-button{position:absolute;right:14px;top:14px}.detail-layout{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:24px}.detail-image{width:100%;max-height:570px;object-fit:contain;border-radius:10px;background:#edf1f5}.detail-content h2{margin:0 90px 11px 0;font-family:Georgia,"Times New Roman",serif;font-size:24px;line-height:1.28}.detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}.detail-tags span{padding:4px 7px;border-radius:6px;background:#eef2f6;color:#506177;font-size:11px}.detail-table{display:grid;grid-template-columns:118px 1fr;gap:9px;margin:0;padding:13px 0;border-top:1px solid var(--line);font-size:12px}.detail-table dt{color:var(--muted)}.detail-table dd{margin:0;word-break:break-word}.note-label{display:block;margin-top:13px;color:var(--muted);font-size:12px;font-weight:700}.note-field{display:block;width:100%;min-height:76px;margin-top:5px;padding:9px;border:1px solid var(--line);border-radius:8px;resize:vertical;font:13px/1.45 inherit}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.detail-actions button,.detail-actions a{min-height:39px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:700 12px/1.2 Inter,"Microsoft YaHei",sans-serif;text-decoration:none;cursor:pointer}.detail-actions .primary{border-color:var(--accent);background:var(--accent);color:#fff}.detail-actions .danger{border-color:#e7b7b5;color:var(--danger)}.detail-actions .review{border-color:#ead59d;color:#89610d}.drawer{position:fixed;z-index:60;top:0;right:0;width:min(420px,100%);height:100dvh;padding:22px;background:#fff;box-shadow:-16px 0 48px rgba(15,31,49,.2);overflow:auto}.drawer-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.drawer h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:25px}.drawer>p{color:var(--muted);font-size:12px}.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:7px;background:#edf1f5}.cart-item strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:12px;line-height:1.4}.cart-item span{display:block;margin-top:4px;color:var(--muted);font-size:10px}.cart-item button{border:0;background:transparent;color:var(--danger);font:700 11px/1 inherit;cursor:pointer}.toast{position:fixed;z-index:70;left:50%;bottom:26px;max-width:calc(100vw - 32px);padding:11px 15px;border-radius:8px;background:#142033;color:#fff;font-size:12px;opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:opacity .16s,transform .16s}.toast.show{opacity:1;transform:translate(-50%,0)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}[hidden]{display:none!important}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:1250px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.app-shell{padding:20px 16px 48px}.topbar{flex-direction:column}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.paging{margin-left:0}.toolbar input{min-width:240px}}@media(max-width:620px){.topbar h1{font-size:28px}.button-dark{width:100%}.metrics{grid-template-columns:repeat(2,1fr)}.metrics article{min-height:84px}.rule-note{flex-direction:column;gap:2px}.toolbar{align-items:stretch}.toolbar select,.toolbar input,.toolbar .button{width:100%}.paging{display:grid;grid-template-columns:1fr 1fr}.paging span{grid-column:1/-1;min-width:0;text-align:left}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-image{height:160px}.card-body{padding:9px}.card-actions{gap:4px}.card-actions button{font-size:10px}.modal{padding:10px}.modal-card{max-height:calc(100vh - 20px);padding:16px}.detail-layout{grid-template-columns:1fr}.detail-content h2{font-size:20px}.detail-image{max-height:330px}.detail-table{grid-template-columns:92px 1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.metric-warning{background:var(--amber-wash)!important;border-color:#ecd8a5!important}.image-badge{position:absolute;z-index:2;right:8px;top:8px;max-width:calc(100% - 86px);padding:4px 6px;border-radius:6px;background:#fff7e8;color:#89610d;font-size:10px;font-weight:800;box-shadow:0 2px 6px rgba(68,51,16,.12)}.image-state{margin:9px 0 0;color:var(--muted);font-size:12px}.image-supplement{margin-top:16px;padding:13px;border:1px solid #ecd8a5;border-radius:9px;background:var(--amber-wash)}.image-supplement h3{margin:0;color:#6e4c08;font-size:14px}.image-supplement p{margin:5px 0 9px;color:#6e5a2d;font-size:12px}.supplement-row{display:flex;gap:8px}.supplement-row input{min-width:0;flex:1;padding:9px;border:1px solid #d9c38c;border-radius:7px;background:#fff;font:12px/1.3 inherit}.supplement-row button{flex:0 0 auto;padding:8px 10px;border:1px solid #9c7116;border-radius:7px;background:#fff;color:#77530b;font:700 12px/1 inherit;cursor:pointer}.detail-fallback{min-height:300px}.cart-item .image-fallback{width:64px;height:64px;border-radius:7px;font-size:10px}@media(max-width:620px){.supplement-row{flex-direction:column}.supplement-row button{min-height:38px}}

/* Taxonomy confirmation is visually grouped; formal categories can create a linked automatic valid decision. */
.image-status-badge:not(.missing){pointer-events:none;position:absolute;z-index:2;top:auto;right:auto;bottom:8px;left:8px;max-width:calc(100% - 16px);padding:4px 6px;border-radius:6px;background:rgba(20,32,51,.88);color:#fff;font-size:10px;font-weight:750;line-height:1.25}.detail-content .rule-note{display:block;margin-top:18px;padding:14px;background:#f4f8fb;border-color:#cfdde9}.detail-content .rule-note>strong{display:block;margin-bottom:5px;color:#142033}.detail-content .rule-note>span{display:block;line-height:1.55}.detail-content .rule-note select{width:100%;min-height:40px;margin:5px 0 8px;padding:8px;border:1px solid #b9cad8;border-radius:7px;background:#fff;color:#142033;font:inherit}.detail-content .rule-note p{margin:8px 0;font-size:12px;line-height:1.5}.detail-content .rule-note .detail-actions{margin-top:10px}

/* UI-08.3 | Screening card: direct, auditable secondary-category shortcuts. */
.quick-classify-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:10px 0 6px}.quick-classify-action{min-height:34px;padding:6px 7px;border:1px solid #bdd8cd;border-radius:7px;background:#f2faf6;color:#12583f;font:800 11px/1.2 Inter,"Microsoft YaHei",sans-serif;cursor:pointer;touch-action:manipulation;transition:background .16s,border-color .16s,color .16s,transform .16s}.quick-classify-action:hover{border-color:#5c9b82;background:#e5f5ed}.quick-classify-action:active{transform:translateY(1px)}.quick-shell-raw{border-color:#c7d5e6;background:#f4f8fc;color:#285778}.quick-shell-raw:hover{border-color:#7ba5c8;background:#eaf3fa}.quick-classify-action:disabled{cursor:wait;opacity:.6}.classification-guidance{margin:9px 0 0;color:#53697c;font-size:12px;line-height:1.6}.classification-guidance strong{color:#314f68}
@media(max-width:620px){.quick-classify-action{min-height:36px;font-size:10px}.classification-guidance{font-size:11px}}


/* Product-list bottom pagination: mirrors the toolbar controls and shares the same page state. */
.paging-bottom{margin:18px 0 2px;justify-content:flex-end}.paging-bottom[hidden]{display:none}
@media(max-width:620px){.paging-bottom{margin-top:14px}}

/* UI-08 | Small-screen touch targets: classification and card actions remain legible and operable at 375px. */
@media (max-width: 620px) {
  .quick-classify-action { min-height: 44px; padding: 7px 6px; font-size: 10px; line-height: 1.25; }
  .card-actions button { min-height: 40px; }
  .paging button { min-height: 44px; }
  .modal-close, .detail-actions button { min-height: 44px; }
}

/* UI-08 final | At the 768px tablet breakpoint, filters and card actions retain the same reliable touch target as phone. */
@media (max-width: 880px) {
  .toolbar select, .toolbar input, .toolbar .button,
  .quick-classify-action, .card-actions button, .paging button,
  .modal-close, .detail-actions button { min-height: 44px; }
}

