.board-viewer-root{position:relative;width:100%;height:100%;background:#e5e7eb;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.viewer-header{position:absolute;top:0;left:0;right:0;z-index:100;height:52px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:#f9fafbeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #e5e7eb;box-sizing:border-box}.viewer-header-left{display:flex;align-items:baseline;gap:10px;min-width:0}.viewer-header-title{font-size:13px;font-weight:650;letter-spacing:.2px;margin:0;color:#0f172a;white-space:nowrap}.viewer-header-sub{font-size:12px;margin:0;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}.viewer-header-right{display:flex;align-items:center;gap:10px}.controls{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:#0f172a}.segment{display:inline-flex;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff}.segment input{display:none}.segment label{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#334155}.segment input:checked+label{background:#0f172a;color:#fff}.toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;color:#334155}.toggle input{margin:0}.select{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#334155}.select select{border:none;outline:none;font-size:12px;background:transparent;color:inherit}.btn{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:12px;color:#0f172a}.btn:hover{background:#f8fafc}.btn-primary{border-color:#0f172a;background:#0f172a;color:#fff}.btn-primary:hover{background:#111c33}.btn svg{width:16px;height:16px}.viewer-body{position:absolute;inset:52px 0 0;min-height:0}#board-viewport{position:absolute;inset:0;overflow:hidden;background:#e5e7eb;cursor:grab}#board-viewport.grabbing{cursor:grabbing}#board-content{will-change:transform;transform:translateZ(0);transform-origin:0 0;position:absolute;top:0;left:0}#board-stage{position:relative;display:block;width:800px;height:600px;background:#064e3b}.layer-frame{position:absolute;inset:0}#boardClip img.layer,.layer-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}#layer-bottom-copper{z-index:10}#layer-bottom-mask{z-index:20}#layer-bottom-silk{z-index:30}#layer-top-copper{z-index:40}#layer-top-mask{z-index:50}#layer-top-silk{z-index:60}#layer-drills{z-index:70}#layer-vias{z-index:80}#grid-canvas{position:absolute;inset:0;pointer-events:none;z-index:3;display:none}.board-viewer-hint{position:absolute;bottom:8px;right:10px;font-size:10px;color:#374151;background:#ffffffe6;padding:4px 6px;border-radius:999px;border:1px solid #e5e7eb;pointer-events:none}.layer-dropdown{position:relative}.layer-dropdown .btn.active{background:#f1f5f9;border-color:#94a3b8}.layer-panel{position:absolute;top:calc(100% + 6px);right:0;min-width:196px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 4px 16px #0000001a;padding:4px 0;z-index:200}.layer-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:12px;color:#334155;white-space:nowrap}.layer-item:hover{background:#f8fafc}.layer-item span:last-of-type{flex:1}.layer-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0}.layer-item input[type=checkbox]{margin:0 0 0 auto;pointer-events:none;accent-color:#0f172a}.board-clip{position:relative;width:100%;height:100%;-webkit-mask-image:var(--board-mask-url);mask-image:var(--board-mask-url);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-size:100% 100%;mask-size:100% 100%}