:root{--bg-color:#fdf5e6;--card-bg:#fff;--primary:#f36;--secondary:#00e5ff;--accent:#fc0;--text-main:#0f0f0f;--border-color:#000;--border-width:3px;--border-radius:12px;--shadow-color:#000;--shadow-offset:6px;--shadow-offset-hover:3px}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body{background-color:var(--bg-color);color:var(--text-main);justify-content:center;align-items:center;min-height:100dvh;margin:0;display:flex;overflow:hidden}#root{justify-content:center;width:100%;height:100dvh;display:flex}.app-container{background:var(--bg-color);flex-direction:column;width:100vw;height:100dvh;display:flex;position:relative;overflow:hidden}.neo-box{background-color:var(--card-bg);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color);transition:all .2s}.neo-input{background-color:var(--card-bg);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);width:100%;box-shadow:4px 4px 0 var(--shadow-color);outline:none;padding:16px;font-size:18px;font-weight:600;transition:all .2s}.neo-input:focus{box-shadow:2px 2px 0 var(--shadow-color);transform:translate(2px,2px)}.neo-btn{background-color:var(--primary);color:#fff;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);text-transform:uppercase;letter-spacing:1px;cursor:pointer;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color);justify-content:center;align-items:center;gap:12px;padding:16px 24px;font-size:18px;font-weight:800;transition:all .1s;display:flex}.neo-btn:active{transform:translate(var(--shadow-offset), var(--shadow-offset));box-shadow:0px 0px 0 var(--shadow-color)}.neo-btn.secondary{background-color:var(--secondary);color:#000}.neo-btn.accent{background-color:var(--accent);color:#000}.neo-btn.success{color:#000;background-color:#00e676}.neo-btn.danger{color:#fff;background-color:#ff1744}.keypad-btn{background-color:var(--card-bg);border:var(--border-width) solid var(--border-color);cursor:pointer;width:72px;height:72px;box-shadow:4px 4px 0 var(--shadow-color);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;transition:all .1s;display:flex}.keypad-btn:active{box-shadow:0px 0px 0 var(--shadow-color);background-color:var(--accent);transform:translate(4px,4px)}.keypad-btn span.number{color:var(--text-main);font-size:28px;font-weight:800;line-height:1}.keypad-btn span.letters{color:#666;letter-spacing:1px;margin-top:4px;font-size:10px;font-weight:600}.bottom-nav{background-color:var(--card-bg);border-top:var(--border-width) solid var(--border-color);z-index:50;justify-content:space-around;align-items:center;padding:12px 0 24px;display:flex}.nav-item{color:#666;cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;font-size:12px;font-weight:700;transition:all .2s;display:flex}.nav-item.active{color:var(--border-color);background-color:var(--accent);border:2px solid var(--border-color);box-shadow:2px 2px 0 var(--border-color)}.scrollable-content{flex:1;width:100%;max-width:800px;margin:0 auto;padding:20px;overflow-y:auto}@media (width>=768px){.app-container{flex-direction:row}.bottom-nav{border-top:none;border-right:var(--border-width) solid var(--border-color);z-index:100;flex-direction:column;order:-1;justify-content:flex-start;gap:16px;width:250px;height:100vh;padding:24px 16px}.nav-item{flex-direction:row;justify-content:flex-start;gap:16px;width:100%;padding:16px;font-size:16px}}