:root{--background-color: #121212;--surface-color: #1e1e1e;--primary-color: #bb86fc;--text-color: #e0e0e0;--record-red: #cf6679;--button-size: 64px}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background-color);color:var(--text-color);display:flex;justify-content:center;padding:1rem}#app{width:100%;max-width:500px;display:flex;flex-direction:column;gap:1.5rem}header h1{text-align:center;font-size:1.5rem;font-weight:500}main{display:flex;flex-direction:column;gap:1rem}.video-container{position:relative;width:100%;aspect-ratio:16 / 9;background-color:#000;border-radius:8px;overflow:hidden;border:1px solid #333}#preview{width:100%;height:100%;object-fit:cover}#recording-indicator{position:absolute;top:10px;left:10px;background-color:#0009;color:#fff;padding:4px 8px;border-radius:12px;display:flex;align-items:center;gap:6px;font-family:Courier New,Courier,monospace;font-size:.9rem;z-index:10}#recording-indicator.hidden{display:none}#recording-indicator .dot{width:10px;height:10px;background-color:var(--record-red);border-radius:50%;animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}#file-settings{display:flex;gap:1rem;margin-top:-.5rem}.setting-group{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.setting-group label{font-size:.8rem;color:#aaa}.setting-group input[type=text]{background-color:var(--surface-color);color:var(--text-color);border:1px solid #333;border-radius:4px;padding:8px;width:100%}.setting-group input[type=text]:focus{outline:2px solid var(--primary-color);outline-offset:-1px}.setting-group input[type=text]:disabled{background-color:#2a2a2a;cursor:not-allowed;opacity:.6}#folder-settings{gap:.5rem}.folder-header{display:flex;justify-content:space-between;align-items:center}.folder-header label{font-size:.8rem;color:#aaa}#add-folder-button.text-button{background-color:var(--surface-color);border:1px solid #333;color:var(--text-color);padding:4px 10px;font-size:.8rem;border-radius:4px}#add-folder-button.text-button:not(:disabled):hover{background-color:var(--primary-color);border-color:var(--primary-color);color:#121212;transform:none}#folder-list-container{background-color:var(--surface-color);border:1px solid #333;border-radius:4px;min-height:38px;padding:6px;display:flex;align-items:center}#folder-list-container.disabled{pointer-events:none;opacity:.6;background-color:#2a2a2a}#no-folders-message{font-size:.9rem;color:#777;padding-left:4px}#no-folders-message.hidden{display:none}#folder-list{display:flex;flex-wrap:wrap;gap:6px}.folder-tag{display:inline-flex;align-items:center;gap:6px;background-color:#3e3e3e;color:var(--text-color);padding:4px 8px;border-radius:12px;font-size:.9rem;cursor:pointer;transition:background-color .2s,color .2s;-webkit-user-select:none;user-select:none}.folder-tag.active{background-color:var(--primary-color);color:#121212;font-weight:500}.delete-folder-tag-button{background:none;border:none;color:#aaa;font-size:1rem;line-height:1;padding:0 2px;margin-right:-4px;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.folder-tag.active .delete-folder-tag-button{color:#555}.delete-folder-tag-button:hover{background-color:#0003;color:#fff;transform:none}#controls{display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.control-group{display:flex;flex-direction:column;gap:4px;align-items:center}.control-group label{font-size:.8rem;color:#aaa}select{background-color:var(--surface-color);color:var(--text-color);border:1px solid #333;border-radius:4px;padding:8px 2em 8px 8px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27292.4%27%20height%3D%27292.4%27%3E%3Cpath%20fill%3D%27%23e0e0e0%27%20d%3D%27M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%27%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}select:focus{outline:2px solid var(--primary-color);outline-offset:-1px}button{background:none;border:none;color:var(--text-color);cursor:pointer;padding:0;display:flex;justify-content:center;align-items:center;transition:opacity .2s,transform .2s,background-color .2s,border-color .2s}button:disabled{cursor:not-allowed;opacity:.4}button:not(:disabled):hover{transform:scale(1.05)}#record-button{width:var(--button-size);height:var(--button-size);background-color:var(--record-red);border-radius:50%;transition:background-color .2s,border-radius .2s}#record-button.recording{background-color:var(--surface-color);border:2px solid var(--record-red);border-radius:25%}#record-button svg{width:40%;height:40%;color:#fff}#record-button .hidden,.hidden{display:none}#switch-camera-button{width:48px;height:48px}#switch-camera-button svg{width:28px;height:28px;stroke:var(--text-color);transition:transform .3s ease-in-out}#switch-camera-button:not(:disabled):hover svg{transform:rotate(-90deg)}#gallery{margin-top:1.5rem}#gallery h2{font-size:1.2rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #333}#no-recordings{text-align:center;color:#888;padding:2rem 0}.recording-item{background-color:var(--surface-color);border-radius:8px;padding:1rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.75rem}.recording-item video{width:100%;border-radius:6px}.recording-title{font-weight:500;font-size:.9rem;word-break:break-all}.recording-metadata{font-size:.8rem;color:#aaa;margin-top:-.5rem}.recording-item-actions{display:flex;gap:.5rem;justify-content:flex-end}.recording-item-actions button,.recording-item-actions a{background-color:#333;color:var(--text-color);border:none;padding:8px 16px;border-radius:4px;cursor:pointer;text-decoration:none;font-size:.9rem;display:inline-flex;align-items:center;gap:6px;transition:background-color .2s,color .2s}.recording-item-actions a:hover{background-color:var(--primary-color);color:#000}.recording-item-actions .delete-button{background-color:transparent;color:var(--record-red)}.recording-item-actions .delete-button:hover{background-color:var(--record-red);color:#fff}