@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";@charset "UTF-8";:root{--color-background: #ffffff;--color-foreground: #000000;--color-accent: #6366f1;--color-accent-light: #a5b4fc;--color-accent-hover: #4f46e5;--color-border: #e2e8f0;--color-light-grey: #f8fafc;--color-mid-grey: #94a3b8;--color-dark-grey: #475569;--color-error: #ef4444;--color-error-light: #fee2e2;--color-success: #10b981;--color-success-light: #d1fae5;--color-warning: #f59e0b;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--transition: all .2s ease}html.dark-theme{--color-background: #1e1e2e;--color-foreground: #ffffff;--color-accent: #6366f1;--color-accent-light: #818cf8;--color-accent-hover: #4f46e5;--color-border: #3f3f5a;--color-light-grey: #2a2a3c;--color-mid-grey: #9399b2;--color-dark-grey: #d1d5db;--color-error: #ef4444;--color-error-light: #45303e;--color-success: #10b981;--color-success-light: #183d2d;--color-warning: #f59e0b;background-color:var(--color-background)!important;color:var(--color-foreground)!important}body.dark-theme{background-color:var(--color-background);color:var(--color-foreground)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--color-background);color:var(--color-foreground);font-size:15px;line-height:1.5;transition:background-color .3s ease,color .3s ease}.app{max-width:1280px;margin:0 auto;padding:0 24px;min-height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:16px 0;margin-bottom:20px;border-bottom:1px solid var(--color-border)}.header .title-area{display:flex;align-items:center;gap:12px}.header h1{font-size:1.5rem;font-weight:600;margin:0;background:linear-gradient(45deg,var(--color-accent),var(--color-accent-light));-webkit-background-clip:text;background-clip:text;color:transparent}.header .ci-badge{display:inline-flex;align-items:center;background-color:var(--color-success-light);color:var(--color-success);padding:3px 8px;border-radius:16px;font-size:.8rem;font-weight:500}.header .controls{display:flex;gap:12px;align-items:center}.theme-toggle{background:none;border:1px solid var(--color-border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-foreground);transition:var(--transition)}.theme-toggle:hover{background-color:var(--color-light-grey);transform:translateY(-2px)}.snapshots-container{display:flex;flex-direction:column;align-items:center;flex:1;gap:24px}.snapshot-navigation{display:flex;justify-content:center;gap:12px;margin-top:8px}.snapshot-navigation .btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-md);transition:all .2s ease;font-weight:500}.snapshot-navigation .btn .nav-icon{font-size:1.1em}.snapshot-navigation .btn.btn-primary{background-color:var(--color-accent);color:#fff}.snapshot-navigation .btn.btn-primary:hover:not(:disabled){background-color:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 3px 10px #6366f166}.snapshot-navigation .btn:not(.btn-primary){background-color:var(--color-background);border:1px solid var(--color-border);color:var(--color-foreground)}.snapshot-navigation .btn:not(.btn-primary):hover:not(:disabled){background-color:var(--color-light-grey);transform:translateY(-2px)}.btn{padding:8px 16px;background-color:var(--color-background);color:var(--color-foreground);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:.9rem;font-weight:500;transition:var(--transition)}.btn:hover:not(:disabled){background-color:var(--color-light-grey);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.btn-primary{background-color:var(--color-accent);color:#fff;border:none}.btn.btn-primary:hover:not(:disabled){background-color:var(--color-accent-hover);box-shadow:0 3px 10px #4f46e54d}.layout{display:grid;grid-template-columns:1fr;gap:24px;width:100%}@media (min-width: 900px){.layout{grid-template-columns:300px 1fr}}.snapshot-card{width:100%;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition)}.snapshot-card:hover{box-shadow:var(--shadow-md)}.snapshot-card .snapshot-header{padding:16px;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}.snapshot-card .snapshot-header .snapshot-title{font-weight:600;margin:0;font-size:1rem;word-break:break-word}.snapshot-card .snapshot-header .snapshot-status{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;padding:3px 10px;border-radius:16px;font-weight:500}.snapshot-card .snapshot-header .snapshot-status.passed{background-color:var(--color-success-light);color:var(--color-success)}.snapshot-card .snapshot-header .snapshot-status.failed{background-color:var(--color-error-light);color:var(--color-error)}.snapshot-card .snapshot-content{padding:16px}.snapshot-image-container{position:relative}.snapshot-image-container .image-controls{position:absolute;top:10px;right:10px;display:flex;gap:8px;opacity:0;transition:opacity .2s ease}.snapshot-image-container:hover .image-controls{opacity:1}.snapshot-image-container .image-control-btn{background:#000000b3;color:#fff;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background-color .2s ease}.snapshot-image-container .image-control-btn:hover{background:#000000e6}.snapshot-image{max-width:100%;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:zoom-in;transition:var(--transition);display:block}.snapshot-image.enlarged{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90vw;max-height:90vh;width:auto;height:auto;z-index:1000;box-shadow:var(--shadow-lg);cursor:zoom-out;object-fit:contain}.comparison-view{display:flex;flex-direction:column;gap:16px;width:100%}.comparison-view .comparison-title{font-size:.9rem;font-weight:500;color:var(--color-error);margin:0 0 8px;display:flex;align-items:center;gap:8px}.comparison-view .comparison-title:before{content:"\26a0\fe0f";font-size:1rem}.image-comparison{display:grid;grid-template-columns:1fr;gap:16px;width:100%}@media (min-width: 768px){.image-comparison{grid-template-columns:1fr 1fr}}.image-container{display:flex;flex-direction:column;width:100%}.image-container .image-label{font-size:.85rem;margin-bottom:8px;color:var(--color-mid-grey);font-weight:500;display:flex;align-items:center;gap:6px}.image-container .image-label.failed{color:var(--color-error)}.image-container .image-label.expected:before{content:"\2713";color:var(--color-success)}.image-container .image-label.failed:before{content:"\2717";color:var --color-error}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000bf;z-index:999;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:center;cursor:zoom-out}.snapshot-info{margin-bottom:16px;font-size:.9rem;color:var(--color-mid-grey);display:flex;justify-content:space-between;align-items:center}.snapshot-sidebar{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background-color:var(--color-background);box-shadow:var(--shadow-sm);height:fit-content;position:sticky;top:20px}.snapshot-sidebar .sidebar-header{padding:12px 16px;border-bottom:1px solid var(--color-border);background-color:var(--color-light-grey)}.snapshot-sidebar .sidebar-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--color-dark-grey)}.snapshot-sidebar .search-bar{padding:12px 16px;border-bottom:1px solid var(--color-border)}.snapshot-sidebar .search-bar input{width:100%;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.9rem;background-color:var(--color-background);color:var(--color-foreground)}.snapshot-sidebar .search-bar input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-light)}.snapshot-list{max-height:calc(100vh - 250px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-mid-grey) var(--color-light-grey)}.snapshot-list::-webkit-scrollbar{width:8px;height:8px}.snapshot-list::-webkit-scrollbar-track{background:var(--color-light-grey);border-radius:4px}.snapshot-list::-webkit-scrollbar-thumb{background:var(--color-mid-grey);border-radius:4px}.snapshot-list::-webkit-scrollbar-thumb:hover{background:var(--color-dark-grey)}.snapshot-list .groups-container{padding:8px}.snapshot-list .group{margin:4px 0}.snapshot-list .group .group-header{display:flex;align-items:center;cursor:pointer;font-weight:500;padding:8px 12px;border-radius:var(--radius-md);font-size:.9rem;transition:var(--transition)}.snapshot-list .group .group-header:hover{background-color:var(--color-light-grey)}.snapshot-list .group .group-header .toggle-icon{margin-right:8px;transition:transform .2s ease;font-size:10px;color:var(--color-mid-grey)}.snapshot-list .group .group-header .toggle-icon.expanded{transform:rotate(90deg)}.snapshot-list .group .group-header .name-with-badges{display:flex;align-items:center;gap:8px;flex:1}.snapshot-list .group .group-header .badge-container{display:flex;gap:4px}.snapshot-list .group .group-header .badge{border-radius:12px;padding:0 8px;font-size:.8rem;min-width:20px;text-align:center}.snapshot-list .group .group-header .badge.passed{background-color:var(--color-success-light);color:var(--color-success)}.snapshot-list .group .group-header .badge.failed{background-color:var(--color-error-light);color:var(--color-error)}.snapshot-list .group .group-content{padding-left:24px;max-height:0;overflow:hidden;transition:max-height .3s ease}.snapshot-list .group .group-content.expanded{max-height:unset}.snapshot-list .group ul{list-style-type:none;padding:0;display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.snapshot-list .group ul li{padding:8px 12px;background-color:var(--color-light-grey);border-radius:var(--radius-md);cursor:pointer;font-size:.85rem;transition:var(--transition);border:1px solid transparent}.snapshot-list .group ul li:hover{background-color:var(--color-border);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.snapshot-list .group ul li.failed{background-color:var(--color-error-light);color:var(--color-error)}.snapshot-list .group ul li.active{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent);font-weight:500}.snapshot-list .group ul li.active.failed{background-color:var(--color-error);color:#fff;border-color:var(--color-error)}.empty-state,.error-state,.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;flex:1}.empty-state h3,.error-state h3,.loading-state h3{font-weight:600;margin-top:24px;margin-bottom:12px;font-size:1.25rem}.empty-state p,.error-state p,.loading-state p{color:var(--color-mid-grey);margin-bottom:24px;max-width:500px}.empty-state code,.error-state code,.loading-state code{background-color:var(--color-light-grey);padding:4px 8px;border-radius:var(--radius-sm);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9rem}.empty-state .icon,.error-state .icon,.loading-state .icon{font-size:48px;margin-bottom:16px;color:var(--color-accent)}.keyboard-shortcuts{margin-top:12px;font-size:.85rem;color:var(--color-mid-grey)}.keyboard-shortcuts kbd{background-color:var(--color-light-grey);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:1px 5px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}body.dark-theme code{background-color:#ffffff1a;color:var(--color-accent-light)}body.dark-theme .empty-state .icon,body.dark-theme .error-state .icon,body.dark-theme .loading-state .icon{color:var(--color-accent-light)}html.dark-theme body{background-color:var(--color-background)!important}input,textarea,select{background-color:var(--color-background);color:var(--color-foreground);border:1px solid var(--color-border);transition:var(--transition)}input:focus,textarea:focus,select:focus{border-color:var(--color-accent);outline:none}

/*# sourceMappingURL=styles.7f5c139d8592bb91.css.map*/