.sh-color-dialog{position:fixed;inset:auto;margin:0;padding:12px;width:310px;max-width:calc(100vw - 24px);color:#eaf5fa;background:#132530;border:1px solid #35515f;border-radius:14px;box-shadow:0 15px 65px #0009;font:13px/1.4 system-ui;z-index:2147483000}.sh-color-dialog::backdrop{background:#0003}.sh-color-widget{display:grid;grid-template-columns:minmax(0,220px) 56px;gap:8px;position:relative;width:100%;max-width:284px}.sh-color-tools{grid-column:1;display:flex;align-items:center;gap:8px}.sh-color-widget button{font:inherit;color:inherit;border:1px solid #45606d;border-radius:6px;background:#203640;cursor:pointer;padding:5px 8px}.sh-color-widget button:focus-visible,.sh-color-widget input:focus-visible{outline:2px solid #00c3de;outline-offset:2px}.sh-color-preview{width:19px;height:19px;border-radius:50%;border:1px solid #ffffff80}.sh-color-close{margin-left:auto}.sh-color-wheel{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;grid-column:1;grid-row:2}.sh-color-recent{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(2,24px);gap:3px;align-content:start;padding-top:3px}.sh-color-recent button{width:24px;height:24px;border-radius:3px;padding:0;border-color:#ffffff45}.sh-color-recent .sh-color-empty{grid-column:1 / -1;font-size:10px;opacity:.7;overflow-wrap:anywhere}.sh-color-hex{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:5px;align-items:center}.sh-color-widget .sh-color-hex input{box-sizing:border-box;width:94px;min-width:0;background:#07131b;color:#fff;padding:5px 7px;border:1px solid #45606d;border-radius:5px;font:13px ui-monospace,monospace}.sh-color-note{grid-column:1 / -1;font-size:11px;opacity:.85;min-height:0}.sh-color-widget canvas:focus-visible{outline:2px solid #00c3de;border-radius:50%}.sh-color-screen{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;padding:0;z-index:2147483647;background:#000;display:grid;place-items:center;cursor:crosshair}.sh-color-screen canvas{max-width:100%;max-height:100%;object-fit:contain}.sh-color-screen span{position:absolute;top:12px;left:12px;padding:8px 12px;background:#07131bdd;color:#fff;border-radius:8px;font:14px system-ui;pointer-events:none}

/* The widget also appears inline; a dialog must keep viewport positioning. */
dialog.sh-color-dialog{position:fixed;box-sizing:border-box;max-height:calc(100dvh - 16px);overflow:auto}
.sh-color-saved{grid-column:1 / -1;border-top:1px solid #35515f;padding-top:8px}
.sh-color-saved-head{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:6px;font-size:11px}
.sh-color-widget .sh-color-store{font-size:10px;padding:3px 5px}
.sh-color-store[aria-pressed="true"]{outline:2px solid #00c3de}
.sh-color-slots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.sh-color-widget .sh-color-slot{width:100%;height:17px;min-width:0;border-radius:2px;padding:0;font-size:11px;line-height:1;border-color:#ffffff50}
.sh-color-slot.empty{background:repeating-conic-gradient(#263741 0% 25%,#172630 0% 50%) 50%/8px 8px}

dialog.sh-color-dialog:not([open]){display:none}

.sh-color-saved-hint{font-size:10px;color:#a8c0cc;line-height:1.5;margin-top:5px}