:root{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#17212b;background:#f3f6f8;font-size:16px}
*{box-sizing:border-box}
body{margin:0}
header{height:64px;padding:0 max(20px,calc((100% - 1120px)/2));display:flex;align-items:center;gap:18px;background:#102a43;color:#fff}
header a{color:#fff;text-decoration:none;font-weight:700}
header strong{flex:1}
#status{font-size:.85rem;color:#c9e8df}
main{max-width:1120px;margin:auto;padding:28px 20px 60px}
.hero,.picker,.search-panel,.catalog-section{background:#fff;border:1px solid #dce5eb;border-radius:20px;padding:24px;margin-bottom:20px;box-shadow:0 12px 30px rgba(16,42,67,.06)}
.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#102a43,#1e5d68);color:#fff}
.eyebrow{margin:0 0 6px;font-size:.78rem;letter-spacing:.14em;font-weight:800;color:#0f766e}
.hero .eyebrow{color:#8edbcf}
h1,h2,p{margin-top:0}
h1{margin-bottom:8px;font-size:clamp(1.65rem,4vw,2.35rem)}
h2{margin-bottom:0;font-size:1.25rem}
.hero p:last-child{margin:0;color:#d7e9ed;max-width:690px}
.primary,.subtle,.add{border:0;border-radius:12px;font-weight:800;cursor:pointer;font-size:.95rem}
.primary{min-height:46px;padding:0 18px;background:#0f766e;color:#fff;white-space:nowrap}
.subtle{padding:9px 13px;background:#eef3f5;color:#24465c}
.hero-actions{display:flex;align-items:center;gap:10px;flex:none}
.hero .subtle{border:1px solid #ffffff4d;background:#ffffff1f;color:#fff}
.hero .subtle.is-active{border-color:#d8fbf2;background:#d8fbf2;color:#075e54}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.search-row{display:flex;gap:12px;align-items:end}
.search-box{position:relative;flex:1}
.search-box label{display:block;font-size:.84rem;font-weight:800;margin:0 0 7px}
.search-box input,.filter-row select,.filter-row input{width:100%;min-height:46px;border:1px solid #c9d6df;border-radius:11px;padding:0 13px;font:inherit;background:#fff}
.suggestions{position:absolute;z-index:4;top:100%;left:0;right:0;background:#fff;border:1px solid #c9d6df;border-radius:10px;margin-top:5px;padding:5px;box-shadow:0 12px 24px rgba(16,42,67,.13);max-height:280px;overflow:auto}
.suggestions button{display:block;width:100%;border:0;background:transparent;text-align:left;border-radius:7px;padding:9px 10px;cursor:pointer;font:inherit}
.suggestions button:hover{background:#edf7f5}
.filter-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;padding:13px;background:#f4f7f8;border-radius:13px}
.filter-row strong{margin-right:5px}
.filter-row select{width:125px}
.filter-row input{width:150px}
.note,.empty{color:#617383;font-size:.9rem;margin:14px 0 0}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.catalog-item{display:grid;gap:9px;border:1px solid #dfe8ed;border-radius:16px;padding:8px;background:linear-gradient(145deg,#fff,#f7fbfa);box-shadow:0 7px 18px rgba(16,42,67,.045)}
.card-editor{display:grid;grid-template-columns:88px minmax(0,1fr);gap:11px;align-items:stretch;min-height:104px;width:100%;padding:6px;border:0;border-radius:13px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.card-editor img{width:88px;height:92px;display:block;align-self:center;border:1px solid #d7e3e8;border-radius:11px;background:linear-gradient(145deg,#edf3f5,#f9fbfa);object-fit:contain;color:#708392;font-size:.72rem}
.card-editor img.is-missing,.card-editor img.is-error{padding:9px}
.card-copy{display:flex;min-width:0;min-height:92px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding:9px 10px;border:1px solid #e5eeee;border-radius:11px;background:linear-gradient(135deg,#f2f8f7,#fff)}
.card-copy strong{display:-webkit-box;overflow:hidden;color:#122d45;font-size:1rem;font-weight:850;line-height:1.34;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.card-copy .price{display:inline-flex;max-width:100%;align-items:center;padding:3px 8px;border-radius:999px;background:#dff3ed;color:#087466;font-size:.84rem;font-weight:850;line-height:1.25}
.card-copy small{display:inline-flex;align-items:center;color:#496678;font-size:.8rem;font-weight:750;line-height:1.2}
.card-copy small::before{content:'✓';display:inline-grid;place-items:center;width:15px;height:15px;margin-right:5px;border-radius:50%;background:#d6ece6;color:#087466;font-size:.68rem;font-weight:900}
.add{min-height:40px;padding:0 13px;border:1px solid #b9ddd4;background:#e8f5f2;color:#0b665e;transition:transform .16s ease,background .16s ease}
.add:hover:not(:disabled){background:#d8efe9;transform:translateY(-1px)}
.add:disabled{border-color:#e2e9ec;background:#f1f4f5;color:#8a9aa5;cursor:not-allowed}
.card-editor:hover{background:#eef8f6}
.card-editor:focus-visible{outline:3px solid #b9dfd5;outline-offset:3px}
.match-mode-selector{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;border:1px solid #dce6ed;border-radius:14px;background:#f5f9fa}
.match-mode-selector>span{color:#39566c;font-size:.9rem;font-weight:800}
.match-mode-buttons{display:flex;flex-wrap:wrap;gap:8px}
.match-mode{min-height:36px;padding:0 13px;border:1px solid #c9d6df;border-radius:999px;background:#fff;color:#39566c;font:inherit;font-size:.9rem;font-weight:800;cursor:pointer}
.match-mode:hover{border-color:#0f766e;color:#0b665e;background:#effaf7}
.match-mode.is-active{border-color:#0f766e;background:#0f766e;color:#fff}
.match-mode:focus-visible{outline:3px solid #b9dfd5;outline-offset:2px}
.picker-note{margin:0 0 14px}
.quantity-dialog{width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:20px;background:transparent}
.quantity-dialog::backdrop{background:rgba(10,30,45,.56);backdrop-filter:blur(3px)}
.quantity-box{position:relative;display:grid;gap:14px;max-height:calc(100dvh - 24px);overflow:auto;padding:18px;border:1px solid #d6e4e7;border-radius:20px;background:linear-gradient(160deg,#fff,#f5fbf9);box-shadow:0 22px 55px rgba(7,30,47,.3)}
.dialog-close{position:absolute;z-index:1;top:13px;right:13px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #d6e1e6;border-radius:12px;background:rgba(255,255,255,.92);color:#203b50;font-size:1.55rem;line-height:1;cursor:pointer}
.quantity-box #quantity-photo{display:block;width:100%;height:clamp(150px,27vh,205px);border:1px solid #dce8eb;border-radius:15px;background:#eef4f4;object-fit:contain}
.quantity-box h2{margin:1px 42px 0 0;color:#102d45;font-size:clamp(1.2rem,5vw,1.52rem);line-height:1.32}
.quantity-box #quantity-price{display:inline-flex;margin:6px 0 0;padding:4px 9px;border-radius:999px;background:#dff3ed;color:#087466;font-size:1rem;font-weight:850}
.quantity-box label{margin-top:2px;color:#34566c;font-size:.95rem;font-weight:850}
.quantity-stepper{display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:10px;align-items:stretch}
.quantity-stepper input{width:100%;min-height:104px;border:2px solid #bdd8d4;border-radius:15px;padding:0 15px;background:#fff;color:#12384c;font:800 2.25rem/1 Inter,"PingFang SC","Microsoft YaHei",sans-serif;text-align:center;outline:none}
.quantity-stepper input::-webkit-inner-spin-button,.quantity-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.quantity-stepper input[type=number]{-moz-appearance:textfield}
.quantity-stepper input:focus{border-color:#0f766e;box-shadow:0 0 0 4px #bce5dd}
.quantity-stepper-buttons{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.quantity-stepper button{min-height:48px;border:1px solid #9fcfc5;border-radius:13px;background:#e8f6f2;color:#087466;font-size:1.7rem;font-weight:900;line-height:1;cursor:pointer}
.quantity-stepper button:active{transform:scale(.97);background:#cfece4}
.quantity-box .note{margin:0;color:#587383;line-height:1.55}
.dialog-actions{display:flex;gap:10px;margin-top:2px}
.dialog-actions .subtle,.dialog-actions .primary{min-height:52px}
.dialog-actions .subtle{flex:0 0 auto;min-width:96px}
.dialog-actions .primary{flex:1;font-size:1.04rem;box-shadow:0 8px 17px rgba(15,118,110,.2)}
.quantity-toast{position:fixed;z-index:20;right:16px;bottom:18px;left:16px;max-width:560px;margin:auto;padding:13px 15px;border:1px solid #bcded5;border-radius:14px;background:#f4fffb;color:#0a665c;font-size:.93rem;font-weight:800;line-height:1.4;box-shadow:0 16px 35px rgba(8,42,57,.18)}
.quantity-toast.is-pending{border-color:#b9d9e8;background:#f2fbff;color:#1e617d}
.quantity-toast.is-success{border-color:#b9dfd2;background:#f2fcf7;color:#08705f}
.quantity-toast.is-error{border-color:#efc5c1;background:#fff7f6;color:#ad3f37}
@media (max-width:720px){main{padding:16px 12px 42px}.hero,.picker,.search-panel,.catalog-section{border-radius:17px;padding:17px;margin-bottom:14px}.hero{align-items:flex-start;flex-direction:column}.hero-actions{width:100%;flex-wrap:wrap}.hero-actions .primary{flex:1}.section-title{align-items:flex-start;flex-direction:column}.match-mode-selector{align-items:flex-start;flex-direction:column}.match-mode-buttons{width:100%}.match-mode{flex:1}.catalog{grid-template-columns:1fr;gap:10px}.catalog-item{padding:7px;border-radius:14px}.card-editor{grid-template-columns:80px minmax(0,1fr);min-height:94px;gap:9px;padding:5px}.card-editor img{width:80px;height:82px;border-radius:10px}.card-copy{min-height:82px;gap:5px;padding:8px 9px}.card-copy strong{font-size:.98rem}.card-copy .price{font-size:.8rem}.card-copy small{font-size:.78rem}.add{min-height:42px}.quantity-dialog{width:min(calc(100% - 16px),520px);max-height:calc(100dvh - 16px)}.quantity-box{max-height:calc(100dvh - 16px);padding:16px}.quantity-box #quantity-photo{height:clamp(128px,24vh,180px)}.quantity-stepper{grid-template-columns:minmax(0,1fr) 72px}.quantity-stepper input{min-height:108px;font-size:2.38rem}.quantity-stepper button{min-height:50px;font-size:1.82rem}.quantity-toast{bottom:12px}.dialog-actions .primary{font-size:1.06rem}}