:root{--bg-color: #2f2f2f;--text-color: #f4f4f4;--accent-400: #3b82f6;--accent-500: #3182ce;--accent-600: #2b6cb0;--accent-700: #1e4e8c;--accent-800: #153e75;--danger-500: #e53e3e;--danger-600: #c53030;--danger-700: #9b2c2c;--input-bg: #444;--input-border: #666;--panel-bg: rgba(0, 0, 0, .82);--focus-ring: #90cdf4}html,body,#root{height:100%;margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:Segoe UI,system-ui,-apple-system,Roboto,Arial,sans-serif}.container{max-width:600px;margin:0 auto;padding:2rem;text-align:center}h1,h2,h3{color:var(--text-color)}input[type=text]{width:100%;padding:.75rem;font-size:1rem;margin-bottom:1rem;border:1px solid var(--input-border);border-radius:8px;background-color:var(--input-bg);color:var(--text-color);transition:border-color .2s ease,box-shadow .2s ease}input[type=text]:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px #90cdf459}input[disabled]{background-color:#333;color:#aaa;border:1px solid #555;cursor:not-allowed;opacity:.85}button{width:100%;background:linear-gradient(180deg,var(--accent-500),var(--accent-600));color:#fff;border:1px solid var(--accent-700);padding:.75rem 1.2rem;margin:.5rem 0;font-size:1rem;border-radius:10px;cursor:pointer;transition:background .15s ease,transform .05s ease,box-shadow .15s ease,filter .15s ease;box-shadow:0 8px 18px #2b6cb059,inset 0 1px #ffffff1f}button:hover:enabled{background:linear-gradient(180deg,var(--accent-400),var(--accent-600));filter:saturate(1.05)}button:active:enabled{transform:translateY(1px);box-shadow:0 5px 12px #2b6cb047,inset 0 1px #ffffff14}button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}button:disabled{opacity:.75;cursor:not-allowed;filter:grayscale(.15)}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%}.button-row button{width:100%}button.delete-button{background:linear-gradient(180deg,var(--danger-500),var(--danger-600));border-color:var(--danger-700);box-shadow:0 8px 18px #c5303059,inset 0 1px #ffffff1f}button.delete-button:hover:enabled{background:linear-gradient(180deg,var(--danger-500),var(--danger-700))}audio{width:100%;margin-top:1rem}.audio-preview h3{text-align:center;margin-bottom:.5rem;font-weight:500;font-size:1.1rem}.fullscreen-bg{background-image:url(/bprecord_background.png);background-repeat:no-repeat;background-size:contain;background-position:center;background-color:#2f2f2f;height:100vh;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.stack-panel{display:flex;flex-direction:column;gap:1rem;padding:2rem;width:100%;max-width:600px;margin:0 auto;border-radius:16px;background-color:var(--panel-bg);color:#fff;box-shadow:0 20px 45px #00000073,0 2px 10px #0000004d}.top-right-link a,.top-right-link{background:#ffffffd9;color:#222;padding:.5rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;box-shadow:0 8px 18px #0000002e}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.recording-icon{transition:color .3s ease,opacity .3s ease,transform .2s ease;text-shadow:0 2px 6px rgba(0,0,0,.35)}.recording-icon.hidden{opacity:.3;transform:scale(1)}.mic-low{color:#9aa0a6}.mic-mid{color:#34d399}.mic-high{color:#fbbf24}.mic-peak{color:#f87171}