*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f5f5f5;color:#333}.container{max-width:1800px;margin:0 auto;padding:10px 20px;height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{background:#fff;padding:12px 20px;border-radius:8px;margin-bottom:10px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;gap:10px;flex-shrink:0}.header-top{display:flex;justify-content:space-between;align-items:center}h1{font-size:24px;font-weight:600;margin:0}.nav-menu{display:flex;gap:5px;align-items:center}.nav-link{padding:8px 16px;text-decoration:none;color:#555;border-radius:4px;font-size:14px;font-weight:500;transition:all .2s;border:1px solid transparent}.nav-link:hover{background:#f0f0f0;color:#333}.nav-link.active{background:#007bff;color:#fff;border-color:#007bff}.file-upload-control{display:flex;flex-direction:column;gap:8px;padding-bottom:15px;border-bottom:1px solid #e0e0e0;margin-bottom:15px}.btn-file{width:100%;text-align:center}.load-sample-link{color:#007bff;font-size:12px;text-align:center;text-decoration:none;cursor:pointer}.load-sample-link:hover{text-decoration:underline}#file-name{color:#666;font-size:12px;text-align:center;word-wrap:break-word;line-height:1.3}#file-error{color:#d32f2f;font-size:12px;text-align:center;word-wrap:break-word;line-height:1.3}.btn{background:#007bff;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s}.btn:hover{background:#0056b3}main{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.viewer-container{display:grid;grid-template-columns:1fr 300px;gap:10px;flex:1;min-height:0;grid-template-rows:1fr auto}.canvas-wrapper{background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 4px #0000001a;overflow:auto;min-height:0}#ecg-canvas{display:block;max-width:100%;height:auto}.controls-panel{background:#fff;border-radius:8px;padding:15px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}.control-group{display:flex;flex-direction:row;align-items:center;gap:0;border:1px solid #ccc;border-radius:4px;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s}.control-group:focus-within{border-color:#5897fb;box-shadow:0 0 0 2px #5897fb33}.control-group label{font-size:13px;font-weight:500;color:#444;padding:7px 10px;background:#f0f0f0;border-right:1px solid #ccc;white-space:nowrap;user-select:none}.control-group select{padding:7px 28px 7px 10px;border:none;border-radius:0;font-size:13px;background:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:10px 6px;min-width:100px;outline:none;flex:1}.control-group select:hover{background-color:#fafafa}.export-buttons{display:flex;flex-direction:column;gap:10px;margin-top:10px}.info-panel{background:#fff;border-radius:8px;padding:10px 20px;box-shadow:0 2px 4px #0000001a;grid-column:1 / -1;flex-shrink:0}.info-panel h3{font-size:18px;margin-bottom:15px;color:#333}#patient-info{font-size:14px;line-height:1.6}#patient-info p{margin-bottom:8px}#patient-info .placeholder{color:#999;font-style:italic}#patient-info strong{color:#555}.derived-container{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.derived-canvas-wrapper{background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 4px #0000001a;overflow:auto;flex:1;min-height:0}#derived-canvas{display:block;max-width:100%;height:auto}.derived-controls{background:#fff;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:15px;flex-shrink:0}.derived-controls .control-group{gap:0}.derived-info{background:#fff;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000001a;font-size:14px;line-height:1.6;flex-shrink:0}.derived-info .placeholder{color:#999;font-style:italic}.derived-info .ref-title{font-weight:600;margin-bottom:5px}.derived-info .ref-text{color:#555}.singlebeat-container{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.singlebeat-top{display:flex;gap:15px;align-items:stretch;flex:1;min-height:0}.singlebeat-canvas-wrapper{background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 4px #0000001a;overflow:auto;text-align:center;flex:3;min-width:0;min-height:0}.singlebeat-canvas-stack{position:relative;display:inline-block}#singlebeat-canvas{display:block}#singlebeat-caliper-canvas{position:absolute;top:0;left:0;cursor:default}.singlebeat-measurements{background:#fff;border-radius:8px;padding:15px;box-shadow:0 2px 4px #0000001a;flex:1;min-width:180px;overflow-y:auto;min-height:0}.singlebeat-measurements h4{margin:0 0 10px;font-size:14px;color:#333;border-bottom:1px solid #ddd;padding-bottom:6px}.singlebeat-measurements h4:not(:first-child){margin-top:18px}.meas-table{width:100%;border-collapse:collapse;font-size:14px}.meas-table td{padding:4px 0}.meas-table td:first-child{color:#555;padding-right:12px}.meas-table td:last-child{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}.meas-current{font-size:20px;font-weight:700;text-align:center;padding:8px 0;color:#0064c8e6;font-variant-numeric:tabular-nums}.meas-buttons{display:flex;flex-direction:column;gap:6px;margin-top:10px}.btn-meas{padding:6px 10px;font-size:13px;border:1px solid #ccc;border-radius:4px;background:#f8f8f8;cursor:pointer;transition:background .15s;text-align:left}.btn-meas:hover{background:#e8e8e8}.singlebeat-controls{background:#fff;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:25px;flex-shrink:0}.singlebeat-controls .control-group{flex:1;gap:0}.control-group input[type=range]{flex:1;min-width:120px;padding:0 10px;height:32px;border:none;outline:none}.singlebeat-info{background:#fff;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000001a;font-size:14px;line-height:1.6;flex-shrink:0}.singlebeat-info .placeholder{color:#999;font-style:italic}.localfreq-container{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.localfreq-canvas-wrapper{background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 4px #0000001a;overflow:auto;text-align:center;flex:1;min-height:0}#localfreq-canvas{display:block}.localfreq-controls{background:#fff;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:25px;flex-shrink:0}.localfreq-controls .control-group{gap:0}.localfreq-info{background:#fff;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000001a;font-size:14px;line-height:1.6;flex-shrink:0}.localfreq-info .placeholder{color:#999;font-style:italic}#page-vcg.page.active{overflow-y:auto}.vcg-container{display:flex;flex-direction:column;gap:15px}.vcg-controls-bar{background:#fff;border-radius:8px;padding:12px 20px;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:20px}.vcg-controls-bar .control-group{gap:0}.vcg-qrs-info{font-weight:600;font-size:14px;margin-left:auto}.vcg-signal-section{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.vcg-collapse-btn{display:block;width:100%;padding:8px 20px;background:#f0f0f0;border:none;border-bottom:1px solid #ddd;cursor:pointer;font-size:13px;font-weight:600;text-align:left;color:#444;transition:background .15s}.vcg-collapse-btn:hover{background:#e4e4e4}.vcg-signal-wrapper{padding:15px;overflow:auto;text-align:center;transition:max-height .3s ease,padding .3s ease,opacity .3s ease;max-height:500px;opacity:1}.vcg-signal-wrapper.collapsed{max-height:0;padding:0 15px;opacity:0;overflow:hidden}.vcg-signal-stack{position:relative;display:inline-block}.vcg-signal-stack canvas:last-child{position:absolute;top:0;left:0;cursor:default}.vcg-loops-row{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.vcg-loop-wrapper{background:#fff;border-radius:8px;padding:5px;box-shadow:0 2px 4px #0000001a;flex:1;max-width:380px;text-align:center}.vcg-loop-stack{position:relative;display:inline-block}.vcg-loop-stack canvas:last-child{position:absolute;top:0;left:0;pointer-events:none}.vcg-3d-wrapper{position:relative}.vcg-3d-container{width:350px;height:350px}.vcg-3d-container canvas{display:block}.vcg-3d-reset{position:absolute;top:8px;right:8px;width:28px;height:28px;border:1px solid #ccc;border-radius:4px;background:#ffffffd9;font-size:16px;cursor:pointer;line-height:1;z-index:2;padding:0}.vcg-3d-reset:hover{background:#e0e0e0}#page-about.page.active{overflow-y:auto}.about-container{max-width:800px;margin:0 auto;padding:20px 0}.about-content{background:#fff;border-radius:8px;padding:30px 40px;box-shadow:0 2px 4px #0000001a;line-height:1.8;font-size:15px;color:#333}.about-content h2{font-size:20px;color:#222;margin:24px 0 12px}.about-content h2:first-child{margin-top:0}.about-content p{margin-bottom:14px}.about-content ul{margin:10px 0 14px 24px}.about-content li{margin-bottom:8px}.about-content a{color:#2563eb;text-decoration:none}.about-content a:hover{text-decoration:underline}.page{display:none}.page.active{display:flex;flex-direction:column;height:100%;min-height:0}.placeholder-page{background:#fff;border-radius:8px;padding:60px 20px;box-shadow:0 2px 4px #0000001a;text-align:center}.placeholder-page h2{font-size:32px;color:#333;margin-bottom:15px}.placeholder-page p{font-size:18px;color:#999}@media (max-width: 1200px){.viewer-container{grid-template-columns:1fr 200px}.vcg-loop-wrapper{flex:1 1 calc(50% - 15px);max-width:calc(50% - 8px);min-width:250px}}@media (max-width: 900px){.viewer-container{grid-template-columns:1fr;grid-template-rows:1fr auto auto}.controls-panel{max-height:150px;flex-direction:row;flex-wrap:wrap;gap:10px;padding:10px 15px}.controls-panel .control-group{flex:0 0 auto}.file-upload-control{flex-direction:row;align-items:center;padding-bottom:0;border-bottom:none;margin-bottom:0}.export-buttons{flex-direction:row;margin-top:0}}@media (max-width: 768px){.header-top{flex-direction:column;align-items:flex-start;gap:10px}.nav-menu{width:100%;flex-wrap:wrap}.canvas-wrapper{padding:5px}.container{padding:5px 10px}.vcg-loop-wrapper{flex:1 1 100%;max-width:100%}}