:root{--main-bg:#262624;--bg-primary:#2e2e2b;--bg-secondary:#323230;--bg-tertiary:#1e1e1c;--bg-light:#30302e;--border-tertiary:#ffffff1f;--border-secondary:#ffffff38;--text-primary:#f0ede8;--text-secondary:#9e9b94;--accent:#378add;--accent-dark:#185fa5;--accent-bg:#0c2a42;--accent-text:#85b7eb;--drag-border:#378add;--drag-bg:#0c2a42;--roboto:"Roboto", sans-serif}html,body{background-color:var(--main-bg);min-height:100%;margin:0;padding:0}#app{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:30px;width:100%;min-height:100vh;padding:15px;display:flex;position:relative}#app #upload{background-color:var(--bg-secondary);border:2px dashed var(--border-secondary);box-sizing:border-box;width:100%;max-width:550px;height:250px;color:var(--text-primary);text-align:center;cursor:pointer;font-size:17px;font-family:var(--roboto);justify-content:center;align-items:center;padding:10px;transition:all .3s ease-in;display:flex}#app #upload:hover,#app #upload.drag-drop{background-color:var(--accent-bg);transition:all .3s ease-out}#app #upload .wrapper{flex-direction:column;gap:15px;display:flex}#app #upload .wrapper .heading p{margin:0;font-size:18px;font-weight:600}#app #upload .wrapper .heading span{color:var(--text-secondary);margin:0;font-size:14px}#app #upload .wrapper .ico{box-sizing:border-box;border:1px solid var(--border-tertiary);background-color:var(--bg-primary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;margin:auto;padding:10px;display:flex}#app #upload .wrapper .ico i{font-size:24px}#app #upload .wrapper .upload-btn input{display:none}#app #upload .wrapper .upload-btn button{cursor:pointer;background-color:var(--bg-secondary);border:1px solid var(--border-secondary);width:125px;height:35px;color:var(--text-primary);border-radius:10px;outline:none;transition:all .1s ease-in}#app #upload .wrapper .upload-btn button:hover{background-color:var(--bg-tertiary);transition:all .1s ease-out}#app #metadata{box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px;width:100%;min-height:500px;padding:20px;display:none}#app #metadata .card-side{flex-direction:column;flex:0 0 280px;gap:12px;display:flex}#app #metadata .card-side .actions{align-items:center;gap:12px;display:flex}#app #metadata .card-side .actions button{cursor:pointer;border:1px solid var(--border-secondary);background-color:var(--bg-secondary);min-width:120px;height:38px;color:var(--text-primary);font-family:var(--roboto);border-radius:15px;outline:none;font-weight:500;transition:all .3s ease-out}#app #metadata .card-side .actions button:hover{background-color:var(--bg-tertiary);transition:all .3s ease-in}#app #metadata .card-side #img-side{background-color:var(--bg-primary);height:340px;color:var(--text-primary);border:1px solid var(--border-tertiary);box-sizing:border-box;border-radius:10px;flex-direction:column;display:flex}#app #metadata .card-side #img-side .img-wrapper{box-sizing:border-box;justify-content:center;padding:5px;display:flex}#app #metadata .card-side #img-side .img-wrapper img{object-fit:contain;width:170px;min-height:200px}#app #metadata .card-side #img-side .img-footer{background-color:var(--bg-light);box-sizing:border-box;font-family:var(--roboto);border-top:1px solid var(--border-tertiary);flex-direction:column;flex:1;gap:5px;padding:10px;display:flex}#app #metadata .card-side #img-side .img-footer #imageTitle{color:var(--text-primary);font-size:15px;font-weight:600}#app #metadata .card-side #img-side .img-footer #imageDetail{color:var(--text-secondary);font-size:12px}#app #metadata .dataContainer{background-color:var(--bg-light);border:1px solid var(--border-secondary);box-sizing:border-box;flex-direction:column;flex:1;min-width:0;max-width:650px;height:100%;display:flex}#app #metadata .dataContainer .tabs{padding:0}#app #metadata .dataContainer .tabs ul{border-bottom:1px solid var(--border-tertiary);justify-content:space-between;margin:0;padding:0;display:flex}#app #metadata .dataContainer .tabs ul li{color:var(--text-primary);font-family:var(--roboto);box-sizing:border-box;cursor:pointer;padding:10px;list-style:none}#app #metadata .dataContainer .tabs ul li.active{border-bottom:2px solid var(--accent)}#app #metadata .dataContainer .data{width:100%;height:300px;overflow-y:scroll}#app #metadata .dataContainer .data ul{flex-direction:column;margin:0;padding:0;display:flex}#app #metadata .dataContainer .data ul li{color:var(--text-primary);font-family:var(--roboto);border-top:1px solid var(--border-secondary);border-bottom:1px solid var(--border-secondary);box-sizing:border-box;justify-content:space-between;padding:10px;list-style:none;display:flex}#app #metadata .dataContainer .data ul li span{color:var(--text-secondary);text-transform:capitalize;font-weight:600}.overlay{z-index:999;z-index:999;inset:0;background:#0009;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:none;position:fixed;inset:0}.spinner{border:3px solid #ffffff26;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:.75s linear infinite spin}.overlay span{color:var(--text-primary);letter-spacing:.04em;font-size:18px;font-family:var(--roboto)}.no-data{color:var(--text-secondary);text-align:center;font-size:20px;font-family:var(--roboto)}@keyframes spin{to{transform:rotate(360deg)}}