:root{--ink:#243c35;--green:#275d49;--paper:#f7f6f1;--line:#dce2d9;--muted:#64766d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 "Microsoft YaHei",sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:22px 5%;background:#fff;border-bottom:1px solid var(--line);gap:20px}.brand{font-family:serif;font-size:26px;font-weight:bold;text-decoration:none;color:var(--ink)}.brand span{display:block;font:9px/1.5 sans-serif;letter-spacing:3px}nav{display:flex;gap:10px;flex-wrap:wrap}button,.button{border:1px solid var(--line);background:white;padding:10px 16px;border-radius:7px;cursor:pointer;color:var(--ink);font:inherit;text-decoration:none;display:inline-block}button:hover,.button:hover{border-color:var(--green);background:#edf3ee}button.active,.primary{background:var(--green);color:white;border-color:var(--green)}button:disabled{opacity:.5;cursor:wait}main{max-width:1450px;margin:auto;padding:0 5%}.hero{position:relative;padding:52px 0 48px;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--muted)}h1{font-family:serif;font-size:clamp(30px,4vw,52px);line-height:1.45;letter-spacing:2px;margin:18px 0}h2{font:600 25px/1.5 serif;margin:0 0 15px}h3{margin:12px 0}.hero p{color:var(--muted);letter-spacing:3px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.ribbon{position:absolute;right:2%;top:65px;display:flex;gap:9px;transform:rotate(-13deg);z-index:-1}.ribbon i{width:40px;height:210px;border-radius:80%;background:linear-gradient(90deg,#ffffff88,transparent,#ffffff66),#9cac7c}.ribbon i:nth-child(2){background-color:#668a70}.ribbon i:nth-child(3){background-color:#254e42}.ribbon i:nth-child(4){background-color:#dcc6ae}.ribbon i:nth-child(5){background-color:#c48e82}.ribbon i:nth-child(6){background-color:#a65c60}.ribbon i:nth-child(7){background-color:#713f49}#notice{border-block:1px solid var(--line);padding:13px 0;color:var(--muted);font-size:12px}#content{padding:30px 0 70px;min-height:380px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}input,select,textarea{border:1px solid #cbd4c9;background:#fff;border-radius:6px;padding:10px;color:var(--ink);font:inherit;max-width:100%}textarea{width:100%;min-height:75px}label{display:block;margin:12px 0;font-size:13px}label input,label select{display:block;width:100%;margin-top:4px}input[type=checkbox]{width:auto;display:inline}input[type=color]{height:43px}small,.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:13px}.swatch{background:#fff;border:1px solid var(--line);padding:8px;border-radius:10px;position:relative}.swatch.selected{outline:2px solid var(--green)}.paint{width:100%;height:90px;border:0;border-radius:6px}.swatch strong{display:block;margin:8px 0 0}.swatch small{font-size:11px}.swatch .add{position:absolute;right:13px;bottom:14px;padding:0 7px}.empty{padding:55px 25px;text-align:center;border:1px dashed #c6d1c6;border-radius:10px;background:#ffffff88}.panel{background:white;border:1px solid var(--line);border-radius:12px;padding:24px;margin:16px 0}.stats{display:flex;gap:14px;flex-wrap:wrap}.stat{background:#eef2e9;padding:15px 22px;border-radius:8px}.stat b{display:block;font-size:26px}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}.family-image{width:100%;image-rendering:auto;border:1px solid var(--line)}canvas{display:block;width:100%;touch-action:none;border:1px solid var(--line);cursor:crosshair}.family-nav{max-height:170px;overflow:auto;display:flex;flex-wrap:wrap;gap:6px}.family-nav button{padding:5px 9px;font-size:12px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}td,th{text-align:left;border-bottom:1px solid var(--line);padding:10px;white-space:nowrap}.dot{display:inline-block;width:22px;height:22px;border-radius:4px;vertical-align:middle;margin-right:8px}.tag{background:#edf2e9;border-radius:4px;padding:3px 7px;font-size:11px}.warning{color:#956120;background:#faf2df;padding:12px;border-radius:7px}.danger{color:#a13e3e}.compare{display:flex;min-height:180px;overflow:auto}.compare>div{flex:1;min-width:85px;padding-top:160px;text-align:center}dialog{border:0;border-radius:14px;padding:28px;max-width:760px;width:90%;max-height:90vh;overflow:auto;box-shadow:0 20px 80px #0003}dialog::backdrop{background:#17281e77}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#233c34;color:white;padding:12px 25px;border-radius:8px;display:none;z-index:20}footer{border-top:1px solid var(--line);padding:24px 5%;color:var(--muted);font-size:12px}.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inline>*{flex:1}details{margin:18px 0}summary{cursor:pointer;font-weight:bold}.scheme{display:flex;gap:4px;margin:10px 0}.scheme i{width:38px;height:38px;border-radius:4px}@media(max-width:750px){header{align-items:flex-start;flex-direction:column;padding:15px 5%}nav{gap:5px}nav button{font-size:12px;padding:8px}.hero{padding:30px 0}.ribbon{opacity:.22;right:-50px;top:40px}.split{grid-template-columns:1fr}.panel{padding:16px}.grid{grid-template-columns:repeat(3,1fr);gap:8px}.paint{height:75px}.swatch .add{position:static;width:100%;margin-top:5px}h1{font-size:32px}.hero-actions button{font-size:12px}.stat{flex:1;padding:10px}.stat b{font-size:22px}}
.product-link{display:block;font-size:11px;margin-top:8px;padding:7px;text-align:center}.swatch:has(.product-link) .add{position:static;margin-top:6px}
.purchase-link{display:block;padding:7px 10px;font-size:12px;margin:4px 0;white-space:nowrap;background:#edf3ee;border-color:#b4cabc}
.image-viewport{max-height:65vh;overflow:auto;background:#e8e5df;border:1px solid #ccc;border-radius:12px}.image-viewport canvas{display:block;max-width:none;touch-action:none}.toolbar label{display:inline-flex;align-items:center;gap:6px}.toolbar input[type=range]{width:95px}#shopping input{width:80px}#match-results .panel{display:inline-block;margin:6px;padding:12px}#status-image{min-height:24px}@media(max-width:650px){.toolbar{gap:8px}.toolbar button{min-height:44px}.image-viewport{max-height:55vh}header{flex-wrap:wrap}nav{flex-wrap:wrap}}
.customer-actions{margin-top:20px}.customer-compare{display:flex;gap:16px;overflow-x:auto;padding:12px 0;max-width:85vw}.customer-compare article{flex:0 0 160px;text-align:center}.compare-color{height:190px;border-radius:12px;margin-bottom:12px;border:1px solid #0001}.customer-compare p{margin:6px 0}#customer-scheme-name{width:100%;margin:10px 0 18px}details>summary{cursor:pointer;color:#697976;margin:16px 0}

/* Keep modal actions visible while its content scrolls. */
#modal{width:90%;max-width:680px;max-height:85vh;padding:22px;overflow:hidden}
#modal[open]{display:flex;flex-direction:column;gap:14px}
#modal-body{min-height:0;overflow:auto;overscroll-behavior:contain}
#close-modal{flex-shrink:0;align-self:flex-end}
#modal-body>.family-image{display:block;width:min(100%,420px);height:auto;aspect-ratio:1 / 1;max-height:none;object-fit:contain;margin:0 auto}
#modal-body>.detail-swatch{height:120px;border-radius:8px;flex-shrink:0}

.current-color{display:inline-flex;align-items:center;justify-content:center;width:150px;height:44px;border:1px solid #cbd4c9;border-radius:6px;color:var(--muted);background:transparent}.extracted-color{display:inline-flex;align-items:center;gap:10px}.extracted-swatch{display:inline-block;width:52px;height:32px;border:1px solid #0002;border-radius:5px;pointer-events:none}.extracted-color>span{pointer-events:none}

.color-picker{position:relative;margin:0;min-width:160px}.color-picker>summary{border:1px solid #cbd4c9;border-radius:6px;background:white;padding:10px;font-weight:normal}.picker-swatch{display:inline-block;width:38px;height:22px;vertical-align:middle;border:1px solid #0002;border-radius:4px;margin-left:10px}.color-picker-options{position:absolute;top:100%;left:0;min-width:100%;max-height:270px;overflow:auto;background:white;border:1px solid #cbd4c9;border-radius:6px;z-index:10;box-shadow:0 6px 16px #0002}.color-picker-options button{display:block;width:100%;text-align:left;border:0;border-radius:0;white-space:nowrap}

#modal-footer{display:flex;align-items:center;gap:12px;flex-shrink:0;width:100%}#modal-footer>.detail-actions{display:flex;align-items:center;gap:10px;flex:1;min-width:0;margin:0;flex-wrap:wrap}#modal-footer .product-link{margin-top:0}#modal-footer>#close-modal{margin-left:auto;align-self:center}

nav [data-page="admin"][hidden]{display:none!important}