:root{--color-bg-deep: #050510;--color-bg-panel: #0f1020;--color-accent-primary: #00f0ff;--color-accent-secondary: #7000ff;--color-text-main: #e0e0e0;--color-text-muted: #8080aa;--color-border: #1a1b30;--font-main: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--font-mono: "JetBrains Mono", monospace;--shadow-glow: 0 0 20px rgba(0, 240, 255, .15);--glass-panel: rgba(15, 16, 32, .7)}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-height:100vh;background-color:var(--color-bg-deep);color:var(--color-text-main);font-family:var(--font-main);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}#root{min-height:100vh;width:100%;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg-deep)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent-secondary)}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;transition:all .2s ease}input,textarea{background:transparent;color:inherit;border:none;font-family:inherit}input:focus,textarea:focus{outline:none}.log-list-container{width:300px;background:var(--color-bg-panel);border-right:1px solid var(--color-border);display:flex;flex-direction:column;height:100%;flex-shrink:0}.log-list-header{padding:20px;border-bottom:1px solid var(--color-border);background:#0f1020e6}.log-list-header h2{font-size:.8rem;letter-spacing:2px;color:var(--color-accent-primary);margin-bottom:1rem;font-family:var(--font-mono)}.btn-new,.btn-export{flex:1;background:#00f0ff1a;color:var(--color-accent-primary);border:1px solid rgba(0,240,255,.3);padding:10px;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;text-transform:uppercase;font-size:.8rem;letter-spacing:1px;transition:all .2s ease}.btn-new:hover,.btn-export:hover{background:#00f0ff33;box-shadow:0 0 15px #00f0ff33}.btn-export:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.log-items{flex:1;overflow-y:auto;padding:10px}.log-item{padding:15px;margin-bottom:8px;border-radius:6px;border:1px solid transparent;cursor:pointer;transition:all .2s ease;background:#ffffff05}.log-item:hover{background:#ffffff0d}.log-item.active{border-color:var(--color-accent-secondary);background:#7000ff1a;box-shadow:inset 0 0 10px #7000ff1a}.log-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.log-date{font-family:var(--font-mono);font-size:.75rem;color:var(--color-accent-secondary)}.btn-delete{opacity:0;color:var(--color-text-muted)}.log-item:hover .btn-delete{opacity:1}.btn-delete:hover{color:#ff4040}.log-preview{font-size:.85rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty-state{padding:20px;text-align:center;color:var(--color-text-muted);font-size:.9rem;font-style:italic}@media(max-width:768px){.log-list-container{width:100%;height:100%;max-height:none;border-right:none;border-bottom:none}}.media-manager{display:flex;flex-direction:column;gap:15px;padding:0 40px 10px}.media-controls{display:flex;gap:10px}.btn-media{display:flex;align-items:center;gap:8px;background:#00f0ff0d;color:var(--color-accent-primary);border:1px solid rgba(0,240,255,.3);padding:8px 16px;border-radius:4px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:1px}.btn-media:hover{background:#00f0ff26;box-shadow:0 0 10px #00f0ff33}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;padding-top:10px}.media-item{position:relative;aspect-ratio:16/9;background:#0000004d;border-radius:4px;overflow:hidden;border:1px solid var(--color-border)}.media-item img,.media-item video{width:100%;height:100%;object-fit:cover}.btn-remove-media{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:#000000b3;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.media-item:hover .btn-remove-media{opacity:1}.btn-remove-media:hover{background:#ff4040}.editor-container{flex:1;display:flex;flex-direction:column;height:100%;position:relative;background-image:linear-gradient(#050510e6,#050510e6),linear-gradient(0deg,transparent 24%,var(--color-border) 25%,var(--color-border) 26%,transparent 27%,transparent 74%,var(--color-border) 75%,var(--color-border) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,var(--color-border) 25%,var(--color-border) 26%,transparent 27%,transparent 74%,var(--color-border) 75%,var(--color-border) 76%,transparent 77%,transparent);background-size:100% 100%,60px 60px,60px 60px;background-position:center}.editor-header{padding:20px 40px;display:flex;gap:40px;align-items:center;border-bottom:1px solid var(--color-border);background:#050510cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-back{display:none;background:transparent;width:30px;height:30px;border-radius:50%;border:1px solid var(--color-border);color:var(--color-accent-secondary);align-items:center;justify-content:center;cursor:pointer;margin-right:10px}.btn-back:hover{background:#ffffff1a;color:#fff}@media(max-width:768px){.btn-back{display:flex}.editor-header{padding:15px 20px;gap:15px}.meta-group{font-size:.8em}}.meta-group{display:flex;flex-direction:column;gap:4px}.meta-group label{font-family:var(--font-mono);font-size:.6rem;color:var(--color-accent-primary);letter-spacing:1px}.meta-group span{font-family:var(--font-mono);color:var(--color-text-main);font-size:.9rem}.log-textarea{flex:1;width:100%;padding:40px;font-size:1.1rem;line-height:1.8;resize:none;border:none;outline:none;color:var(--color-text-main);font-family:var(--font-main);text-shadow:0 0 2px rgba(224,224,224,.2)}.log-textarea::placeholder{color:var(--color-text-muted);opacity:.3}.editor-footer{padding:10px 40px;border-top:1px solid var(--color-border);font-family:var(--font-mono);font-size:.7rem;color:var(--color-accent-primary);display:flex;justify-content:flex-end;background:#050510cc}.editor-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);-webkit-user-select:none;user-select:none;background:radial-gradient(circle at center,rgba(0,240,255,.03) 0%,transparent 70%)}.empty-content{text-align:center}.empty-content h1{font-family:var(--font-mono);font-size:2rem;letter-spacing:8px;margin-bottom:1rem;color:var(--color-text-muted);opacity:.5}.empty-content p{font-family:var(--font-mono);font-size:.8rem;letter-spacing:4px;color:var(--color-accent-primary)}.blink{animation:blink 1s infinite step-end;display:block;font-size:2rem;margin-top:20px;color:var(--color-accent-primary)}@keyframes blink{50%{opacity:0}}.audio-controls{padding:10px 40px;background:#0003;border-top:1px solid var(--color-border);display:flex;align-items:center;min-height:60px}.btn-record{display:flex;align-items:center;gap:8px;background:#7000ff1a;color:var(--color-accent-secondary);border:1px solid var(--color-accent-secondary);padding:8px 16px;border-radius:4px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:1px}.btn-record:hover{background:#7000ff33;box-shadow:0 0 10px #7000ff4d}.recording-status{display:flex;align-items:center;gap:20px;color:#ff4040;font-family:var(--font-mono);font-size:.9rem;width:100%}.recording-indicator{display:flex;align-items:center;gap:10px}.pulse{width:10px;height:10px;background-color:#ff4040;border-radius:50%;animation:pulse-red 1s infinite}@keyframes pulse-red{0%{transform:scale(.95);box-shadow:0 0 #ff4040b3}70%{transform:scale(1);box-shadow:0 0 0 10px #ff404000}to{transform:scale(.95);box-shadow:0 0 #ff404000}}.btn-stop{color:#ff4040;padding:8px;border:1px solid #ff4040;border-radius:4px;display:flex;align-items:center;justify-content:center}.btn-stop:hover{background:#ff40401a}.audio-player-wrapper{display:flex;align-items:center;gap:15px;width:100%}.native-audio{height:32px;flex:1;max-width:400px;filter:invert(1) hue-rotate(180deg);opacity:.8}.btn-delete-audio{color:var(--color-text-muted);padding:8px;border-radius:4px}.btn-delete-audio:hover{color:#ff4040;background:#ff40401a}@media(max-width:768px){#root{height:100vh;overflow:hidden}}.app-container{display:flex;height:100vh;width:100vw;overflow:hidden;background-color:var(--color-bg-deep)}@media(max-width:768px){.app-container.mobile-view-list .log-list-container{display:flex;width:100%;max-height:100vh}.app-container.mobile-view-list .editor-container,.app-container.mobile-view-editor .log-list-container{display:none}.app-container.mobile-view-editor .editor-container{display:flex;width:100%}}