*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Segoe UI,Meiryo,sans-serif;color:#1b2733}body{overflow:hidden}.topbar{height:44px;background:#17354f;color:#fff;display:flex;align-items:center;gap:4px;padding:5px 8px}.brand{font-size:19px;font-weight:700;margin-right:8px}.icon-btn,.tool-btn,.file-btn{width:32px;height:32px;border:1px solid #c9d3dd;border-radius:5px;background:#fff;color:#1b2733;display:grid;place-items:center;padding:6px;cursor:pointer}.icon-btn:hover,.tool-btn:hover,.file-btn:hover{background:#edf7fa}.icon-btn svg,.tool-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.file-btn input{display:none}.sep{width:1px;height:24px;background:#ffffff55;margin:0 3px}#zoomLabel{font-size:11px;margin-left:3px}.layout{height:calc(100% - 44px);display:grid;grid-template-columns:46px 1fr}.toolbar{padding:7px 6px;background:#f2f5f8;border-right:1px solid #c9d3dd;display:flex;flex-direction:column;gap:6px}.tool-btn{width:32px;height:32px;padding:5px}.tool-btn.active{background:#128ca3;color:#fff;border-color:#128ca3}.atom-label,.arrow-label{font:600 16px Arial}.split{position:relative;display:flex}.split>.icon-btn,.split>.tool-btn{padding-right:9px}.corner-btn{position:absolute;right:0;bottom:0;width:12px;height:12px;border:0;background:transparent;cursor:pointer}.corner-btn:after{content:"";position:absolute;right:2px;bottom:2px;border-left:5px solid transparent;border-top:5px solid transparent;border-right:5px solid #202b35}.popup{display:none;position:absolute;z-index:30;top:34px;left:0;min-width:130px;padding:5px;background:#fff;border:1px solid #c5d0da;border-radius:5px;box-shadow:0 5px 16px #0002}.side .popup{left:34px;top:0}.split.open>.popup{display:grid;gap:2px}.popup button{border:0;background:#fff;padding:6px 8px;text-align:left;white-space:nowrap;font:12px Segoe UI,Meiryo,sans-serif;cursor:pointer}.popup button:hover:not(:disabled){background:#e7f5f8}.popup button:disabled{color:#9da8b2}.atom-grid{grid-template-columns:repeat(3,38px);min-width:auto}.atom-grid button{text-align:center}main{position:relative;overflow:hidden}canvas{display:block;width:100%;height:100%;background:#fff;touch-action:none}#status{position:absolute;left:7px;bottom:7px;padding:4px 7px;background:#ffffffdd;border:1px solid #c9d3dd;border-radius:4px;font-size:11px}dialog{border:1px solid #aebbc7;border-radius:7px;box-shadow:0 8px 30px #0003}dialog form{display:grid;gap:10px;min-width:280px}dialog h3{margin:0}dialog label{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px}dialog input,dialog select{padding:5px;border:1px solid #b8c4cf;border-radius:4px}dialog menu{display:flex;justify-content:flex-end;gap:7px;margin:0;padding:0}dialog button{padding:5px 12px}

/* ChemPose v1.0.2 seamless 3D overlay */
.brand small{font-size:10px;font-weight:500;opacity:.78;margin-left:4px}
.view-btn{height:32px;min-width:35px;border:1px solid #c9d3dd;border-radius:5px;background:#fff;color:#1b2733;font:600 11px Segoe UI,Meiryo,sans-serif;cursor:pointer}
.view-btn:hover{background:#edf7fa}.view-btn.active{background:#128ca3;color:#fff;border-color:#128ca3}
#workspace{position:relative;overflow:hidden}
#viewport3d{position:absolute;z-index:20;min-width:180px;min-height:150px;overflow:hidden;background:transparent;border:0;border-radius:0;box-shadow:none}
#viewport3d[hidden]{display:none}
#canvas3d{position:absolute;inset:0;width:100%;height:100%;background:transparent;touch-action:none}
body.mode-3d-pick #canvas{cursor:crosshair}

/* ChemPose v1.0.6 patch: fullscreen and 3D molecule hover highlight */
.fullscreen-btn{margin-left:auto;flex:0 0 32px}
.fullscreen-btn svg{width:18px;height:18px}
#moleculeHighlightCanvas{position:absolute;inset:0;z-index:10;width:100%;height:100%;background:transparent;pointer-events:none;touch-action:none}
#viewport3d{z-index:20}

.tool-btn[data-tool="benzene"]{color:var(--fragment-color,#128ca3)}
.tool-btn[data-tool="benzene"].active{background:var(--fragment-color,#128ca3);border-color:var(--fragment-color,#128ca3);color:#fff}

/* v1.0.10: workspace-aligned stroke overlay; input remains on canvas3d. */
#poseStrokeCanvas{position:absolute;inset:0;z-index:21;background:transparent;pointer-events:none;width:100%;height:100%}