.cranio-viewer {font-family:Arial,sans-serif;color:#dceaf1;background:#102636;border:1px solid #28475a;border-radius:14px;overflow:hidden}
.cranio-toolbar {display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:10px 14px;font-size:13px;background:#163247}
.cranio-toolbar label {white-space:nowrap}
.cranio-toolbar input {accent-color:#32bdac}
.cranio-toolbar span {opacity:.78}
.cranio-stage {height:clamp(280px,42vh,480px);position:relative;overflow:hidden;touch-action:none}
.cranio-stage canvas {display:block;width:100%;height:100%;cursor:crosshair}
.cranio-markers {position:absolute;inset:0;pointer-events:none}
.cranio-marker {position:absolute;transform:translate(-50%,-50%);background:#fbac42;border:2px solid #fff;border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 2px #253d4c}
.cranio-marker.selected {background:#f45656;width:15px;height:15px}
.cranio-marker.confirmed {background:#40d7a4}
.cranio-marker.selected {border:3px solid white;box-shadow:0 0 0 3px #fbac42}
.cranio-toolbar button{font:inherit;color:#cde1e8;background:#203f51;border:1px solid #3c5e71;border-radius:6px;padding:5px 9px;cursor:pointer}
.cranio-toolbar button:hover,.cranio-toolbar button:focus-visible{background:#346176;outline:2px solid #46c7b2}
.cranio-toolbar{gap:7px}
.cranio-toolbar span{margin-left:auto;font-size:11px}
@media(max-width:800px){.cranio-stage{height:400px}}
.cranio-marker.reference {background:#2cc8d2;width:9px;height:9px;border-width:1px}
.cranio-marker.reference span {color:#bdf8fb}
.cranio-marker span {position:absolute;left:15px;top:-4px;color:white;background:#183246d9;border-radius:3px;padding:2px 5px;font-size:11px;white-space:nowrap}
.cranio-caption {padding:8px 14px;font-size:12px;background:#163247;color:#b7d4df}