*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0a0f;color:#e0e0e0;overflow:hidden;height:100vh}#app{display:flex;height:100vh}.sidebar{width:280px;background:#12121a;border-right:1px solid #2a2a3a;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.sidebar-header{padding:16px;border-bottom:1px solid #2a2a3a}.sidebar-header h1{font-size:16px;font-weight:600;color:#fff;margin-bottom:4px}.sidebar-header p{font-size:11px;color:#888;line-height:1.4}.sidebar-section{padding:12px 16px;border-bottom:1px solid #2a2a3a}.sidebar-section h2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#888;margin-bottom:8px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.tool-btn{padding:8px 10px;background:#1a1a28;border:1px solid #2a2a3a;border-radius:6px;color:#ccc;font-size:12px;cursor:pointer;transition:all .15s;text-align:center;font-family:inherit}.tool-btn:hover{background:#222238;border-color:#4a4a6a}.tool-btn.active{background:#1a2a4a;border-color:#48f;color:#48f}.tool-btn.action{grid-column:1 / -1;background:#1a3a1a;border-color:#2a5a2a;color:#4c4;font-weight:500}.tool-btn.action:hover{background:#242;border-color:#4a4}.tool-btn.danger{background:#3a1a1a;border-color:#5a2a2a;color:#c44}.tool-btn.danger:hover{background:#422;border-color:#a44}.setting-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.setting-row label{font-size:12px;color:#aaa}.setting-row input[type=range]{width:100px;accent-color:#4488ff}.setting-row .value{font-size:11px;color:#48f;min-width:30px;text-align:right}.checkbox-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.checkbox-row input[type=checkbox]{accent-color:#4488ff}.checkbox-row label{font-size:12px;color:#aaa}.stats-panel{padding:12px 16px;border-bottom:1px solid #2a2a3a}.stat-row{display:flex;justify-content:space-between;margin-bottom:4px}.stat-row .label{font-size:11px;color:#888}.stat-row .value{font-size:11px;color:#e0e0e0;font-weight:500}.stat-row .value.success{color:#4c4}.stat-row .value.fail{color:#c44}.help-section{padding:12px 16px;margin-top:auto;border-top:1px solid #2a2a3a}.help-section p{font-size:10px;color:#666;line-height:1.5;margin-bottom:4px}.help-section kbd{background:#1a1a28;border:1px solid #2a2a3a;border-radius:3px;padding:1px 4px;font-size:10px;color:#aaa}.net-legend{padding:4px 0}.net-item{display:flex;align-items:center;gap:8px;padding:2px 0}.net-color{width:12px;height:12px;border-radius:3px;flex-shrink:0}.net-name{font-size:11px;color:#ccc}.canvas-area{flex:1;position:relative;overflow:hidden}canvas{display:block;cursor:crosshair}.status-bar{position:absolute;bottom:0;left:0;right:0;height:28px;background:#12121aee;border-top:1px solid #2a2a3a;display:flex;align-items:center;padding:0 12px;gap:16px;font-size:11px;color:#888}.status-bar .coord{color:#aaa;font-family:SF Mono,Fira Code,monospace}.status-bar .mode{color:#48f;font-weight:500}.toast{position:absolute;top:12px;left:50%;transform:translate(-50%);background:#1a2a4acc;border:1px solid #4488ff44;border-radius:8px;padding:8px 16px;color:#8bf;font-size:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;opacity:0;transition:opacity .3s;z-index:100}.toast.visible{opacity:1}