.wrapper{background-color:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;width:100%;height:100%;z-index:1000;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--md-sys-spacing-4)}.wrapper>.spinner{width:48px;height:48px;border:4px solid var(--md-sys-color-primary-container);border-top:4px solid var(--md-sys-color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.wrapper>p{margin:0;font:var(--md-sys-typescale-body-large-font);color:var(--md-sys-color-on-surface);text-align:center}.App{height:100%;padding:var(--md-sys-spacing-4);position:relative;display:flex;flex-direction:column;gap:var(--md-sys-spacing-6);background-color:var(--md-sys-color-surface)}.header{text-align:center;padding:var(--md-sys-spacing-6) 0;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-1)}.header h1{font:var(--md-sys-typescale-headline-large-font);margin-bottom:var(--md-sys-spacing-3)}.header p{font:var(--md-sys-typescale-body-medium-font);margin:var(--md-sys-spacing-2) 0;opacity:.9}.code{padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-radius:var(--md-sys-shape-corner-extra-small);font:var(--md-sys-typescale-body-small-font);font-family:Roboto Mono,monospace}.model-selector{display:flex;align-items:center;justify-content:center;gap:var(--md-sys-spacing-3);margin-top:var(--md-sys-spacing-4)}.model-selector select{padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-medium-font);min-width:120px}.content{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--md-sys-spacing-4);flex:1}.content>img,.content>video{display:none;width:100%;max-width:800px;max-height:600px;border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-2);object-fit:contain}.content>canvas{position:absolute;top:0;left:50%;transform:translate(-50%);width:100%;max-width:800px;height:100%;max-height:600px;border-radius:var(--md-sys-shape-corner-large);pointer-events:none}.btn-container{display:flex;justify-content:center;gap:var(--md-sys-spacing-3);flex-wrap:wrap;padding:var(--md-sys-spacing-4);background-color:var(--md-sys-color-surface-variant);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-1)}.btn-container button{padding:var(--md-sys-spacing-3) var(--md-sys-spacing-5);border:none;border-radius:var(--md-sys-shape-corner-extra-large);font:var(--md-sys-typescale-label-large-font, 500 14px/20px "Roboto", sans-serif);cursor:pointer;transition:all .2s ease;text-transform:none;letter-spacing:.1px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--md-sys-spacing-2)}.btn-container button.filled{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:var(--md-sys-elevation-1);border:none}.btn-container button.filled:hover{background-color:var(--md-sys-color-primary);opacity:.9;box-shadow:var(--md-sys-elevation-2);transform:translateY(-1px)}.btn-container button.filled:active{background-color:var(--md-sys-color-primary);opacity:.8;box-shadow:var(--md-sys-elevation-1);transform:translateY(0)}.btn-container button.outlined{background-color:transparent;color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline);box-shadow:none}.btn-container button.outlined:hover{background-color:var(--md-sys-color-primary-container);border-color:var(--md-sys-color-primary)}.btn-container input[type=file]{display:none}.stats-panel{display:flex;gap:var(--md-sys-spacing-4);padding:var(--md-sys-spacing-4);background-color:var(--md-sys-color-surface-variant);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-1);flex-wrap:wrap;justify-content:center}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--md-sys-spacing-1);padding:var(--md-sys-spacing-3);background-color:var(--md-sys-color-surface);border-radius:var(--md-sys-shape-corner-medium);min-width:100px}.stat-value{font:var(--md-sys-typescale-headline-small-font);color:var(--md-sys-color-primary);font-weight:500}.stat-label{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant);text-align:center}.performance-panel{padding:var(--md-sys-spacing-4);background-color:var(--md-sys-color-surface-variant);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-1);margin-bottom:var(--md-sys-spacing-4)}.performance-panel h3{font:var(--md-sys-typescale-headline-small-font);margin-bottom:var(--md-sys-spacing-4);color:var(--md-sys-color-on-surface);text-align:center}.performance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--md-sys-spacing-3)}.performance-item{background-color:var(--md-sys-color-surface);padding:var(--md-sys-spacing-3);border-radius:var(--md-sys-shape-corner-medium);box-shadow:var(--md-sys-elevation-1)}.performance-label{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant);margin-bottom:var(--md-sys-spacing-1)}.performance-value{font:var(--md-sys-typescale-body-large-font);color:var(--md-sys-color-primary);font-weight:500;margin-bottom:var(--md-sys-spacing-2)}.performance-bar{height:6px;background-color:var(--md-sys-color-surface-variant);border-radius:var(--md-sys-shape-corner-extra-small);overflow:hidden}.performance-bar-fill{height:100%;background-color:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-corner-extra-small);transition:width .3s ease}.sidebar-toggle{position:fixed;top:50%;right:0;transform:translateY(-50%);background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;border-radius:var(--md-sys-shape-corner-small) 0 0 var(--md-sys-shape-corner-small);padding:var(--md-sys-spacing-3);cursor:pointer;z-index:1000;box-shadow:var(--md-sys-elevation-2);transition:all .3s ease}.sidebar-toggle:hover{background-color:var(--md-sys-color-primary);opacity:.9}.sidebar{position:fixed;top:0;right:-400px;width:380px;height:100vh;background-color:var(--md-sys-color-surface);box-shadow:var(--md-sys-elevation-3);transition:right .3s ease;z-index:999;display:flex;flex-direction:column;overflow:hidden}.sidebar-open{right:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:var(--md-sys-spacing-4);background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-bottom:1px solid var(--md-sys-color-outline)}.sidebar-header h3{font:var(--md-sys-typescale-headline-small-font);margin:0}.sidebar-close{background:none;border:none;color:var(--md-sys-color-on-primary);font-size:24px;cursor:pointer;padding:var(--md-sys-spacing-1);border-radius:var(--md-sys-shape-corner-extra-small);transition:background-color .2s ease}.sidebar-close:hover{background-color:#ffffff1a}.sidebar-content{flex:1;overflow-y:auto;padding:var(--md-sys-spacing-4)}.sidebar-section{margin-bottom:var(--md-sys-spacing-6)}.sidebar-section h4{font:var(--md-sys-typescale-body-large-font);color:var(--md-sys-color-primary);margin-bottom:var(--md-sys-spacing-3);padding-bottom:var(--md-sys-spacing-1);border-bottom:1px solid var(--md-sys-color-outline)}.sidebar-item{display:flex;justify-content:space-between;align-items:center;padding:var(--md-sys-spacing-2) 0;border-bottom:1px solid var(--md-sys-color-surface-variant)}.sidebar-item:last-child{border-bottom:none}.sidebar-item span{font:var(--md-sys-typescale-body-medium-font);color:var(--md-sys-color-on-surface)}.sidebar-value,.sidebar-status{font:var(--md-sys-typescale-body-small-font);padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);border-radius:var(--md-sys-shape-corner-extra-small)}.sidebar-value{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.sidebar-status{background-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.sidebar-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--md-sys-spacing-2);margin-top:var(--md-sys-spacing-4)}.sidebar-action-btn{padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;border-radius:var(--md-sys-shape-corner-small);font:var(--md-sys-typescale-body-small-font);cursor:pointer;transition:all .2s ease}.sidebar-action-btn:hover{background-color:var(--md-sys-color-primary);opacity:.9;transform:translateY(-1px)}@media (max-width: 768px){.App{padding:var(--md-sys-spacing-2)}.btn-container{flex-direction:column;align-items:center}.btn-container button{width:100%;max-width:280px}.stats-panel{flex-direction:column;align-items:center}.performance-grid{grid-template-columns:1fr}.sidebar{width:100%;right:-100%}.sidebar-open{right:0}.sidebar-actions{grid-template-columns:1fr}}.auth-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.auth-content{background-color:var(--md-sys-color-surface);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-3);max-width:500px;width:90%;max-height:80vh;overflow:hidden}.user-management,.detection-history{max-width:800px;max-height:90vh}.auth-header{display:flex;justify-content:space-between;align-items:center;padding:var(--md-sys-spacing-4);background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-bottom:1px solid var(--md-sys-color-outline)}.auth-header h3{font:var(--md-sys-typescale-headline-small-font);margin:0}.auth-close{background:none;border:none;color:var(--md-sys-color-on-primary);font-size:24px;cursor:pointer;padding:var(--md-sys-spacing-1);border-radius:var(--md-sys-shape-corner-extra-small);transition:background-color .2s ease}.auth-close:hover{background-color:#ffffff1a}.auth-form{padding:var(--md-sys-spacing-4)}.form-group{margin-bottom:var(--md-sys-spacing-4)}.form-group label{display:block;font:var(--md-sys-typescale-body-medium-font);color:var(--md-sys-color-on-surface);margin-bottom:var(--md-sys-spacing-1)}.form-group input{width:100%;padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-medium-font)}.form-group input:focus{outline:none;border-color:var(--md-sys-color-primary)}.auth-submit{width:100%;padding:var(--md-sys-spacing-3);background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;border-radius:var(--md-sys-shape-corner-small);font:var(--md-sys-typescale-label-large-font);cursor:pointer;margin-bottom:var(--md-sys-spacing-3);transition:all .2s ease}.auth-submit:hover:not(:disabled){background-color:var(--md-sys-color-primary);opacity:.9}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-switch{text-align:center;font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant)}.auth-switch-btn{background:none;border:none;color:var(--md-sys-color-primary);cursor:pointer;text-decoration:underline;font:var(--md-sys-typescale-body-small-font)}.auth-error{background-color:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);border-radius:var(--md-sys-shape-corner-small);margin-bottom:var(--md-sys-spacing-3);font:var(--md-sys-typescale-body-small-font)}.auth-message{padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);border-radius:var(--md-sys-shape-corner-small);margin:var(--md-sys-spacing-3);font:var(--md-sys-typescale-body-small-font)}.auth-message.success{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.auth-message.error{background-color:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.auth-demo{text-align:center;font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant);margin-top:var(--md-sys-spacing-3);padding:var(--md-sys-spacing-2);background-color:var(--md-sys-color-surface-variant);border-radius:var(--md-sys-shape-corner-small)}.user-list{max-height:400px;overflow-y:auto;margin:var(--md-sys-spacing-3)}.user-list-header,.user-item{display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr;gap:var(--md-sys-spacing-2);padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);align-items:center}.user-list-header{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant);border-bottom:1px solid var(--md-sys-color-outline);background-color:var(--md-sys-color-surface-variant)}.user-item{border-bottom:1px solid var(--md-sys-color-surface-variant)}.user-item:last-child{border-bottom:none}.user-role.admin{color:var(--md-sys-color-primary);font-weight:500}.user-role.user{color:var(--md-sys-color-on-surface-variant)}.delete-btn{border:none;padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);border-radius:var(--md-sys-shape-corner-extra-small);font:var(--md-sys-typescale-body-small-font);cursor:pointer;transition:all .2s ease}.delete-btn.filled{background-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.delete-btn.filled:hover{opacity:.8}.user-stats{padding:var(--md-sys-spacing-3);background-color:var(--md-sys-color-surface-variant);border-top:1px solid var(--md-sys-color-outline);font:var(--md-sys-typescale-body-small-font)}.user-stats p{margin:var(--md-sys-spacing-1) 0}.history-controls{display:flex;justify-content:space-between;align-items:center;padding:var(--md-sys-spacing-3);border-bottom:1px solid var(--md-sys-color-outline)}.filter-controls{display:flex;align-items:center;gap:var(--md-sys-spacing-2)}.filter-controls label{font:var(--md-sys-typescale-body-medium-font);color:var(--md-sys-color-on-surface)}.filter-controls select{padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-small-font)}.export-controls{display:flex;gap:var(--md-sys-spacing-2)}.export-btn{padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);border:none;border-radius:var(--md-sys-shape-corner-small);font:var(--md-sys-typescale-body-small-font);cursor:pointer;transition:all .2s ease}.export-btn.filled{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:var(--md-sys-elevation-1)}.export-btn.filled:hover:not(:disabled){opacity:.9;box-shadow:var(--md-sys-elevation-2)}.export-btn:disabled{opacity:.6;cursor:not-allowed}.history-list{max-height:400px;overflow-y:auto;margin:var(--md-sys-spacing-3)}.history-list-header,.history-item{display:grid;grid-template-columns:80px 2fr 1fr 1.5fr 1fr 1fr;gap:var(--md-sys-spacing-2);padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);align-items:center}.history-list-header{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant);border-bottom:1px solid var(--md-sys-color-outline);background-color:var(--md-sys-color-surface-variant)}.history-item{border-bottom:1px solid var(--md-sys-color-surface-variant)}.history-item:last-child{border-bottom:none}.select-all,.select-record{display:flex;align-items:center;gap:var(--md-sys-spacing-1)}.record-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-type{font:var(--md-sys-typescale-body-small-font)}.record-time{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant)}.record-results{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-primary)}.selection-info{padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);background-color:var(--md-sys-color-surface-variant);font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant)}.history-stats{padding:var(--md-sys-spacing-3);background-color:var(--md-sys-color-surface-variant);border-top:1px solid var(--md-sys-color-outline);font:var(--md-sys-typescale-body-small-font)}.history-stats p{margin:var(--md-sys-spacing-1) 0}.loading-text,.no-users,.no-records{text-align:center;padding:var(--md-sys-spacing-4);color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-medium-font)}.header-content{display:flex;justify-content:space-between;align-items:center;width:100%}.header-title{flex:1}.user-info{display:flex;align-items:center}.user-menu{display:flex;align-items:center;gap:var(--md-sys-spacing-2);color:var(--md-sys-color-on-primary);font:var(--md-sys-typescale-body-medium-font)}.username{font-weight:500}.user-role{opacity:.8}.login-btn,.logout-btn{background-color:#fff3;color:var(--md-sys-color-on-primary);border:1px solid rgba(255,255,255,.3);padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);border-radius:var(--md-sys-shape-corner-small);font:var(--md-sys-typescale-body-small-font);cursor:pointer;transition:all .2s ease}.login-btn:hover,.logout-btn:hover{background-color:#ffffff4d}.user-management-controls{padding:var(--md-sys-spacing-3);border-bottom:1px solid var(--md-sys-color-outline)}.create-user-btn{padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);border:none;border-radius:var(--md-sys-shape-corner-small);font:var(--md-sys-typescale-label-medium-font);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:var(--md-sys-spacing-1)}.create-user-btn.filled{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:var(--md-sys-elevation-1)}.create-user-btn.filled:hover{background-color:var(--md-sys-color-primary);opacity:.9;box-shadow:var(--md-sys-elevation-2)}.create-user-form{padding:var(--md-sys-spacing-4);background-color:var(--md-sys-color-surface-variant);border-radius:var(--md-sys-shape-corner-medium);margin:var(--md-sys-spacing-3)}.create-user-form h4{font:var(--md-sys-typescale-title-small-font);color:var(--md-sys-color-on-surface);margin-bottom:var(--md-sys-spacing-3)}.create-user-form .form-group{margin-bottom:var(--md-sys-spacing-3)}.create-user-form label{display:block;font:var(--md-sys-typescale-body-medium-font);color:var(--md-sys-color-on-surface);margin-bottom:var(--md-sys-spacing-1)}.create-user-form input,.create-user-form select{width:100%;padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-medium-font)}.create-user-form input:focus,.create-user-form select:focus{outline:none;border-color:var(--md-sys-color-primary)}.form-actions{display:flex;gap:var(--md-sys-spacing-2);margin-top:var(--md-sys-spacing-3)}.confirm-btn{padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);border:none;border-radius:var(--md-sys-shape-corner-small);font:var(--md-sys-typescale-label-medium-font);cursor:pointer;flex:1;transition:all .2s ease}.confirm-btn.filled{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:var(--md-sys-elevation-1)}.confirm-btn.filled:hover{background-color:var(--md-sys-color-primary);opacity:.9;box-shadow:var(--md-sys-elevation-2)}.cancel-btn{padding:var(--md-sys-spacing-2) var(--md-sys-spacing-3);border-radius:var(--md-sys-shape-corner-small);font:var(--md-sys-typescale-label-medium-font);cursor:pointer;flex:1;transition:all .2s ease}.cancel-btn.outlined{background-color:transparent;color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline)}.cancel-btn.outlined:hover{background-color:var(--md-sys-color-primary-container)}.role-select{padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-small-font);min-width:100px}.no-actions{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant);font-style:italic}.details-btn{padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);border:none;border-radius:var(--md-sys-shape-corner-extra-small);font:var(--md-sys-typescale-body-small-font);cursor:pointer;transition:all .2s ease}.details-btn.filled{background-color:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.details-btn.filled:hover{opacity:.8}.details-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:3000}.details-content{background-color:var(--md-sys-color-surface);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-3);max-width:600px;width:90%;max-height:80vh;overflow:hidden}.details-header{display:flex;justify-content:space-between;align-items:center;padding:var(--md-sys-spacing-4);background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-bottom:1px solid var(--md-sys-color-outline)}.details-header h4{font:var(--md-sys-typescale-headline-small-font);margin:0}.details-close{background:none;border:none;color:var(--md-sys-color-on-primary);font-size:24px;cursor:pointer;padding:var(--md-sys-spacing-1);border-radius:var(--md-sys-shape-corner-extra-small);transition:background-color .2s ease}.details-close:hover{background-color:#ffffff1a}.details-body{padding:var(--md-sys-spacing-4);max-height:60vh;overflow-y:auto}.details-section{margin-bottom:var(--md-sys-spacing-4)}.details-section h5{font:var(--md-sys-typescale-title-small-font);color:var(--md-sys-color-primary);margin-bottom:var(--md-sys-spacing-2);padding-bottom:var(--md-sys-spacing-1);border-bottom:1px solid var(--md-sys-color-outline)}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--md-sys-spacing-2)}.detail-item{display:flex;flex-direction:column;gap:var(--md-sys-spacing-1)}.detail-item label{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant)}.detail-item span{font:var(--md-sys-typescale-body-medium-font);color:var(--md-sys-color-on-surface)}.filter-group{display:flex;flex-direction:column;gap:var(--md-sys-spacing-1)}.filter-group label{font:var(--md-sys-typescale-body-small-font);color:var(--md-sys-color-on-surface-variant)}.filter-group input[type=date]{padding:var(--md-sys-spacing-1) var(--md-sys-spacing-2);border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-small-font)}@media (max-width: 768px){.user-list-header,.user-item{grid-template-columns:1fr 1fr;gap:var(--md-sys-spacing-1)}.history-list-header,.history-item{grid-template-columns:60px 1fr 1fr;gap:var(--md-sys-spacing-1)}.filter-controls{flex-direction:column;align-items:stretch}.filter-group{width:100%}.export-controls{flex-direction:column}.details-grid{grid-template-columns:1fr}}:root{--md-sys-color-primary: #6750A4;--md-sys-color-on-primary: #FFFFFF;--md-sys-color-primary-container: #EADDFF;--md-sys-color-on-primary-container: #21005D;--md-sys-color-secondary: #625B71;--md-sys-color-on-secondary: #FFFFFF;--md-sys-color-secondary-container: #E8DEF8;--md-sys-color-on-secondary-container: #1D192B;--md-sys-color-surface: #FFFBFE;--md-sys-color-on-surface: #1C1B1F;--md-sys-color-surface-variant: #E7E0EC;--md-sys-color-on-surface-variant: #49454F;--md-sys-color-error: #BA1A1A;--md-sys-color-on-error: #FFFFFF;--md-sys-color-error-container: #FFDAD6;--md-sys-color-on-error-container: #410002;--md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, .15), 0px 1px 2px 0px rgba(0, 0, 0, .3);--md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, .15), 0px 1px 2px 0px rgba(0, 0, 0, .3);--md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, .15), 0px 1px 3px 0px rgba(0, 0, 0, .3);--md-sys-typescale-display-large-font: 400 57px/64px "Roboto", sans-serif;--md-sys-typescale-display-medium-font: 400 45px/52px "Roboto", sans-serif;--md-sys-typescale-display-small-font: 400 36px/44px "Roboto", sans-serif;--md-sys-typescale-headline-large-font: 400 32px/40px "Roboto", sans-serif;--md-sys-typescale-headline-medium-font: 400 28px/36px "Roboto", sans-serif;--md-sys-typescale-headline-small-font: 400 24px/32px "Roboto", sans-serif;--md-sys-typescale-body-large-font: 400 16px/24px "Roboto", sans-serif;--md-sys-typescale-body-medium-font: 400 14px/20px "Roboto", sans-serif;--md-sys-typescale-body-small-font: 400 12px/16px "Roboto", sans-serif;--md-sys-spacing-1: 4px;--md-sys-spacing-2: 8px;--md-sys-spacing-3: 12px;--md-sys-spacing-4: 16px;--md-sys-spacing-5: 20px;--md-sys-spacing-6: 24px;--md-sys-spacing-7: 28px;--md-sys-spacing-8: 32px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-extra-large: 28px}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}code{font-family:Roboto Mono,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{width:100%;height:100%}