.hk-config{color:#183128;font:16px/1.5 system-ui,sans-serif;max-width:760px;clear:both;margin:20px 0}.hk-config *{box-sizing:border-box}.hk-config h3{font:700 24px/1.2 system-ui;margin:0 0 8px}.hk-muted{color:#53685b}.hk-config button,.hk-config select,.hk-config input{font:inherit;min-height:44px;border:1px solid #c8d7cf;border-radius:8px;background:#fff;color:#183128;padding:9px 12px;max-width:100%}.hk-config button{cursor:pointer;line-height:1.25}.hk-config button:focus-visible,.hk-config input:focus-visible,.hk-config select:focus-visible{outline:3px solid #2671d5;outline-offset:2px}.hk-config button:disabled{opacity:.5;cursor:not-allowed}.hk-config [hidden]{display:none!important}.hk-config button[aria-pressed=true]{border:2px solid #078b35;background:#e9f8ee;color:#075a25}.hk-modes{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}.hk-modes button{flex:1}.hk-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.hk-photo{display:grid;gap:8px;justify-items:center}.hk-gallery img{width:100%;height:105px;object-fit:contain}.hk-placeholder{display:grid;place-items:center;aspect-ratio:1;width:75px;border-radius:10px;background:linear-gradient(135deg,#ddd3ed,#bfead5,#d6e5f3);color:#294839;font:bold 32px system-ui}.hk-placeholder.hk-B{background:linear-gradient(135deg,#d6d8db,#e1d2bb,#d2e6ed)}.hk-placeholder.hk-C{background:linear-gradient(135deg,#8996b4,#ddd3ed,#bed9d3)}.hk-row{min-width:0;border:1px solid #dae4dd;border-radius:12px;padding:16px;margin:16px 0;background:#f8fbf9}.hk-row legend{padding:0 6px;font-weight:600}.hk-grid{display:flex;gap:12px}.hk-grid label{display:grid;gap:6px;min-width:0;flex:1}.hk-grid label:has(input){flex:0 0 80px}.hk-grid input,.hk-grid select{width:100%}.hk-patterns{display:flex;gap:10px;margin-top:14px}.hk-patterns button{display:flex;align-items:center;gap:10px;flex:1;justify-content:center}.hk-patterns img,.hk-patterns .hk-placeholder{width:32px;height:32px;object-fit:contain;font-size:18px;border-radius:4px}.hk-config .hk-remove{margin-top:10px;font-size:14px;color:#81382a}.hk-status{padding:12px;background:#fff5df;border-radius:8px}.hk-status.hk-ok{background:#e9f8ee;color:#075a25}.hk-summary{border-top:1px solid #dce5df;padding-top:12px}.hk-summary p{margin:6px 0;font-size:14px;overflow-wrap:anywhere}.hk-dialog{border:0;border-radius:12px;max-width:min(90vw,640px);padding:24px}.hk-dialog::backdrop{background:#0008}.hk-dialog img{display:block;max-width:100%;max-height:65vh;margin:20px auto;object-fit:contain}.hk-dialog .hk-large{width:200px;margin:20px auto}.hk-dialog button{margin-bottom:12px}@media(max-width:480px){.hk-config{font-size:15px}.hk-gallery{gap:6px}.hk-photo{font-size:12px!important;padding:8px!important}.hk-grid{flex-wrap:wrap}.hk-grid label{flex-basis:100%}.hk-grid label:has(input){flex-basis:100%}.hk-row{padding:12px}.hk-patterns{gap:6px}.hk-patterns button{padding:8px}.hk-gallery img{height:75px}.hk-modes{flex-direction:column}.hk-config select,.hk-config input{font-size:16px}}

.hk-config button[type="button"]{background:#fff!important;color:#183128!important;border:1px solid #c8d7cf!important;border-radius:8px!important;box-shadow:none!important;text-transform:none!important;font-family:system-ui,sans-serif!important}
.hk-config button[type="button"][aria-pressed="true"]{background:#e9f8ee!important;color:#075a25!important;border:2px solid #078b35!important;box-shadow:0 0 0 1px #078b35!important}
.hk-config button[type="button"][aria-pressed="true"]::after{content:"✓";font-weight:700;margin-left:6px}
.hk-config button.hk-remove{color:#81382a!important;margin-top:10px!important}

/* Larger pattern previews, with labels below the image. */
.hk-gallery img{height:180px}
.hk-patterns button{position:relative;flex-direction:column;min-width:0;gap:8px;padding:12px}
.hk-patterns img,.hk-patterns .hk-placeholder{width:88px;height:88px;max-width:100%;border-radius:6px}
.hk-config .hk-patterns button[aria-pressed="true"]::after{position:absolute;top:4px;right:7px;margin:0}
@media(max-width:480px){.hk-gallery img{height:100px}.hk-patterns button{padding:8px 5px}.hk-patterns img,.hk-patterns .hk-placeholder{width:64px;height:64px}}
.hk-photo{min-width:0;grid-template-columns:minmax(0,1fr)}.hk-gallery img{max-width:100%}
.hk-pattern-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.hk-pattern-card>button{width:100%}.hk-pattern-label{margin:16px 0 8px;font-weight:600}.hk-patterns{margin-top:0}.hk-config button.hk-preview{padding:6px;font-size:13px;min-height:36px;flex:none}