:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f0f0f;color:#e0e0e0;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#1a1a1a;border-bottom:1px solid #333;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}.logo-icon{font-size:1.5rem}.logo-text{font-size:1.25rem;font-weight:600;background:linear-gradient(135deg,#00d4ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav{display:flex;gap:1.5rem}.nav a{color:#888;text-decoration:none;transition:color .2s}.nav a:hover{color:#00d4ff}.main{flex:1;padding:2rem;max-width:1400px;margin:0 auto;width:100%}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s;border:none;font-size:.9rem}.btn-primary{background:linear-gradient(135deg,#00d4ff,#7c3aed);color:#fff}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-secondary{background:#2a2a2a;color:#e0e0e0;border:1px solid #444}.btn-secondary:hover{background:#333}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}.btn:disabled{opacity:.5;cursor:not-allowed}.card{background:#1a1a1a;border-radius:12px;border:1px solid #333;padding:1.5rem}input,textarea{background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:.75rem 1rem;color:#e0e0e0;font-size:.9rem;width:100%}input:focus,textarea:focus{outline:none;border-color:#00d4ff}label{display:block;margin-bottom:.5rem;font-weight:500;color:#888;font-size:.85rem}.page-title{font-size:1.75rem;font-weight:600;margin-bottom:1.5rem}.page-subtitle{color:#888;margin-bottom:2rem}.session-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.session-card{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .2s}.session-card:hover{border-color:#00d4ff;transform:translateY(-2px)}.session-card h3{margin-bottom:.5rem}.session-card .url{color:#888;font-size:.85rem;margin-bottom:1rem;word-break:break-all}.session-card .meta{display:flex;gap:1rem;font-size:.8rem;color:#666}.badge{display:inline-block;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:500}.badge-success{background:#064e3b;color:#34d399}.badge-warning{background:#78350f;color:#fbbf24}.badge-error{background:#7f1d1d;color:#f87171}.badge-info{background:#1e3a5f;color:#60a5fa}.empty-state{text-align:center;padding:4rem 2rem;color:#666}.empty-state h3{margin-bottom:.5rem;color:#888}.loading{display:flex;align-items:center;justify-content:center;padding:4rem;color:#666}.form-group{margin-bottom:1rem}.form-row{display:flex;gap:1rem;margin-bottom:1rem}.form-row>*{flex:1}.capture-container{display:grid;grid-template-columns:1fr 300px;gap:2rem}.capture-status{background:#1a1a1a;border-radius:12px;padding:1.5rem;border:1px solid #333}.capture-status h3{margin-bottom:1rem}.action-count{font-size:3rem;font-weight:700;color:#00d4ff}.action-list{display:flex;flex-direction:column;gap:.5rem;max-height:400px;overflow-y:auto}.action-item{background:#2a2a2a;border-radius:8px;padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem}.action-type{background:#333;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase;color:#00d4ff}.action-details{flex:1;font-size:.85rem}.action-selector{color:#888;font-family:monospace;font-size:.75rem}.humanization-editor{background:#222;border-radius:8px;padding:1rem;margin-top:.5rem}.humanization-row{display:grid;grid-template-columns:80px repeat(3,1fr);gap:.5rem;align-items:center;margin-bottom:.5rem}.humanization-row label{margin:0;font-size:.75rem}.humanization-row input{padding:.4rem;font-size:.8rem}.diff-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}.diff-panel{text-align:center}.diff-panel h4{margin-bottom:.5rem;color:#888;font-size:.85rem}.diff-panel img{width:100%;border-radius:8px;border:1px solid #333}.progress-bar{background:#333;border-radius:999px;height:8px;overflow:hidden;margin:1rem 0}.progress-fill{background:linear-gradient(90deg,#00d4ff,#7c3aed);height:100%;transition:width .3s ease}.replay-status{text-align:center;margin:2rem 0}.replay-status .status-text{font-size:1.25rem;margin-bottom:.5rem}.replay-status .status-detail{color:#888}.diff-result{margin-top:2rem;padding:1rem;background:#1a1a1a;border-radius:8px}.diff-result h3{margin-bottom:1rem}.diff-percentage{font-size:2rem;font-weight:700}.diff-percentage.match{color:#34d399}.diff-percentage.mismatch{color:#f87171}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.session-header h1{margin:0}.session-actions{display:flex;gap:.5rem}.section{margin-bottom:2rem}.section h2{margin-bottom:1rem;font-size:1.25rem}.screenshots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.screenshot-thumb{border-radius:8px;overflow:hidden;border:1px solid #333}.screenshot-thumb img{width:100%;display:block}.screenshot-thumb .caption{padding:.5rem;font-size:.75rem;color:#888}.btn-ghost{background:transparent;color:#888;border:1px solid #444}.btn-ghost:hover{background:#222;color:#e0e0e0}.btn-sm{padding:.4rem .8rem;font-size:.8rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#1a1a1a;border-radius:12px;border:1px solid #333;padding:2rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal h2{margin-bottom:1.5rem}.tag{display:inline-block;padding:.2rem .6rem;background:#2a2a2a;border-radius:4px;font-size:.75rem;color:#888}select{background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:.75rem 1rem;color:#e0e0e0;font-size:.9rem;width:100%;cursor:pointer}select:focus{outline:none;border-color:#00d4ff}.error{text-align:center;padding:4rem 2rem;color:#f87171}small{display:block;margin-top:.25rem;font-size:.8rem;color:#666}@media(max-width:768px){.capture-container,.diff-container{grid-template-columns:1fr}.header{flex-direction:column;gap:1rem}.card-grid{grid-template-columns:1fr}}