: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}}:root{--bg-color: #0f0f13;--card-bg: rgba(255, 255, 255, .05);--primary: #00f2ff;--text-primary: #ffffff;--text-secondary: #a0a0b0;--border-color: rgba(255, 255, 255, .1)}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-primary);font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh}.container{max-width:900px;margin:0 auto;padding:2rem}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}h1{font-size:2rem;font-weight:700;background:linear-gradient(90deg,#fff,#a5a5a5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0}.status-badge{background:#00ff881a;color:#0f8;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;font-weight:600;border:1px solid rgba(0,255,136,.2);animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #0f86}70%{box-shadow:0 0 0 10px #0f80}to{box-shadow:0 0 #0f80}}.controls-card{background:var(--card-bg);border:1px solid var(--border-color);padding:1.5rem;border-radius:16px;margin-bottom:2rem}.input-group{display:flex;gap:1rem;margin-bottom:1rem}.filters{display:flex;gap:1rem}.log-input,.search-input,.filter-select{flex:1;background:#0000004d;border:1px solid var(--border-color);padding:.75rem 1rem;border-radius:8px;color:#fff;font-size:.95rem;transition:all .3s}.log-input:focus,.search-input:focus,.filter-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 10px #00f2ff33}.add-btn{background:var(--primary);color:#000;border:none;padding:0 2rem;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s}.add-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #00f2ff66}.logs-container{display:flex;flex-direction:column;gap:1rem}.logs-header{display:flex;justify-content:space-between;align-items:center}h3{margin:0;font-weight:600;color:var(--text-secondary);font-size:1rem}.clear-btn{background:#dc262633;border:1px solid rgba(220,38,38,.5);color:#fca5a5;padding:8px 16px;border-radius:6px;cursor:pointer;transition:all .2s}.clear-btn:hover{background:#dc262666}.severity-select{background:#0000004d;border:1px solid var(--border-color);padding:.75rem 1rem;border-radius:8px;color:#fff;font-size:.95rem;transition:all .3s;cursor:pointer}.severity-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 10px #00f2ff33}.log-card{background:var(--card-bg);border:1px solid var(--border-color);padding:1.5rem;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s;animation:slideIn .3s ease-out}.log-card:hover{transform:scale(1.01);border-color:#fff3}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.log-meta{display:flex;gap:1rem;font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem;align-items:center}.severity{font-weight:700;letter-spacing:.5px;text-transform:uppercase}.severity.low{color:#2196f3}.severity.high{color:#ff4757;text-shadow:0 0 10px rgba(255,71,87,.4)}.severity.warn{color:#ffa502}.timestamp{font-family:monospace}.thread{color:#747d8c}.log-message{font-size:1.1rem;line-height:1.5}.empty-state{text-align:center;padding:4rem;color:var(--text-secondary);font-style:italic;border:2px dashed var(--border-color);border-radius:16px}
