/* Crystal Lab additions on top of /symmetry/lab.css */
.cl-sl{min-width:150px}
.cl-sl input[type=range]{width:100%;margin:6px 0 0;accent-color:var(--sl-navy);height:20px}
.cl-sl .lab{display:block}
.sl-tools{flex-wrap:wrap!important}
.cl-calc{display:grid;gap:8px;background:var(--sl-bg);border-radius:10px;padding:10px 12px;margin-bottom:6px}
.cl-calc label{display:grid;gap:3px;font-size:12.5px;color:var(--sl-muted);font-weight:600}
.cl-calc input{border:1.5px solid var(--sl-line);border-radius:8px;padding:7px 9px;font:600 14px var(--sl-ui);color:var(--sl-ink);background:#fff}
.cl-calc .sl-btn2{justify-self:start}
.sl-row i{font:600 13px var(--sl-ui);color:var(--sl-navy)}
.sl-row{grid-template-columns:62px minmax(0,1fr)}
.cl-links a{display:inline-block;margin:2px 0;color:var(--sl-blue);font-weight:600}
@media (min-width:1181px){.sl-grid{min-height:440px}.sl-tools{flex-wrap:wrap!important;gap:4px 10px!important;padding:5px 8px!important}.sl-tools .sl-tg button{min-height:28px;font-size:11.5px;padding:0 7px}.sl-tg .lab{font-size:9.5px!important}.cl-sl input[type=range]{margin-top:2px;height:16px}}
.cl-sw{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.35);vertical-align:-1px;margin-right:4px}
.cl-ans{display:inline-block;margin-left:4px}.cl-ans summary{cursor:pointer;color:var(--sl-blue);font-weight:700;display:inline}.cl-ans[open] summary{color:var(--sl-muted)}
.sl-tabpane a[data-do]{color:var(--sl-blue);font-weight:600;text-decoration:underline}

/* symmetry-group viewer */
.sg-grid{height:auto!important;min-height:0!important;align-items:stretch}
.sg-side{position:static!important;max-height:560px}
.sg-box{height:460px;position:relative}
.sg-box canvas{position:absolute!important;inset:0;width:100%;height:100%!important;min-height:0!important}
.sg-info{position:static!important;max-height:560px}
.sg-els{padding:8px 10px;font-size:13px}
.sg-all{display:block;font-weight:700;margin-bottom:8px}
.sg-grp{margin:8px 0}.sg-grp b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sl-muted);margin-bottom:3px}
.sg-grp label{display:flex;align-items:center;gap:6px;padding:3px 0;cursor:pointer}
.sg-dot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.3)}
.sg-add{border:1.5px solid var(--sl-navy);background:#fff;color:var(--sl-navy);border-radius:8px;width:32px;height:30px;font-weight:800;cursor:pointer}
.sg-add[aria-pressed="true"]{background:var(--sl-navy);color:#fff}
.sg-model{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.sg-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sl-soft);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600}
.sg-ops{font-size:12.5px;max-height:220px;overflow:auto;background:var(--sl-bg);border-radius:10px;padding:8px 10px}
.sg-ops ol{margin:4px 0 0;padding-left:22px;columns:2}.sg-ops code{font-size:12px}
.sg-xyz{align-items:flex-end}.sg-xyz #sgXYZ{font-size:11px;color:var(--sl-muted);margin-left:8px}
#sgSetting{max-width:260px;font:600 13px var(--sl-ui);border:1px solid var(--sl-line);border-radius:8px;padding:3px 6px}
@media (max-width:1180px){.sg-grid{grid-template-columns:minmax(220px,30%) minmax(0,1fr)}.sg-info{grid-column:1 / -1}}
@media (max-width:820px){.sg-grid{grid-template-columns:minmax(0,1fr)}.sg-side{position:static!important;display:block!important;inset:auto}.sg-box{height:360px}}