:root{--ink:#1d2420;--muted:#747c77;--line:#e2e7e3;--paper:#fff;--bg:#f5f7f5;--accent:#245f4c;--soft:#edf5f1}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Microsoft YaHei","Segoe UI",sans-serif}
button,input,select{font:inherit}
.page{width:min(1480px,calc(100% - 40px));margin:0 auto;padding:30px 0 48px}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.page-header p{margin:7px 0 0;color:var(--muted);font-size:12px}
.page-header h1{margin:0;font-size:23px;font-weight:680;letter-spacing:-.02em}
.page-header>span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
.page-header i{width:7px;height:7px;border-radius:50%;background:#64a487}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px;box-shadow:0 1px 2px #1b2b2310}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.panel-title>div{display:flex;align-items:center;gap:9px}.panel-title>div>span{display:grid;place-items:center;width:23px;height:23px;border-radius:6px;background:var(--soft);color:var(--accent);font:700 10px ui-monospace,monospace}.panel-title h2{font-size:15px;margin:0}.panel-title small{color:var(--muted);font-size:11px}.panel-title b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#f0f2f0;color:var(--muted);font-size:10px}
.global-row{display:grid;grid-template-columns:minmax(270px,1.35fr) minmax(120px,.65fr) minmax(190px,1fr) repeat(2,minmax(185px,1fr));gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
label{display:grid;gap:7px;font-size:11px;font-weight:600;color:#4c544f}
.global-row input,.global-row select,.variant-row input,.variant-row select{width:100%;height:42px;border:1px solid var(--line);border-radius:7px;padding:0 11px;background:#fff;color:var(--ink);outline:none}
.global-row input:focus,.global-row select:focus,.variant-row input:focus,.variant-row select:focus{border-color:#82a495;box-shadow:0 0 0 3px #edf4f1}
.global-row input[readonly],input:disabled{background:#f5f6f4;color:#7b827e}
.global-accessories{display:contents}
.selection-area{display:grid;grid-template-columns:255px minmax(0,1fr);gap:22px;padding-top:20px}
.subhead{height:30px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.subhead strong{font-size:12px}.subhead strong b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;padding:0 6px;border-radius:10px;background:var(--soft);color:var(--accent);font-size:10px}.subhead small{color:var(--muted);font-size:10px}.subhead span{display:flex;gap:5px}
.subhead button,.panel-title button{border:1px solid var(--line);background:#fff;color:var(--accent);border-radius:6px;padding:5px 9px;font-size:10px;cursor:pointer}
.color-options{display:flex;flex-direction:column;gap:6px;max-height:430px;overflow:auto;padding-right:5px}
.color-choice{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-height:40px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:#f7f9f7;cursor:pointer;font-size:11px;transition:.15s ease}
.color-choice:has(input:checked){border-color:#7da291;background:var(--soft)}
.color-choice input{accent-color:var(--accent)}.color-choice em{font:10px ui-monospace,monospace;color:var(--muted)}
.variant-rows{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow:auto}
.variant-row{display:grid;grid-template-columns:110px minmax(170px,1fr) repeat(2,minmax(180px,1fr));gap:9px;align-items:end;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fdfefd}
.variant-color{height:42px;display:flex;flex-direction:column;justify-content:center;gap:3px}.variant-color strong{font-size:11px}.variant-color code{font-size:10px;color:var(--muted)}
.results{min-height:160px}.result-list{display:flex;flex-direction:column;gap:7px}
.result-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#f8faf8}
.result-row span{font-size:11px;color:var(--muted)}.result-row code{font-size:14px;color:#244d3f;word-break:break-all}
.copy-one{border:0;background:transparent;color:var(--accent);font-size:10px;cursor:pointer;padding:5px 7px}
.empty{margin:0;padding:28px;text-align:center;color:#9aa09c;font-size:12px;border:1px dashed var(--line);border-radius:8px}.error{color:#b84a3e}
.message{margin:10px 0 0;min-height:16px;color:var(--accent);font-size:11px}
@media(max-width:1180px){.global-row{grid-template-columns:repeat(3,1fr)}.global-accessories{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,1fr);gap:12px}.variant-row{grid-template-columns:110px repeat(3,minmax(150px,1fr))}}
@media(max-width:820px){.page{width:min(100% - 24px,1500px)}.selection-area{grid-template-columns:1fr}.color-options{max-height:260px}.variant-row{grid-template-columns:1fr 1fr}.global-row{grid-template-columns:1fr}.global-accessories{grid-template-columns:1fr}.result-row{grid-template-columns:1fr}.panel{padding:16px}}